How to create Custom Uploader's in Bubble.io
In case you'd prefer not to use the 'out of the box' option.
Hello fellow Bubbler’s,
In this week’s article, we’re going to cover how to create custom uploaders in Bubble. Bubble has an out-of-the-box image uploader that’s pretty simple and not very customizable. This tutorial will walk you through how to create a custom uploader, so you can recreate cool designs like those you might see on Dribbble!
The image above will serve as the inspiration for this tutorial. You can find the original here.
Getting Started
To create a custom uploader, we’ll start by creating a group (Group A) that will serve as our main container. We will set this group to have a purple drop shadow, a white background and rounded corners. Here are the settings I used:
Background Style: Flat color
Color: #FFFFFF
Horizontal offset: 0
Vertical Offset: 10
Blur radius: 30
Spread radius: 0
Boxshadow color: #D5CAE6
In the Layout tab, set the container layout to column.
Inside the main container, add another group (Group B), and set the layout for this group to Align to parent, and uncheck the box labeled “Make this element fixed width”.
Next, add 30px margin to each side of this container. This will create space between its border and the border of the container it sits in.
With the inner group still selected, select the Appearance tab in the property editor and apply the following settings:
Border style - all borders: Dashe
Roundness: 20
Width: 2
Color: #D5CAE6
Inside Group B, add another group (Group C) and set its layout to column. Inside this group, add an icon and a text element. With Group C still selected, place it in the center nonant of its parent container. You should now have a result that is similar to the image below. You can change your text to be similar to the image below as well.
Next we’ll add a picture uploader element into Group B, and uncheck the fixed width box and the fixed height box in the layout tab. This will cause this element to fill the parent container.
One thing you’ll notice at this point is that the picture uploader lies on top of the other elements in this group. This is what we want because it’s what enables the upload workflow to trigger whenever a user clicks anywhere in the container. This is also only possible because the parent container layout is set to align to parent.
However, we still want the other elements behind the uploader to be visible. To make this happen, we’ll need to remove the placeholder text and set the opacity of the image uploader to 0. You can do this in the Appearance tab. To change the background color, remove the existing style, then change the color value from 100 to 0. Lastly, change the border style from solid to none.
Your image uploader is now transparent, which will enable the uploader to work with the design you created!
Bonus
If a user uploads an image, you may want to let them know that their upload is in progress. You may also want to hide the icon and text once the image is uploaded. You can do this using conditionals.
Text conditional
With the text element selected, open the conditionals tab and click on Define another condition.
Set the When statement to: Pictureuploader is loading
Next, under the dropdown labeled Select a property to change when true, select Text. This will open up a small editor where you can change the text that is displayed. In this case, I changed the text to “Uploading…”
This statement means that when the picture uploader is loading (which is when an image is being uploaded), then change the text in this field to display “Uploading…”
Visibility conditional
This conditional is useful because if a user uploads an image, it hides the group containing the icon and text. If a user uploads a particularly small image, or a PNG image with a transparent background, the icon and text would still be visible behind the image, unless we hide it.
To hide both the icon and the text, select the group that they’re in (Group C), and open the conditionals tab in the property editor.
For the when statement, input PictureUploader’s value is not empty.
Next, under the dropdown labeled Select a property to change when true, select This element is visible and keep the box unchecked.
Your icon and text will now be hidden whenever a user uploads an image into the uploader element!
That’s it!
You can preview a demo of the result of this tutorial using this link.
I hope you found this article helpful and that it helps you realize your creative freedom when it comes to customizing elements in Bubble. Feel free to drop any questions or thoughts you may have in the comment section.
If you enjoyed the article or found value in it, please share it with others who you believe would find it helpful!
Happy Bubbling!