Forum Academy Marketplace Showcase Pricing Features

Important Information about context.uploadContent()

This entry is inspired by this post

Today I was working on a plugin that uploads an array of files to the bubble server, and I ran into some problems due to a lack of documentation about context.uploadContent() (and if it does exist, it’s so burried, I couldn’t find it …)

Problem:

context.uploadContent(fileName, base64String,  callbackFunction);

was not working for me. The files would show up in the file manager, however they were corrupted:

And when you would click on it, this page would appear

Turns out, the problem is the way bubble requires the base64 encoded string to be given to the server is weird (keep in mind, I am somewhat a beginner, so this may be obvious to more advanced coders).

What NOT to do:

"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlb ..."

This is what a normal base64 encoded string looks like. Giving this will get uploaded successfully, but it will cause the corruption problem we saw before.

The RIGHT way:

"PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTg ..."

For an unknown reason, you must remove the first two parts of the string:
data:image/svg+xml;base64,
Leaving this information in the string will cause the problem we saw. Thankfully, the solution is simple: use the split(",") function! It is the key to solving the issue.

Example:

    const temp = base64String.split(',') //Splits up the b64 string into pieces
    const data = tmp[1] //Takes only the part of the string we need
    console.log(data); //Double check if it gets formatted correctly

Then,

    context.uploadContent(fileName, `${data}`,  callbackFunction)

After all of this, your files should get uploaded correctly :slight_smile:
I hope this documentation was helpful for someone out there. Once again you can check the original poster’s post who found the solution here

2 Likes

Hi @jonah.deleseleuc,

Glad you got things figured out. Just to clarify a point…

Absolutely true.

Actually, it’s not a base64-encoded string. It’s a data URL, the latter part of which is a base64-encoded string.

There are a few related forums posts. Just search for “data URL” and/or file upload.

Glad you got it working! :+1:

4 Likes

Thank you for the clarification, I did not know there was a difference between a data URL and a base64-encoded string. Thank you!

1 Like

I’ve created a plugin that handles converting files to Base 64 strings, even before they are uploaded to the server.

Check it out here:

1 Like