Important Information about context.uploadContent()

Plugin builders
1

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:

cap1
cap11118×94 5.59 KB

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

cap2
cap21906×921 1.98 KB

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

3 Likes
2

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
3

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
4

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