[Resolved] Sending images to and getting images from Bubble to Dropsource - Edited


#62

@seanhoots do we still have to edit the json file to enable picture uploading today?? since its been over 8 months since this post was created.
and i followed @jparker screenshot and replicated the json file for image, filename and content
But somehow I am not able to do so.

Please advise. thank you


#63

If you’re having trouble with your swagger please post a link or the excerpt you’re struggling with so we can help troubleshoot.


#64

Hi,

Im trying to do this with a PATCH request. Is that possible? Its not working for me. I have successfully changed my swagger spec file and imported it to Dropsource (it shows content and filename under my PATCH obj/user_info/{uniqueID}), but when i run the requests, it continuously gives me 400 errors after having done the same modifications you did to the POST… It’s probably modifying the Swagger that ruined it because when i run the PATCH request with it in POSTMAN there are no problems at all.

This is a complicated affair. After attempting this i understand why people had so much trouble!


#65

Hi Asger, if you can include the changed section of your swagger I can have a look in case there’s an issue in it.


#66

I see you posted it in intercom so had a quick look. One thing I’m noticing is that you seem to have two versions of the picture object in your definitions but your endpoints only refer to one of them. I’m guessing the one with the “created by” field should maybe only be returned from your endpoints (not sent to them) and the other one should possibly be the one you send with post/patch - I haven’t used patch to do this but in the endpoints I used for the photo saver app I think the “created by” field was only received (e.g. when Bubble responded to a request) and not sent if that makes sense…


#67

lol just noticed you’ve resolved it - is that right?


#68

Yes!

I think you may be right about those points. I ended up making a new spec file for simplicity and keepings things separated. PATCH requests work well with images too.

PATCH tip: if you are going to patch photos with the API, it does not make sense to insert the https: in front of the images in a bubble workflow (following Sues example in her POST endpoint) . Use the append to string action in dropsource to insert the https: in front of the image when you retrieve it from the DB. This is because when you use the PATCH request it will overwrite the https: from when the image was originally created. If that happens, the image will not show after the user updated the picture.

@seanhoots you pointed out at some point it’s annoying you have to edit the swagger every time you make other changes to your endpoints or APIs. I agree. The solution: Make a separate spec file just for the image requests. In that way you don’t need to make edits every time you update non-image APIs in bubble.

For those who don’t know how to edit their Swagger files yet here is a crash course that will get you down the right path in an hour or so: https://www.udemy.com/learn-swagger-and-the-open-api-specification/


#69

Great idea. Thanks for sharing


#70

Can you show us an example of the swagger file and how you structured it for the images?


#71

Hi,

I can’t upload json files here but i followed the example from above in this thread. Also take a look at the spec file from the photosaver app assets that you can download.

Here is some of my spec file where i just used the syntax as it is above in this thread (and from the photosaver app):

	"definitions": {
	"profile_picture_endpointBody": {
        "type": "object",
        "properties": {
            "profile_image": {
                "type": "object",
                "properties": {
                	"contents": {
                		"type":"string"
                	},
                	"filename": {
                		"type":"string",
                		"default":"image.jpg"
                	}
				}
			},
			"Created By": {
				"type": "string",
				"description": "'Created By' field of the current user_info ('user' represented by a unique ID)"
            }
        },
        "required": [
            "profile_image"
        ]
    },
	"profile_pictureBody": {
	    "type": "object",
        "properties": {
            "image": {
                "type": "object",
                "properties": {
                	"contents": {
                		"type":"string"
                	},
                	"filename": {
                		"type":"string",
                		"default":"image.jpg"
					}
				}
            }
        }
    }
},

This is from the part where you do the definitions, not the actual path. I copy-pasted the definition of the paths and responses directly from the auto-generated spec file from Bubble.

Use at your own risk! I am at a beginner with this so even though it works there may be things that could have been structured better in there. I really recommend you check out the udemy course that i linked where they explain defining schemas and so forth.


#72

I tried following the instructions for uploading the images and now I am able to load them to bubble but the base64 string seems huge , the upload takes a while too even for one single image. Did any one else experience the same issue.

I tried to go to bubble interface directly and look at the data and it takes a while to load the image too.

Thanks,


#73

I agree with the loading time, it takes a while on mine as well.

Are you on the free plan for bubble?


#74

Yes, I am on a free plan. I will convert to a paid plan soon. I was guessing that it may be related to the plan I am on. Hopefully once I transition, I will not see these issues. I was worried because even with just one image, I could see the slowness.

thanks


#75

Thank you so much @karris7,
this fixed my problem!!!