Hi,
Anyone know if it’s possible to POST an image from the Bubble Connector to another API?
I am able to POST a local image using POSTman which uses a GUI to load an image. Now, I want to POST an image stored in Bubble to S3 using the Bubble Connector, Anyone know what the equivalent configuration with the Bubble Connector?
Hi Kramwe,
From what I have read, Bubble lets you input a URL as a value for file and not the actual file of the image from your library. I really hope I’m wrong though! This is what I read: [SOLVED] How to POST a file via API
Found post from Dec 2016 that this wasn’t supported. 
@iamsalar, any chance you could share screenshots of your code for posting an image using base64? (mostly trying to figure out what the bubble connector should look like).
Thanks!
Hey @sridharan.s,
Take a peek at the SendGrid attachments thread for some more context:
Summarizing.
As of Dec 2016, the Bubble Connector doesn’t support multipart/forms.
One idea for a work-around, was to convert the file to base64 and send that instead of a .jpg or .png file. While there is a Bubble module to convert the image, the POST to S3 still generates an error that the enclosure-type to be multipart/form.
There’s certainly improvements and workarounds needed. We’ll be working on something for S3 soon. 
Is this something that is supported now? I can’t see any documentation for it. My use case is that some images will be uploaded via the “New Entry” button, and manually uploaded from the desktop - and others will be imported from a third party tool. I was hoping to use a multipart form so that the images will be stored consistently with the manually uploaded images.
Thanks!
I worked around the lack of multipart form support by inserting the images as a separate step via an API Workflow. First create the record and get an ID. Then do another request to the API Workflow that accepts two parameters: the record you just created (using the ID ) and a key img (or whatever you want to call it) of type image.
In step 1 of the workflow, add a “Make changes to Thing”. My “thing” has a field that is a List of Images (in my table it’s called images), so I need to add to the list (if you only have one image then you just set it): images add img:savedToS3.
For each image I do a separate POST request to that API Endpoint with the Thing ID and the image URL. Because it has savedToS3 it does the magic of uploading from the URL to an S3 bucket.
@makingthingsapp can you share a screenshot for how you set this up? I am interested in doing something very similar but in trying to set it up on my own I cannot get it work.
Hey @anon20158934 - the way I did it was to create an API Workflow like this:
Where Pattern is a Bubble “thing” in our app. It has a field patternImages that is a list of images.
Inside the workflow I set it to save to S3 (using patternImages add because it’s a list):
And finally, I called the API from another script using JavaScript (you could just do a plain PostMan request, or whatever)…
fetch(`${bubbleBaseURL}/pattern-upload-image`, {
method: "POST",
body: JSON.stringify({
pattern: patternId,
img: { filename: name, contents: base64Image }
}),
headers
})
.then(r => r.json())
.catch(console.error);
The important part here is the pattern and img parameters that match the workflow parameters. Also the format for the image is parameter is{filename: <whatever name you want>, contents: <the image Base64 data>}.
@makingthingsapp Thanks so much for sharing! I will give it a go and see how it works for me.
effing genius, thank you so much