Upload components are software products that are designed to be embedded into a web site to add upload functionality to it. Upload components are designed to replace the standard HTML4 upload mechanism. Compared with HTML4, Upload Components have a more user-friendly interface and support a wider range of features.

HTML file uploads

The HTML4 standard supports requesting data to be requested from a client computer and uploaded to a server. The standard mechanism for this type of data transmission is HTML forms.^[1][2] With HTML forms a user's files can be uploaded by employing <input/> tag with different attributes. This method allows web site developers to implement basic upload functionality. However, it has the following disadvantages:

• Multiple files upload is not available – a user can upload only 1 file a time.
• Limited upload size - it is usually impossible to send files up to dozens of megabytes (MB) via HTTP.
• No optimization before uploading files is available.
• Poor visualization – a user cannot see any information about the upload progress and estimated upload time.
• Preview of selected files is not supported.
• Awkward look and feel – the way a user selects files for upload is inconvenient.

HTML upload alternatives

Upload components allow for bypassing the HTML upload restrictions and disadvantages noted previously. An upload component is a plug-in which allows uploading files from a client to a server. Usually upload components are developed by third party companies and can be integrated with any website on any platform. The user's Web browser will display the embedded upload component as a part of the web page. Upload components can be built with various technologies: Flash, Silverlight, Java, ActiveX, and HTML5.

The W3C community is in the process of developing a HTML5 standard, the full specification of which is expected by 2014.^[3] HTML5 is supposed to support multimedia content without any plug-ins or components. For upload functionality, new HTML5 APIs^[4] offer a wide variety of new features, including access to the client's file system and dynamic request-generating and processing of images.

The new HTML5 features could be a good basis for implementing upload components with a sophisticated user interface and the ability to upload any amount of data. Unfortunately, at the moment browsers support those features partially and differently, which is a serious obstacle. The situation becomes worse if we remember that large numbers of users still use Windows XP (28%)^[5] and obsolete Internet Explorer versions (11%).^[6]

Technologies for creating upload components

Upload components can be developed on the basis of various technologies aimed at extending browser functionality. Depending on the technology and its features, upload components can support more or less functionality, be more or less configurable, and be easier to use.

Features which are not possible with standard HTML4 upload

Upload components bring additional features and a user experience that cannot be provided by pure HTML4.

Progress bar

Progress bars are used to inform users about upload progress details. Upload components support progress bars displaying such parameters as file names, file sizes, upload speed, etc.

Multiple files and folder upload

Some websites require support for uploading multiple files at once. This feature is extremely important for upload components on social networks, photo galleries, file sharing, etc. The standard HTML4 approach is cumbersome. Upload components support multiple file uploads in a more flexible fashion, for example by allowing a simpler selection of files to be uploaded simultaneously from several folders.

Huge files upload

Uploading a huge amount of data is always a problem, as the request size can be too large for the upload process to successfully complete, possibly because of slow or unstable Internet connections. On the server side there can be restrictions applied to the maximum size of HTTP requests. Upload components have to find a balance between the client’s needs on one hand and server and channel resources and restrictions on the other. In the case of delivering huge files to server components a so-called "chunk upload" divides a file into several parts (chunks) before the upload process starts. Each chunk is sent in response to a single request; after all chunks arrive at a server the original file is reassembled.

Fail-safe upload

During an upload process some unexpected problems or malfunctions can occur, leading to upload failure and file corruption. To address these problems upload components have fail-safe mechanisms sporting features such as automatic resumption of the upload process, sending files individually in a single package, and chunk uploads.

Sending additional data along with files

Sometimes it is useful to send additional data along with a file, such as informational descriptions or Exif/IPTC fields, or Hash sums to identify whether a file was corrupted or damaged during the upload process.

Concurrent upload

Upload components can have a concurrent upload feature – sending upload packages in multiple threads. In some cases the upload process benefits by increasing overall upload speed, decreasing upload time, and using computer resources in a more effective way.

Instant upload

This approach allows the upload of files to start right after they are added to an upload queue.

Upload to cloud storage

Upload components can upload files to cloud storage.

Drag-n-Drop

Drag-n-Drop is a form of user-program graphical interface interaction which involves selecting one object and dragging it onto another object. Drag-n-Drop is widespread as it helps to increase program usability.

Customizable Appearance

Upload components support customizing the components' appearance to fit into a web site design through such configurations as font styles, sizes, colors, or view modes among others.

Localization

Once an upload component enters the international market, it needs support translating the interface's text labels and messages to other languages. Usually upload components have configurable support for the most widely used languages. The user interface can also be multilingual. For some languages such as Hebrew the localization process contains not only translation, but switching to right-to-left look and feel.

Client-side files validations

To save server-side resources upload components can apply client-side validation to files selected for upload in several groups: file types (which can be selectively defined or barred by the developer), file size (which can be set to minimum/maximum allowed sizes), and image size (which can have minimum/maximum sizes configured among other parameters).

Image upload

Upload components are used for uploading images, so there are components that have additional features for image pre-upload processing.

Resize

Photos taken with modern digital cameras are high resolution, but most websites need the images resized to conserve bandwidth. Upload components allow images to be automatically resized and uploaded, with or without the original file, or a thumbnail copy for use as an avatar, etc.

Rotate

Image rotation is a very important feature for websites giving users basic image editing abilities. Images are either automatically rotated (based on Exif data) or the user is allowed to manually rotate the image.

Crop

Crop allows users to select an image portion that should be stored somewhere or printed. Crop involves removing the image’s outer parts in order to highlight some object on an image or change the aspect ratio.

Watermarks

A watermark is a text message, or image put over an original image, and is used to protect intellectual property or specify important information, such as date when the image was taken, text comments, or copyright. Upload components can include a feature to add watermarks to all uploaded images.

Exif/IPTC metadata

Images can contain metadata in various formats, e.g. Exif or IPTC.

Exif fields include information from the device that captured the image file: camera parameters, date and place where an image was taken, exposure, lens parameters, GPS data, and others.^[11]

IPTC fields contain more specific data relating to authorship of an image.^[12] It is extremely important for upload components to preserve original image metadata in the upload process.

Quality Meter

Quality meter is a visual indicator showing image quality (dpi, width, height) and it helps a user to decide whether an image is good enough to use. An example of quality meter usage can be a photo printing web site with a built-in upload component that notifies users if an image resolution is not right for it to be printed in a selected format.

References