Files Page Web Design Files Upload Page Web Design

If you have been designing web applications for any length of time, y'all would accept certainly come up across requirements where yous need to provide a multiple file upload feature.

This file upload characteristic can help the users upload a unmarried or multiple files at a time. The multiple files can exist few in number or in thousands. Furthermore, they can exist very large in size.

So, how do you pattern such a Multiple File Upload feature that will let users to upload thousands of large files in a unmarried 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 instance of Commonfloor website which allows users to listing their belongings for hire or sale.

While listing the property, Commonfloor allows users to upload multiple images of the holding to be rented out or sold. The user interface is designed to permit the users to select one file at a time.

Clicking the "Cull File" button of the first field displays the File Browser popup that you tin can employ to scan and select a file from your desktop.

In case of Commonfloor, you can select just one file at a fourth dimension in the File Browser popup and upload it. To upload some other file you take to apply the Choose File push button of the 2d field.

In contrast Gmail allows you to upload multiple files in a single go.

Once you accept hit the "Adhere files" icon while composing a new electronic mail in Gmail, you tin can see the same File Browser popup. Still, in this case you tin can select i or multiple files to upload and all of them will get uploaded at the same time.

This kind of an approach to brandish the File Browser popup and let the users select single or multiple files from the desktop is a very common user interface design.

Simply what if you want to blueprint a characteristic 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 volition not scale to upload such large number and sizes of files.

Designing Multiple File Upload Characteristic for Big Number and Sizes of Files

Now have a wait 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. Then information technology definitely needs a way to upload thousands of images in a single go.

To complicate matters Amazon does non upload all of these images on its own. There are thousands of suppliers who list their products on Amazon for auction and each supplier will obviously want to upload their own product images.

Some of these suppliers have hundreds of products to sell at the aforementioned time which means they would want to upload thousands of product images at a time in bulk.

Such Suppliers cannot mayhap keep on uploading the images 1 by i 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 permit its suppliers upload thousands of such files?

As I discussed in the previous article on designing majority data upload feature of a web awarding, Amazon lets its suppliers upload their product data in bulk using Excel templates which it calls equally 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 production images are located. The suppliers tin upload upto 10 images for each product that they upload.

Before hand, the suppliers have to upload the product images on their spider web server, become the URL of the product image and and then specify that URL in the template file.

The suppliers tin then upload the filled in templates back to Amazon. During this upload process, Amazon reads the template file and uploads the product information and then references the prototype URLs and picks upwards the images that are and so associated to the appropriate products.

Extending Amazon'southward Blueprint Further

The only drawback of Amazon's approach is that the images have to be uploaded to some web server that tin can be accessed publicly earlier you lot can upload them to Amazon.

Now, if yous practice not desire customers of your web awarding to upload files to a web server that can be accessed publicly and so yous can provide a dedicated upload location on your web server where your customers can identify their files using a FTP connection or something else.

You lot can and so pick up the files from that location and link them with the relevant data.

Furthermore, if you are not comfy with using Excel templates, you tin very well pattern a dedicated user interface that does the same job and make it available to the users. I had discussed one such design in the commodity on designing the bulk data upload feature.

Last Thoughts

A dedicated fashion of treatment upload of multiple files is very essential when yous want to provide such a feature to normal users. But what if the same feature is to exist provided to Organization Administrators?

System Administrators ordinarily accept total access to the web servers and databases. They can simply upload all the files in one go and link them properly with the relevant information.

Since the System Administrators tin can do this, I accept seen many web applications that simply ignore providing any kind of user interface to such users. The logic being is that such users anyways take total access to the spider web application and are technically competent to practise such tasks.

Yet, it is never a bad thought to recollect of the user feel of the dorsum-stop of your web application as well.

The blueprint arroyo that I take explained to a higher place for Multiple File Upload feature is just one mode of uploading files in bulk. I am certain you can come up with hundreds of other such designs.

Whatever design arroyo you cull to use in your web application will highly depend on the apply case y'all are dealing with. Then choose wisely!

Finally, if you lot liked this article, delight share it with your friends and family unit through social media. I will actually capeesh that.

silvaasse1957.blogspot.com

Source: https://webapphuddle.com/multiple-file-upload-feature-design/

Share this post