Upload Multiple Files at Once with Simple File Upload

Posted by:
Caitlin Fithian
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? In this article, we'll teach you how to upload multiple files at once with Simple File Upload. Let's get started!

Why does my web app need a multi uploader?

Web apps allow users to upload multiple files at once for several key reasons designed to enhance and streamline the user experience. Check out our favorite reasons to add a multi uploader to your web app today.

Efficiency and Time-Saving. Uploading multiple files in one go saves users from the repetitive, time-consuming task of selecting and uploading each file individually. This feature is a real time-saver for users, especially for those dealing with large numbers of files.

Enhanced User Experience. Imagine the ease and convenience of dragging and dropping an entire folder into the upload area, rather than picking files one by one. This not only makes the process faster but also more user-friendly. Users appreciate this kind of efficiency, leading to a more positive experience on the website.

Better File Management. By allowing multi uploads, websites enable users to organize and send files in batches. This is particularly helpful for projects where files are related, such as photo albums, document portfolios, or music collections.

Increased Productivity. For businesses and educational platforms, this feature can significantly boost productivity. Users can upload entire sets of documents or resources in one action, making it easier to manage and distribute content. It's like having a fast-forward button for your workload!

Reduced Server Load. Surprisingly, allowing multiple file uploads can be more efficient for the server as well. Handling a batch of files in one session can be less taxing than processing numerous individual uploads. It's a win-win for both the user and the website's backend.

Encourages Content Sharing. When it's easy to upload multiple files, users are more likely to share rich content, like photo galleries or complete document sets. This not only enhances the content on the website but also encourages user interaction and engagement.

Let Your User's Upload Multiple Files at Once with Simple File Upload (and improve your user experience)

Simple File Upload is a developer-friendly tool that simplifies the complex process of creating a file uploader and setting up cloud storage.  It's the ultimate solution for effortlessly adding multiple file uploads to your web app while enhancing your app's functionality and user experience.

Keep reading to learn how to add Simple File Upload to your web app in four easy steps.

Step 1: Select Multiple or Single File Uploads

Log into your Simple File Upload account.

Click "Quick Start." 

Click "Create new uploader."

Select "Multiple Files." The multiple file uploader will appear as a button that opens a popup modal.

Select whether you want your users to upload multiple files or single files

Step 2: Select the Accepted File Types

Choose the max file size you want your users to be allowed to upload.

Select what types of files you’d like your multi uploader to accept.

Select the Accepted File Type

Step 3: Add Your File Details

Select if you want to bulk resize images before upload. If so, input the resize width and height.

This option is helpful if you want to store all uploaded images at a specific size. It can help save cloud storage space and money.

Add your file details

Step 4: Add Your Multi Uploader to Your Web App

View a preview of your multi uploader. Remember, the multiple file uploader will appear as a button that opens a popup modal.

If you don't like the style of the button or modal, don't worry! We'll show you to customize the style later in this article.

Preview the multi uploader button

Click on the "Add Files" button to view the multi uploader.

Preview the multi uploader pop up modal

Exit the multi uploader preview.

Click "Create Uploader." All set!

Add the Javascript snippet to the 'head' of your web app.

Finally, add the input tag to your app where you want your multi uploader to appear.

Add your file uploader to your web app

This is cool, but it gets better. There are several configuration options that you can add to the multiple file uploads input tag to further customize your multi uploader. 

Customize Your Multi Uploader (and give your users the features that they want)

Streamline File Selection: Let Your Users Delete Unwanted Files Before Uploading

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

Change the multi uploader to remove files before upload

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

Uploading multiple files with option to remove files

Set Upload Limits: Select How Many Files Your Users can Upload at Once

Change the maximum number of files your users can upload at one time. The multiple file uploader 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! 

Specify the max number of files

Personalize Your User Interface: Modify the Text on Your Upload Button

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

Change the upload text button

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

Complete Customization: Other Options to Enhance Your Multi Uploader

The other available options include: 

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

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

All multi uploader options

Styling Made Simple: Customize the CSS of Your Multi Uploader

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. 

Change the CSS on the upload button

If you need more help customizing the multi uploader, view our video tutorial for step-by-step instructions. Check out our full documentation here.

Improve Your User Experience with Multiple File Uploads

The ability to upload multiple files at once is a feature built for convenience, efficiency, and an elevated user experience. It's an easy way to make file uploading simple and hassle-free for your users.

Ready to get started? Save your users time and effort today with Simple File Upload. Don’t forget, you can try Simple File Upload for free!

Get Started With Simple File Upload.

Easy Uploads. Effortless Integration.

Start Uploading for Free