Forum Academy Marketplace Showcase Pricing Features

[SOLVED] How to upload an image using POST API

What did you need to do to encode the .jpg to base64?

Same guy, I just don’t feel like switching to my primary account.

So I used Livecode, which has a command to encode the data as base 64.

After fiddling a long time with the “detect data”-function to get this to work I tried it with just adding the data format myself.
Just put the Key “file” and Type “image” by hand and it magically works.

Wondering if anyone has had luck with this since. I believe I’ve got my JSON object formatted properly, being passed to my endpoint, but the result I get in the bubble db is a blank image.

cc @iggyvanlith @emmanuel

Look correctly at the first part of your video (Emmanual Post).
The file information are store in a “file” parameter (you can call it whatever you want)
this give

{
	"file": {
		"filename": "filename.jpg",
		"contents": "base64 encoded data"
	}
}
1 Like

Thanks @Jici, I’ve tried with that exact format as well (with the file JSON object, then filename and contents stored in that object) but no luck. Just retested and I’m still getting this as the record in the DB.

What did you set for the initialize setting of “file”?

1 Like

@Jici thanks for the help here – here’s the initialize call (1st image) and the api workflow detect data result for the endpoint I’m trying to set up


should the “contents” data be set as a file as I’m doing?

1 Like

I forget. But if you use autodetect, the file is split in two part. You can save contents to field (just set image or field) but you need to save the name in another field.
I test it with
data:image/gif;base64,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
without any problem.

Now if you want to save it to s3, I recommend to manually encode the api data. It should save to s3 this way with the filename.

@Jici or others - how does one save the base64 as a file? My original assumption was that the file contents were going to be saved to S3 and referencing that as the source of the the image I create.

When creating the Image record (like first image) I’m still getting it as a Base64 filetype (second image)


Dear blueback09, could you please advice how to do this : 10. setup your API to recognize the “file” parameter as a file and the “example” parameter as text

Thanks in advance

@kirill_anikin my impression of that was

  1. In Api Workflows, you can either use ‘Detect Request Data’ or ‘Manual definition’
    https://cl.ly/9794b3fa5ea1
  2. Initialize the endpoint, which will show you the parameters you’re passing into it (ie via a POST endpoint)
    https://cl.ly/c5d5c71988da
  3. Define how you want to use the data you’re passing to the endpoint (ie as File if desired)
    https://cl.ly/357019d358ac

Still stuck here and have solicited a few great Bubble minds already asking for their take on this. No luck :confused:

Link to editor: https://bubble.io/page?type=api&id=shippo-proof-of-concept&tab=tabs-2

API workflow in question is the “S3 save” workflow, which I’m hoping to pass a file (base64 image) and a name (text) via a Post endpoint I’ve set up. I’d then like to have Bubble create a new image record, saving it with a URL that I can link to, as it would for images I’d upload using image uploader element. Use case for storing Base64 image as an image file w/ URL is for a text editor I’m using making in a CMS. Users will upload an image to the text editor interface I’m using and I’d prefer to not have the long Base64 image data in the HTML markup.

Whenever I save, the data in the Image field is stored as Base64 (so it teases me, rendering as an image) but if you look at the image source it’s Base64 like second link below.


https://forum.bubble.io/uploads/default/original/3X/d/e/de8889a5068e277cf8700cbc17e041fc7bc2e136.jpeg

When it works, I also expect this song to play

1 Like

Hi @eric3, I tweaked your project, and it works now. Check it to see the details. The tma1.jpg image is what I posted through your endpoint.

I think the issue was that the “Initialize / Detect request data” feature should NOT be used. Instead, manually define the parameters as shown. The file parameter can be called whatever you want (“uploaded_image” in this case), as @Jici noted. Additional “field values” for the “thing” being created can be defined at the JSON root.

Here’s a snippet of the payload sent…

{
  "title": "Sorry, Dave",
  "uploaded_image": {
    "filename": "tma1.jpg",
    "contents": "/9j/4AAQSkZJRg [...]"
  }
}

EDIT: As noted in the reference, private and attached_to properties can also be added to uploaded_image.

4 Likes

Amazing, thanks for that pointer! Confirmed it’s working now, will post a video with working version for others :slight_smile:

2 Likes

:slight_smile:

Of course I was looking through to wrong end of the telescope as usual…

Not having the image in base64 in the first place is a lot easier than trying to convert it to an image file in Bubble ! (which will probably need a server side plugin and a little bit of code).

One more quick note (which @NigelG’s reference to base64 encoding prompted)…

The base64-encoded image should NOT contain the “data:mimetype;base64” prefix. That’s needed only in the context of a data URL - i.e. only if you intend to store the image data itself directly in the DB so that the image data is part of the URL and thus served with the page source and rendered “inline”.

That could make sense in some situations for relatively small images, but it’s generally not the best way to go for most images.

1 Like

Dear eric3. thanks for your help. Could you please comment how do your fill in point 2. filed Body {JSON object,………… it looks like you put data directly in bubble(base64 coded image)….but what to wright there if we want to send to endpoint different files?

Thanks a lot in advance

You can use the same pattern with different name for each “file”

{
  "title": "Sorry, Dave",
  "uploaded_image": {
    "filename": "tma1.jpg",
    "contents": "/9j/4AAQSkZJRg [...]"
  },
  "uploaded_image2": {
    "filename": "tma2.jpg",
    "contents": "/9j/4AAQSkZJRg [...]"
  }
}
1 Like

Thanks Jici, but may be it should be like this:
{
“title”: <“Sorry, Dave”>,
“uploaded_image”: {
“filename”: <“tma1.jpg”>,
“contents”: <"/9j/4AAQSkZJRg […]">
},
“uploaded_image2”: {
“filename”: <“tma2.jpg”>,
“contents”: <"/9j/4AAQSkZJRg […]">
}
} I what file name to be variable