Multifile upload design

[boston85719]

I am trying to figure out the multifile uploader and ways that I could change the design of it.

I spent the time searching and reading the forum and piecing things together to be able to create a multifile uploader that works for saving multiple images at once.

Now that I know how to do that, I am attempting to make it look a bit better.

I have already set up a group

This group is on the page “underneath” the multifile uploader element.

I made the multifile uploader element have no text and no background, so it is essentially invisible, however when I upload files the pre-built design kicks in to show the upload status.

My first and only thought was to make the multifile uploader element sit “below” the group I designed, but when that is the case, you are unable to use the uploader as it is “covered”.

Does anybody have anyway that they have successfully altered the design of the multifile uploader supplied by bubble?

I’d rather not use code, but if somebody has utilized some CSS or JS and would be willing to share how to do that, it would be greatly appreciated.

At this point I got everything else I need figured out to make a great user experience, but would like to get a better looking upload indicator.

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.

[SerPounce]

Phew, after much trial and error on how to get rid of that ugly uploader element:

1. Put the uploader inside a group where the group is the exact size of the uploader element.
2. Add a shape/group that is not visible but is in front of the uploader. You can customize this anyway you want to say something like “Please Wait for upload”.
3. Add a text custom state called something like “uploading” defaulted to no.
4. Add a workflow when the group is clicked to change the custom state to yes.
5. Add conditional to the “Please wait” shape/group to be visible when the uploading state is yes.
6. Add a workflow when the uploader’s value has changed to change the custom state to “complete”.
7. Add conditional to the shape to change the text to “Upload complete” when the state is complete.

[boston85719]

Thanks @SerPounce this is a great work around to getting the uploader element not to be visible but still functional.

I’m still hoping to find a way to style the uploader element so that users would still see the progress of their uploads, especially since it is often riddled with errors and an uploaded file takes way to long to upload and needs to be abandoned ( canceled ) during the upload process.

Still great to at least get it out of view.