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. 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.
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. HTML5 is supposed to support multimedia content without any plug-ins or components. For upload functionality, new HTML5 APIs 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%) and obsolete Internet Explorer versions (11%).
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.
Java Applets are components running in a web browser. They are developed in the form of Java byte code. The applets are supported by most modern operating systems and browsers. Java applets have high performance similar to native installed software. Java applets are signed with security certificates to become trusted software, which allows automatic redistribution from a web site and installation on client computers.
Upload components can be implemented as Adobe Flash controls. Flash is a framework for running rich-media applications on the Internet. 24% of all web sites use Flash components, and the Flash player is installed on 99% of Internet-enabled PC’s. Flash is a cross-platform and a cross-browser technology that allows Flash upload components to work in various browsers, with the exception of mobile platforms.
Another type of upload components is Silverlight which is a Microsoft technology requiring a browser plug-in to be installed. In features it is very similar to Adobe Flash and it is supported by most modern browsers and operating systems. There are versions of Silverlight for Windows and Mac OS X, and there is also a version for Linux called Moonlight. Silverlight is one of the basic technologies used for Windows Phone applications development.
HTML5 is a new HTML standard developed to add multimedia support to HTML. It is supported on Windows, Mac OS X, Linux, iOS, Android, and Windows Phone. Since the format is still under development and some of the features employed for uploading files are still not part of the standard, HTML5 upload components are not common at the moment. Their support is restricted to a subset of browsers.
HTML5 support has been steadily improving. The best coverage of HTML5 features is provided by the latest version of Chrome, Firefox, Safari and Opera. Internet Explorer provides the least support. Internet Explorer 10 has less support than versions of other browsers; however the coverage will be twice as good as Internet Explorer 9.
iOS 5 has a sufficiently high level of HTML5 support; however, its level of support remains lower than for desktop browsers.
Windows Phone 7.5 "Mango" has slight support for HTML5, which makes it comparable to desktop Internet Explorer 9’s lack of support for the standard.
The latest Android 5.0 supports many more HTML5 features than Windows Phone, but less than iOS.
Mobile browsers’ HTML5 support remains a work in progress.
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).
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.
IPTC fields contain more specific data relating to authorship of an image. 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.
