If you have been designing web applications for any length of time, you would have certainly come across requirements where you need to provide a multiple file upload feature.
This file upload feature can help the users upload a single or multiple files at a time. The multiple files can be few in number or in thousands. Furthermore, they can be very large in size.
So, how do you design such a Multiple File Upload feature that will let users to upload thousands of large files in a single go?
Designing Multiple File Upload Feature for Few Files
Today, the user interface to upload a single or multiple files is pretty much standard across all the web applications.
Take the case of Commonfloor website which allows users to list their property for rent or sale.
While listing the property, Commonfloor allows users to upload multiple images of the property to be rented out or sold. The user interface is designed to allow the users to select one file at a time.
Clicking the “Choose File” button of the first field displays the File Browser popup that you can use to browse and select a file from your desktop.
In case of Commonfloor, you can select just one file at a time in the File Browser popup and upload it. To upload another file you have to use the Choose File button of the second field.
In contrast Gmail allows you to upload multiple files in a single go.
Once you have hit the “Attach files” icon while composing a new email in Gmail, you can see the same File Browser popup. However, in this case you can select one or multiple files to upload and all of them will get uploaded at the same time.
This kind of an approach to display the File Browser popup and let the users select single or multiple files from the desktop is a very common user interface design.
But what if you want to design a feature which lets the users upload thousands of files at a single time? What if the files to be uploaded are large in size, like in GBs instead of MBs?
The designs discussed above will not scale to upload such large number and sizes of files.
Designing Multiple File Upload Feature for Large Number and Sizes of Files
Now take a look at Amazon.
Every product that is sold on Amazon has multiple images and Amazon sells thousands of such products. That means Amazon has to upload thousands of images and link them with different products.
Amazon certainly cannot upload the images using the above File Browser user interface. So it definitely needs a way to upload thousands of images in a single go.
To complicate matters Amazon does not upload all of these images on its own. There are thousands of suppliers who list their products on Amazon for sale and each supplier will obviously want to upload their own product images.
Some of these suppliers have hundreds of products to sell at the same time which means they would want to upload thousands of product images at a time in bulk.
Such Suppliers cannot possibly keep on uploading the images one by one or keep on sending these images to Amazon for uploading them every time. Also, Amazon too cannot handle such requests from thousands of their suppliers from across the world.
So now how does Amazon let its suppliers upload thousands of such files?
As I discussed in the previous article on designing bulk data upload feature of a web application, Amazon lets its suppliers upload their product data in bulk using Excel templates which it calls as Inventory File Templates.
In these templates, the suppliers can specify details of their products. Then there is a section where the suppliers can the list the URL where the product images are located. The suppliers can upload upto 10 images for each product that they upload.
Before hand, the suppliers have to upload the product images on their web server, get the URL of the product image and then specify that URL in the template file.
The suppliers can then upload the filled in templates back to Amazon. During this upload process, Amazon reads the template file and uploads the product data and then references the image URLs and picks up the images that are then associated to the appropriate products.
Extending Amazon’s Design Further
The only drawback of Amazon’s approach is that the images have to be uploaded to some web server that can be accessed publicly before you can upload them to Amazon.
Now, if you do not want customers of your web application to upload files to a web server that can be accessed publicly then you can provide a dedicated upload location on your web server where your customers can place their files using a FTP connection or something else.
You can then pick up the files from that location and link them with the relevant data.
Furthermore, if you are not comfortable with using Excel templates, you can very well design a dedicated user interface that does the same job and make it available to the users. I had discussed one such design in the article on designing the bulk data upload feature.
Final Thoughts
A dedicated way of handling upload of multiple files is very essential when you want to provide such a feature to normal users. But what if the same feature is to be provided to System Administrators?
System Administrators usually have full access to the web servers and databases. They can simply upload all the files in one go and link them properly with the relevant data.
Since the System Administrators can do this, I have seen many web applications that simply ignore providing any kind of user interface to such users. The logic being is that such users anyways have full access to the web application and are technically competent to do such tasks.
However, it is never a bad idea to think of the user experience of the back-end of your web application as well.
The design approach that I have explained above for Multiple File Upload feature is just one way of uploading files in bulk. I am sure you can come up with hundreds of other such designs.
Whatever design approach you choose to use in your web application will highly depend on the use case you are dealing with. So choose wisely!
Finally, if you liked this article, please share it with your friends and family through social media. I will really appreciate that.
