How-To Guide: Customize the File Uploader Widget with No CSS

Posted by:
Caitlin Fithian
October 22, 2022

Are you tired of file uploader widgets that all look the same? We are too. That’s why Simple File Upload’s file uploader widget is completely customizable. Change everything about the widget to match your existing website. No boring UI here! Below is what the widget looks like out of the box with no changes.

Change the File Uploader Widget Icon

If you’re not happy with this configuration, it’s easy to change. Log onto your developer dashboard and click on “colors and icons” located on the blue sidebar.

Uncheck “use default icon.”

A drop zone will appear. To change the default icon, select a new icon from your computer files. Then, add the new icon to the drop zone.

Once your new icon has been uploaded, it’ll display on the “live preview.” This is what the new icon will look like on your website.

Change the Colors of the Widget

Now, let’s change the colors. Change the background, border, and text colors of the file uploader widget. Click on the colors next to each parameter, and a pop-up color box will appear. Select any color from the pop-up color box that you want!

Update the Widget

Click "update widget."

Once the widget has successfully updated, go back to your website and refresh. You can see now that the widget has been changed to your specifications.

Change the Size of the Widget

If you’re not happy with the size of the file uploader widget, you can also change that. Go back to your developer dashboard, and click “widget options" located on the blue sidebar.

Add the `data-width` and `data-height` parameters to your input code.

Below, we’ve changed the width to “50” and the height to "50." Specify any size that you want! 

That's it! We hope this helps you easily customize the file uploader widget to match your existing UI. Check out our video tutorial if you need more help. Feel free to contact us at any time with any questions or comments. Don’t forget, you can try Simple File Upload for free.

Latest Articles