User upload of multiple images at one time

So I’m trying to build a marketplace where users can upload their products for sale. I’ve been working thru the tutorials and haven’t been able to figure out how a user can upload more than one image of their product at one time. What I’m looking to do is have the first image that’s uploaded be the “main image” that gets shown on the homepage, but have multiple images available for viewing on the item-specific page. I get the upload image element, but don’t see a way for the user to upload more than one image.

Thanks in advance for the help.

You can use the mutlifile uploader for this. It’s on of our plugins.

1 Like

@emmanuel, thanks for the response. I tried the multi-file uploader, but it displays the file name, not the actual image. What I’m looking for is for a user to be able to see multiple images on a page without having to include multiple image upload elements and make the user upload images one by one. Requiring a user to click on links to see the images seems unnecessary.

Any recommendations on the best course of action here or is this not possible yet?

1 Like

Yeah… It’s not an element we have yet. if you see an open source one you like on the web, happy to have a look at how much work is invovled to add it.

1 Like

Got it, thanks!

Found this and thought it might be of some interest: http://www.dropzonejs.com

That’s exactly what we use for the mutlifile uploader.

1 Like

Interesting, their demo shows images when they’re uploaded instead of just file names that show up in bubble’s multifile uploader…wonder why the display is different.

We may not have enabled that feature yet. We’ll check

I spent a few hours playing with this today.
The issue seems to be that the multifile uploader as seen by Bubble only produces a list of “files”, not “images”.

Although those files could perfectly be actual images, I cannot cast “file” into “image” for display widgets like a slideshow as they require a final element to be of a type “image”…

Hopefully this is easy to fix, as uploading images 1-by-1 is indeed annoying.

1 Like

Files and images have similar functionalities in Bubble. You should be able to have a list of files for the slideshow. Can you share a link or use the forum_app?

I have created a page named “slideshow” in the Forum App.

It has two types of input elements on the right: one multi-file and two image uploaders.
It also has two identical widgets on the left with slide show carousels fed off the input elements on the right.

The DB looks like this:

  1. A structure “Image Wrapper” with a field “Image” of a primitive type img
  2. A list “Image List” consisting of Image Wrappers.

so it is “Image List”->“Image Wrapper”.Image

Whenever I click Submit button, input picture files from two input widgets are read into fields of new “Image Wrapper” elements, which are added to a new Image List. The slideshow widget searches for any Image List as a dynamic input and displays the element type “Image Wrapper”, field image. This works well.

Now, if I try to use multifile input, the problem arises.

Similarly, I have a list type called File List with element types File Wrapper with a field of the primitive type “file”.
But the multifile input fields returns me a list of primitive file types, not File Wrapper objects. So I cannot create a File List out of MFI.

On the other hand, using MFI I can utilize a different list type (called “Bare Files”) that consists of primitive file elements. However, now I cannot tell the widget slideshow how to use it because “Image Type” field in the carousel element assumes the element is a composite, not primitive, and has fields to display.

Therefore I cannot create a composite structure with MFI and I cannot use primitive types directly in a slideshow widget.

Ideas?

@emmanuel,

Another potential issue is that the multi-file uploader seems to not be clickable on mobile phones. I can’t speak for sure for Android, but every iPhone I’ve tried doesn’t get a response when you try using the uploader.

I’d like my users to be able to upload multiple photos from their phones. Both the image uploader and single-file uploaders work fine on mobile, but would be a bit tedious for users.

I tried here and it worked for me. If you can have a reliable situation that doesn’t work, please email us.

1 Like

@dkharitonov were you able to figure this out or get a work around? I’m also able to get the multifile uploader to upload pics as files, but because they are labeled as files, the slideshow will not recognize the image field.

Hi Guys, I’m trying to get to grips with the Multi File Uploader too.

In my case, I’m trying to tag some photos of the zoo. Just as I would with a single image uploader, I have a repeating group to display the images. If I just upload one image at a time, it works fine, but if I try to upload more than one… nothing much seems to happen. I get two new entries, no matter how many photos I upload, but only a broken link to a photo.

I’ve got an app here, page tag_multi.

If you have got any further than me with this, I’d love to know how…

many thanks

Anyone ever figured how this works? Having the same issue…

1 Like

Yes, any help solving this would be greatly appreciated. I have been pulling my hair out trying to find a workable solution. thanks again.

Yes, it works … A bit clunky but it works !

1 Like

Regarding issue of multi file uploader and iOS.
According to dropzone’s git Bubble’s developers just need to update the version of Dropzone they are using. @emmanuel please take a look. Basically you need to just add class ‘needsclick’ to Dropzone element. I tried to simulate this using JS code:

document.querySelector(’.dropzone’).classList.add(“needsclick”)

Works like a charm!