[SOLVED] How to upload an image using POST API

Questions
22

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

23

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.

24

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.

25

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

26

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
27

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.

image
image1706Ɨ367 30.3 KB

28

What did you set for the initialize setting of ā€œfileā€?

1 Like
29

@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

image
image820Ɨ635 56.6 KB

image
image788Ɨ718 54 KB

should the ā€œcontentsā€ data be set as a file as Iā€™m doing?

1 Like
30

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.

31

@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)

image
image1510Ɨ854 67.4 KB

image
image3010Ɨ1868 742 KB

32

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

33

@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
34

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

Link to editor: Proof-of-concept | Bubble Editor

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.

image
image2864Ɨ1868 852 KB

When it works, I also expect this song to play

1 Like
35

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.

5 Likes
36

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

2 Likes
37

: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).

38

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.

3 Likes
39

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

40

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
41

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