Bubble's Multi-File Uploader - How to style for improved appearance

How do you guys change the “hospital green” background of the Multi-File Uploader?
Javascript to add CSS?
A more customizable plugin?
Other suggestions?

Hi,

Has anyone managed to style it? I tried by adding an HTML element with CSS.

<style>
#test {background-color:white !important}
</style>

Assigned the ID “test” to the Multi File Uploader.

Didn’t work.

1 Like

I managed to resolve this by replacing any element background within the upload control with the preferred color.

  1. Add a Multi File Uploader to your page.

  2. Enable "Expose ID attribute (…) in App Settings.

  3. Assign an id to your Multi File Uploader.

  4. Add a HTML element to your page with the following value:

    #multifileuploader-id *{background-color:white;}

Replace the multifileuploader-id with your id value.

I still think the Bubble Teamp should add a background style property for the row element though…

@lindsay_knowcode

2 Likes

Nice tip - I find the Multi File Uploader unnecessarily ugly, and have to mess around with custom states, transparency to make it look reasonable.

By the way I’m moving this into tips category

1 Like

So, what do you use for multi file upload?

I also connected the File Dialog to a button so I could hide the Multi File Uploader completely.

I do agree that it is ugly.

1 Like

Nice tip from @codecompany. Thanks! Took the CSS hack a little bit further to customize the multi-File Uploader. Here is what I achieved:
custom_uploader_bis

Played mainly with 4 CSS classes: dz-preview, dz-remove, dz-progress and dz-upload.

4 Likes

Hi Mehdizirari, I’d really like to do this too. May you please share a screenshot of the code you used? I can’t seem to figure it out.

1 Like

@mehdizirari any update to @leonidas.petrou4 comment?

Actually, I don’t like the multifile uploader plugin from bubble as it is not easily customization, so I build a plugin that enables me to build a custom multi uploader style and control it as I want
you can try it here Multi uploader Plugin | Bubble
it’s free

Sorry for the late answer… Haven’t checked the forum for a while.

Here is the code used to hack the multifile uploader:

<style>
#multifileuploader-id .dz-preview {
background-color:white;
border-bottom: solid 1px #D8D8D8;
box-shadow: none;
height: 44px;
}
    
#multifileuploader-id .dropzone.dz-max-files-reached {background-color: #F8F8F8;}
    
#multifileuploader-id .dz-remove {
background:white;
color:#6302E7;
font-size: 12px;
right: 0px;
}
    
#multifileuploader-id .dz-progress .dz-upload {
margin-top: 7px;
background-color:#6302E7;
background-image: none;
right: 0px;
height: 6px;
}

</style>
3 Likes

Hello all,
here is the correct solution that works. Finally, i managed to change "Hospital Green :slight_smile: "

  1. Add a Multi File Uploader to your page.

  2. Enable checkbox “Expose ID attribute (…)” in Settings → General → General appearance.

  3. Assign an ID to your Multi File Uploader. Means in “ID Attribute” field you need to type any word you like. I use a word: uploader

  4. Add a HTML element to your page:
    <style> #uploader *{background-color:#A8A8A8;} </style>

  5. Done (it works).

Choose color you like by typing it in words or as a number: background-color:black; or background-color:#A8A8A8; both works.

Regards
Valerij

Saw your plugin it works amazingly, but 1 thing im not sure where to get it


current workflow api… appreciate if you can guide me to it… thanks

Unfortunately the issue is not clear to me can you send me more info or screenshot , you can DM me anytime

are you able to use Box as the storage service for the files? I couldn’t see where to update this part of the code

currently the plugin only support bubble storage , I will publish a pro version of the plugin which will support different storage providers