Are you interested in creating a job board that lets your users upload multiple files? Or, a photo gallery with multiple images? In this article, we'll teach you how to upload multiple files at once with Simple File Upload.
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.
.png)
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.
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.
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!
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!
The other available widget options include:
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 “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 was helpful to learn how to upload multiple files at once with Simple File Upload! 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!
