Multi-file uploader Dropzone

Need help Plugins
1

I’m trying to get the Bubble native ‘Multi-file Uploader Dropzone’ to work with my app, and i’ve got it ‘working’, but with a few issues.

  1. The EXIF data seems to be removed on upload. I’m using a third party plugin that works on the simple image uploader, but on this it doesn’t (even when uploading one image). Even when saving the image on my desktop I can see the metadata is there prior to upload, and gone after.

  2. There’s a horrible green ‘loading’ state that I just can’t shake. I was hoping to be able to hide the element immediately after selecting a file, but that doesn’t seem possible. You can hide it as soon as the images are visible on screen, but with Bubble’s speed that can be 10/20 seconds per image. It’s really nasty.

This is a video of the plugin for reference: https://www.youtube.com/watch?v=5_sJbiM25xg

Wondering if anyone’s got a similar experience / resolution.

1 Like
2

Okay, after days of messing around, I posted that and though “I wonder if it’s because the file is private”. Bingo. The EXIF data now shows.

Weird.

Still need help on the green loading screen though! That’s actually the more annoying issue of the two as it’s just so ugly.

10

3

@peter.sam.ramsey This video shows how to change the look of that uploader, might be of help.

3 Likes
4

Ah, yeah it shows how to add elements to show the images, but not hide the green thing. She even says in the video “you still see this, but it’s better”.

I want to:

  • Click on element
  • Opens native file uploader
  • Click on files
  • Close file uploader and immediately hide element
  • When image is visible onscreen, show repeating group of images

2 problems:

  1. I can’t work out how to hide the element when it’s clicked:
    “Element value is changed” doesn’t update until the image has been uploaded (i.e, you’re seeing the green thing)
    “Element is pressed” doesn’t have this option for this element. And wouldn’t know if you added an image or closed the native file window.

  2. The image believes it’s visible when the white space appears, not when the image is actually rendered on screen. There were a few other posts about this issue in bubble, but no clear resolution.

1 Like
5

I haven’t used the multi-file uploader, but what I do with the regular uploader is a hide it completely behind some element. Then use a bit of JavaScript to click that upoader And you can use actions and workflows to manage and display the files. I think it should be possible to make it look nice in your case too.

6

Hey, and thanks. I’m a ‘non-coder’ and fairly new to this. How’d I do that? Is there an example of using Javascript to click another element?

7

Also, how’d you add random Javascript into Bubble? (hobby plan?)

8

@peter.sam.ramsey

  1. Install the “Toolbox” plugin, find the “Run JavaScript” Action

  2. Make sure you can set HTML ID on your elements (found in settings)

  3. Set your uploader element ID to “uploader”

  4. When the element is clicked, trigger the “Run JavasSript” action, and run this code:

document.getElementById(“uploader”).getElementsByTagName(“input”)[0].click();

It should open the file viewer.

1 Like
9

Hmm,

Yeah, this doesn’t work.

  • ID definitely set to ‘uploader’
  • New button that has 1 workflow action of run Javascript with that C&P
  • Click button and nothing

Also tried:
document.getElementById(‘uploader’).click();

Anything obvious I might be doing wrong?

10

Okay, the Javascript works when I change the element, but the multi-zone uploader doesn’t toggle on. That’s even more frustrating! Any ideas?

11

@peter.sam.ramsey I did some more testing, it seems that code only works on the single file uploader.

Try this code on the multi file dropzone element:

$(‘#uploader’).find(‘.dropzone’).click();

4 Likes
12

@stone, nope, still nothing. :frowning:

Thank you for trying, I really appreciate it.

Hmmm…

13

@peter.sam.ramsey Works perfectly in my test app, do you want to see it?

14

@stone please. I might just be missing something super simple and obvious.

15

@peter.sam.ramsey

1 Like
16

GOT IT!

Maybe it’s a mac thing, copy/pasting from your Bubble workflow instantly worked, whereas copy/pasting from this page didn’t. Perhaps the ‘Mac Comma’? Is that still a thing?

Anyway, thank you so much for your time.

^This works everyone

4 Likes
17

@peter.sam.ramsey I’m not sure, I’m using Windows at the moment so maybe.

Great it worked though, if you feel your problem is solved, feel free to mark the thread as solved.

18

Hey @stone. I’ve got another Javascript (and related) conundrum…

I’ve got an event when the fake button (as per above) is clicked, that a state:spinner=yes happens. However, that occurs before the user has selected files on the native pop up.

See image below for a demonstration.

PNG
PNG1107×1952 143 KB

The other side of the process, I have a ‘visible=yes’ event to hide the spinner when the image has loaded. However, I can’t seem to launch it at the right time.

Really I’d want to open the spinner after the multi-uploader is uploading. But the ‘count<0’ only occurs once an image is loaded on page.

Inside the multi-uploader there’s no ‘loading=yes’ event.

46

Any ideas how you’d achieve this in Bubble? Perhaps it needs a question of its own.

19

To clarify, I was wondering if there was a way to say “if the user closes the native window, set state=no”.

20

Some uploaders, like the paid plugin AWS File Uploader, have special states to tell you when a picture is being uploaded.

The multifile dropzone plugin is pretty simple and does not have it.

It’s tricky then, if you want it to react exactly accurate. Maybe try making another thread for that yeah. One could always make a custom plugin for it but if you don’t know JS, but yeah, could be costly.

Or try some other (maybe paid) uploaders already out there. You can test paid plugins for free by going into the template plan on your app. Just make a template and connect to your app.