How to upload multiple images

[sayres38]

Hi Jason

9am your time 5pm GMT today any good?

I got your last email so please send Zoom instructions and hopefully speak to you in a couple of hours

[J805]

I just sent another email. So weird these were not going through. I may need to add your email to my contact list so it comes through correctly. Not sure why it keeps sending it to my junk folder.

Take a look at my schedule availability at www.nocodeminute.com or click here for a 1-Hr Session.

[paul18]

@boston85719

I looked at using a workflow based on the status of the uploader element but don’t see any events I could select except “when input value is changed” which only kicks in after the uploading stage is complete, and therefore too late.

Thank you for detailing this problem in such great detail. Very very much a problem for me as well.

[boston85719]

No worries. Hope it helped.

[nurzhan]

hey check out my solution

Multiple image upload guide

Hello everyone recently i faced idea of preshowing multiple uploaded images of item, at add item page i found out it could made by plugin Multiple image but implementation is ugly (my opinion) so i want to share my solution and would like to hear feedback from you about implementation is it any good or has issues i didnt thought about so this is what i wanted to pre-show images on add item page [image (3)] fisrt of all lets imagine workflow [image4] we need to create “buffer zone” [da…

[boston85719]

Cool. How fast is it to show the images?

[nurzhan]

well it show right the way you click upload you don’t need to refresh page if this is what you asking

[zeta1119]

Hi @boston85719 ,
thank you for the great post!

I tried to implement the Multi-File Uploader in the way you described.
However, I have problems when I try to display the images somewhere else.

I tried with the button inside the repeating group as well as outside (in the latter case for all pictures together) - to me it didn’t seem to make a big difference, at least in the database the images seem to be fine.

→ Is there a way I can see in the database whether the picture was saved correctly? It seems to my ordinary eyes that the “image” and the “image_s3” are the same - at least I can download both of them in the database as a JEPG.

When I try to display the photo(s) on another page, they show up for like 1 second, then they disappear. Do you have any idea what the problem could be?

I’d really appreciate your help, thank you!

[norbert.nica]

Bubble Editor - Neat-multi-file-uploader

[boston85719]

Check out @norbert.nica post below. He shares his editor for you to see what is going on behind the scenes and he did a great job putting it together.

[zeta1119]

Great, thanks!!

[major_groove]

I used this Plugin for Minnnis [New Plugin] Uppy File + Webcam Uploader

[Build-More]

The Uppy uploader has no flexibility for multilingual / flexible setups. So far, @norbert.nica 's post has the most flexible and versatile solution for this. Only downside: it doesn’t really block the users from only selecting images when needed.

Thanks for the share!

[brad.h]

@boston85719

I have not yet created a “save all” button but assume it won’t be an issue

Hi @boston85719 . Did you happen to create a save all? That’s where I’m stuck right now.

P.S. - Great post. Was number #1 on my google search.

[boston85719]

@brad.h

Did you happen to create a save all?

I did not, but if in need of it, I would set it up using a recursive backend workflow.

Set up the button ‘save all’ to trigger the backend recursive workflow. The backend workflow should have a key parameter ( maybe label it ‘image-list’ ) that is of type File and is a list/array.

Then set up the same workflow action for saving the individual image through the recursive backend workflow.

@brad.h

Was number #1 on my google search

What was the google search term you used?

[boston85719]

New video based tutorial available for this functionality, with an optimized approach and a ‘Save All’ functionality, as well as clear all.

Most important improvement over the original tip, is the maintenance of the file manager to avoid any ‘ghost’ files in your file manager.

Multiple Image Uploader | NoCode Trainer

Tutorial includes access to the tutorial editor if you wish to copy and paste the complete feature set into your application.

Learn More

Boston85719 is an expert Bubbler with a decade experience as an educator. Real name Matthew, he has been actively building SaaS apps, marketplace apps, scheduling apps and more for clients, himself and for sale as templates.

As an official Bubble Bootcamp Instructor, he leads Bubble Bootcamps on a regular basis.

Always willing to offer advice via the Bubble Forum, Matthew also offers Private Personal and Group Training Sessions.

Through his site, NoCodeTrainer, Matthew provides a range of tutorials with editor access to help you jumpstart your Bubble development.

Always accessible you can send Matthew a private message via the forum or send an email directly with your requests.

Be sure to checkout the Stripe Integration Course when you are ready to integrate Stripe payments to start monetizing your application via product sales or subscriptions.

[jgellis]

To hide the Uploader as it loads do the follwing:

1. Add a ID tag to the uploader ( Example: #HideMe
2. Go to Settings → SEO and add the following CSS

#HideMe { opacity: 0 !important; }

Note: 0 is a zero above not an O.

Other styling can be done, but I did not dig into the CSS to figure it out. At least this hides it.

Regards, John

[asposito]

Hi! I would like to know if it’s possible to upload images that are inside a date range or from a specific date. For example: user clicks the multifile uploader and shows only yesterday’s photos.

[boston85719]

When a user clicks a uploader it opens their devices storage. So I do not think it would be possible to manipulate their devices storage from your webapp.