I’ve got a little app running on my desktop connecting to a test API endpoint using POST.
So far I’ve gotten text from the desktop to show up in Bubble’s database using a format like this: first=some thing&second=another thing
I’ve also gotten an image into Bubble’s database using a format like this: first=some thing&second=another thing&third=http://some.place.com/with/an/image.jpg
What I haven’t been able to do is get an image from the desktop into Bubble’s database.
I tried following this little blurb from the reference in two ways and it’s doing everything except uploading the image. first=some thing&second=another thing&third={"private":false,"filename":"some_filename.jpg","content":"a string of base64 encoded image data"}
first=some thing&second=another thing&private=false&filename=filename.jpg&content=base 64 encoded image data
I wouldn’t really expect that second one to work, but figured I’d give it a try.
Bubble is returning the message I told it to in the API workflow and NOT returning any errors. The two parameters with text in them always show up in the database.
Hi, @blueback09. This sounds a bit like a problem I had some time ago, albeit I was trying to upload pdf files through the API rather than images. For me I kept getting the string value of the URL for the file, rather than Bubble uploading the file into the Bubble database. You can see the issue here. For that issue, @emmanuel said that Bubble wasn’t able to provide the functionality even though the API provided the file as a potential field for receiving data via the API.
If your issue is in some manner related to the one I had, I’d like to know if this is in fact possible as I’d really appreciate being able to import files through an API call.
start using stack “easyJSON”
put “C:\Users\theyogi\Pictures\NK_Exoskeleton_B.jpg” into tFile
put URL (“binfile:” & “C:\Users\theyogi\Pictures\NK_Exoskeleton_B.jpg”) into tImage
put base64encode(tImage) into tImage64
replace numToChar(10) with empty in tImage64
set itemDelimiter to ""
put item -1 of tFile into tFilename
put tFilename into tArray[“filename”]
put “false” into tArray[“private”]
put tImage64 into tArray[“content”]
put jsonfromarray(tArray) into tMaybe
put “uno=uno&dos=dos&tres=” & tMaybe into tBody
post tBody to URL “https://howstr.bubbleapps.io/version-test/api/1.0/wf/api_test”
put the result into tResult
You can see in the “it” variable that Bubble sent back a response, formatted the way I told it to. You can also see since the “tResult” variable is empty there weren’t any errors.
Here’s the database where it’s happily accepting the two text parameters but not grabbing the image. The things with images in them are where I put a URL to an online image into the POST or manually uploaded an image through the database’s editor.
Can you try just running that call with Postman, it’s easier and cleaner (or curl from the mac terminal), and then migrate it to your IDE. I’m not familiar with it, and with the screenshot I really can’t see what you’re sending.
and something different happened; I got an error! Now the API responds with this when I try to post the image array per the reference (the text parameters still work)
{“message”:“Unexpected server error, please try again later”,“code”:“1482300718071x1311”}
{“message”:“Unexpected server error, please try again later”,“code”:“1482300942720x363”}
{“message”:“Unexpected server error, please try again later”,“code”:“1482300981403x354”}
etc
I also downloaded Postman and I’m learning how to use it.
What body type is Bubble expecting? Form data, urlencoded, etc? Or does it not matter?
The reference doesn’t explain how to make any of this work.
So I tried something else and now I’ve got something that at least shows up as a broken image
When I right+click and “open image in new tab” it seems like I get a URL with the entire base64 encoded text of the image in it. It goes on like that for a while.
I got that by sending the post as formdata instead of urlencode and by converting the base64 into JSON-specific base64, because apparently that’s a thing.
Can you post an example of a properly formatted HTTP POST that actually succeeds in uploading an image using Bubble’s API workflow? I assume someone must have done it, otherwise the reference wouldn’t say it’s possible. That would give me something to compare to.
I think I’ve got the same POST built in Postman. The result is an error. Since this is an app you seem familiar with, can you point out where I’m going wrong?
This one I tried copying the raw body Postman generates from the formdata dropdown builder and pasting it into the raw option. I manually added parameters like “filename” but I’m not sure how to add the actual file data. In this one the API workflow did create a new thing, but it didn’t put any information into it, even though the text parameters are clearly still there like before.
Thanks, I think we’re on the right track. If I copy the JSON array and paste it into Postman under raw, and select application/json from the pulldown, and tell my API workflow to expect a parameter named “file” to be placed into a file field in a thing, then I get an image uploaded to Amazon that displays properly in Bubble’s image element.
So far I haven’t been able to replicate that success from my desktop app. I keep getting a formatting error. First it was an unexpected token and now it’s a very specific message saying that the content for the image file is missing. That seems like a positive trend, since the server knows enough about what’s going on to give me a specific error message.
For what it’s worth, I also found another way of doing things.
This post is fascinating. He’s doing some really cool stuff with javascript in an html element. One of the neat things I learned is that you can put the entire base64 content of an image into a “link”.
So something that did technically work for me was to upload the base64 into a thing’s text field with “data:image/jpg:base64,” concatenated onto the beginning. Then I put that text into an html element with this code "<img src="search for whatever:first item's text field" width="200px"/> It’s ugly and clunky and slow, but it’s an option.
Hokay, so, here’s what seems to be working for me:
get your file (name and data)
isolate and url encode the filename (somefile.jpg)
base64 encode the filedata
put the filename into array1[filename]
put the filedata into array1[contents]
put “false” into array1[private] (I haven’t tried making it private and attached to a database thing yet)
put that array into array2[file] (I tried changing that but the server stopped accepting it, so apparently it has to be “file”)
put anything else you need into array2[], for example “some example text” into array2[example]
convert array to JSON (as required) what you end up with is something like this:
array2={
file={filename=file’s-name.jpg, private=false, contents=base64}
example=some example text
}
setup your API to recognize the “file” parameter as a file and the “example” parameter as text
change the headers to “Content-Type: application/json”
