HELP! Upload a List of Base64 Images from Client to Server using API

[joaoanzolim]

So I’m building an app that user needs to upload their own images, but I don’t want that those images be upload instantly to server through ImageUploader, then I’m using a plugin (Better Uploader) to upload the raw image in Base64 format in a set state list. I connected an API, via API Connector what gets the file and upload to Bubble server. Follow:

It works with a file (last print above), but doesnt works with base64, I think I’m passing a wrong parameter. When I try to Schedule API Workflow on a list (see image below) it doesn’t return anything, but if I try to Initialize Call on API Connector it works, and save the file into the server.

*This image is an item from list of Base64 images.

If someone know a better way that doesn’t need API or something else, please comment.

[gerbertdelangen]

Hi @joaoanzolim,

No need to use a backend workflow (unless you are using it to save the files to an external service), you can use the action “Send files to cloud a Better Upload” after the user clicks the button Upload.

Gerbert
MVP Design

[joaoanzolim]

@gerbertdelangen when I use it, lets supose that user gonna upload five images, but he added those images individually, this will upload just the last image.

[Sarah_Esteve]

Performance

[joaoanzolim]

The goal is not to storage everything in one click, thats the reason why I’m trying to setup Schedule API Workflow on a list.

[gerbertdelangen]

Ah, now I understand @joaoanzolim . In that case you are probably almost there with what you did before (the things you showed in your first post in this topic). From what I see it that when you click on betteruploader and open the file dialog, it will be reset. So the file that was previously selected is gone from betteruploader.

What you maybe can do is save the file data in a custom state (marked as list). And when betteruploader is clicked for a 2nd (or a 3rd time etc) the new file contents are added to that list (with state:append(betteruploader raw data first item).

If you set ‘Max amount of Files’ to 1 you can be sure the user can only select 1 file at a time, but since you are saving the contents to a state(list) they can select and upload multiple.

Does this make sense? If not, this weekend I can create an example for you. In the mean time, you can also send the creator of the plugin a message, maybe he has an idea.

[joaoanzolim]

This is exactly what I’m doing.

The problem is that if I try to call Schedule API Workflow on a list the Base 64 item is content of a file, not the entire file, I think this is the trouble, see this image:

If I initialize this API Call it works well, because the Base64 is in “Contents” like in the middle of the file.

[gerbertdelangen]

Ah clear, now I understand what “pictures” in your original screenshot is, it is a state.

Maybe it is an option to use local storage (use a plugin like Session & Local Storage Plugin | Bubble)?

[joaoanzolim]

Could you give me an Example or give more information please? I don’t now how I use this.

[gerbertdelangen]

Definitely, I’ll make an example tonight or tomorrow morning and give you access to the editor.

[gerbertdelangen]

Hi @joaoanzolim ,

Played around with it and in the end local storage did not work very well (but I added a couple of screenshots to this post in case you want to explore it, see item B) Local Storage.

What did work, was the use of multiple BetterUploader elements and conditionally showing them:

A) Better Uploader multiple times on the page

Make sure that only one is visible at all times using conditions and that they all look the same. This way the user will not notice they are different elements.

Make sure that the elements collapse when hidden:

The workflow to upload the images looks like this:

I tried it with a couple of fairly big images (15MB each) and it worked (it just takes a while before they are uploaded):

You might need to add a condition to the actions that they do not execute when a BetterUploader element is empty.

B) Local storage

Sometimes this worked and sometimes it did not, old values showed up out of nowhere, probably best not to use this in this case.