Bubble webhook receives file in decimal format and unable to convert it into file in Bubble database

Hi folks!

I use Integromat and POST hex file from there to Bubble API endpoint.



When initializing the Bubble API endpoint, I confirmed that the file is delivered successfully.


I’ve changed types of data to “file” and tried to run this webhook deleting “initialize”


It doesn’t work and in the database, I have an empty “Attachment” file field

I need to receive file in Bubble database, please, help.

If you can share the endpoint setup screen, I think I can help. Thanks

Hi @vovahumnytskiy,

If you want to get the file into Bubble storage, you’ll need to base64-encode the contents and post it as JSON as described here in the docs and also explained in this forum post. I think there might also still be a 50MB file size limit as well.

Bubble just won’t recognize the content-type you’re posting as an image file.

-Steve

1 Like

The endpoint setup won’t give you any insight

Hey @sudsy.

I’ve managed to POST the file to the endpoint as a string encoded in base64. I was able then to save this string to the Bubble database. I used an online converter from base64 to JPEG and it displayed my image, brilliant!


Now I have a new issue. I have no idea how to display in Bubble that base64 string as a JPEG/PNG or any type of file.

Hi @vovahumnytskiy,

You’re getting closer, but the idea is not to add the contents of the file to the DB as a string. The idea is to get the file into Bubble storage (file storage - not the database) so that it appears in the DataFile manager list. The DB should only contain a reference to the file - not its contents.

Your POST API call should look like…

{
  "title": "My Image Title",
  "my_image": {
    "filename": "the-desired-filename.png",
    "contents": "/9j/4AAQSkZJRg [...]"
  }
}

…where contents is the base64-encoded contents of the file; and your endpoint should be configured as follows…

The file will then be uploaded to Bubble storage, and it can then be handled like any other Bubble image or file data type.

Please note that title is optional. It’s just a DB field of type Text. You can add other fields if you’d like.

Having said all that, if the file you’re attempting to import into Bubble storage is already publicly accessible on the web, the process is much simpler. In that a case, there’s no need for an API endpoint at all. Just reference the URL to the file and use the :saved to S3 operator, which is documented here.

So a workflow to create a product using an image on the web as the product photo might look something like…

-Steve

Thank you a lot for your explanation @sudsy!

What I did is, I asked a friend of mine who is an experienced programmer to help to set up POST API request to send files in base64 format to bubble.io endpoint. Inside Bubble, I save files in “file” format, but they don’t appear in the file storage, only in the database. It’s not a problem, because I found ways to display that base64 file in Bubble.io.

Decided to record a video sharing my experience and helping others in the future by having a smooth process of solving similar problems.

Youtube video link: https://youtu.be/tHtTmuM1AgI

Definitely not the best way to go about it - especially if they are large-ish files and/or lots of them. Saving huge strings in database fields is not a good practice. Plus, you will not be taking advantage of Bubble’s imgix integration.

Not sure what’s unclear about the information I’ve provided, but if I get a chance, I’ll provide editor access to a working example.

EDIT

What you’re no doubt doing is saving the image as a data URL as described in this post. I actually do use that approach for small vector icons in some of my apps; but as I said, it’s far from ideal for most use cases involving larger files.

The matter is that I’ve come up with my solution before seeing your variant. As for “large-ish files”, I agree, in my video, I failed to get a large PNG image, it was injured. Also, the long string is saved not as text, but in the “file” type field. I need to review your approach and will come back soon.

I stopped using “Attachment binary” field here

Yes, it is text. You just don’t realize it.

Internally, Bubble’s file type is just the URL. (That’s why a text type can be converted to a file type via the :used as operator as shown in my screenshot.) Thus, you’re simply storing a big hairy URL in the database. It’s that simple.

EDIT

Just FYI, base64 encoding is the process of converting binary data into text data, and the resulting text string is generally about 1/3 larger (in terms of the number of bytes) than the original binary data. Thus, base64-encoded files (images in your case) are also “bloated”.

3 Likes

This topic was automatically closed after 70 days. New replies are no longer allowed.