Multiple File Uploads with Simple File Upload: Easy How-To Guide

Posted by:
Caitlin Fithian
on
October 15, 2022

Are you interested in creating a job board that lets your users upload multiple files? Or, a photo gallery with multiple images? It’s easy to add multiple file uploads to your web app with Simple File Upload. 

Change the Widget to Accept Multiple File Uploads

Out of the box, Simple File Upload renders as a single file uploader widget. But, you can change it to accept multiple files with a single line of code. Simply add `data-multiple = “true”` to your input tag. Save and refresh the page.

This replaces the single file uploader widget with a button that says “Add Files.” 

Click the button, and a modal will pop up, allowing your users to drag and drop multiple files. The “Add” button, which adds the files to the widget, will not be clickable until all the files have been uploaded.

This is cool, but it gets better. There are many configuration options that you can add to the multiple file uploads input tag. 

Remove Files Before Upload

Give your users the option to remove files before uploading them to the widget. Add `data-remove-links = “true”` to your input tag. Save and refresh the page.

Now, your users have the option to remove files before they click “Add” to the widget. 

Specify the Max Number of Files

Change the maximum number of files your users can upload at one time. The multiple file uploader widget defaults to 20 files. If you'd like to change this,  add `data-max-files = “35”`. Save and refresh. This will allow your users to upload up to 35 files at a time. Select any number up to 50! 

Change the Upload Button Text

Easily change the button text from “Add Files” by adding `data-button-text = “Add Images”`. Save and refresh the page. 

Now, the button reads “Add Images." Change the text to anything you want!

Other Multiple File Uploader Widget Options

The other available widget options include: 

  • Setting the max file size that your users can upload.
  • Limiting the type of files accepted by the widget.
  • Adding tags to uploaded files.

These are the same options available for our single file uploader widget. Check out the table below for all your options. 

Change the CSS on the Upload Button

Change the CSS on the “Add Files” button by listening to the Javascript event and replacing the CSS with your own. Remove the classes `btn` and `btn-primary` and add your own classes. 

Check it out in our documentation here

We hope this helps you add multiple file uploads to your web app quickly and easily! 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