Upload components

Last updated

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.

Contents

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:

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.

TechnologyBrowsersOSMobile OSClient software requirements
Java AppletsInternet Explorer, Firefox, Chrome, Safari, OperaWindows, Mac OS X, LinuxNo supportJava Machine
Flash controlsInternet Explorer, Firefox, Chrome, Safari, OperaWindows, Mac OS X, LinuxNo supportFlash Player
Silverlight Controls

Microsoft technologies are preferable

Internet Explorer, Firefox, Chrome, Safari, OperaWindows, Mac OS X, Linux (Moonlight)No supportSilverlight plug-in
HTML5 controlsChrome, Firefox, Opera, Safari, Internet Explorer,

Limited support

Windows, Mac OS X, LinuxiOS, Android, Windows Phone 7,

Limited support

HTML5 compatible web browser
ActiveX controlsInternet ExplorerWindowsno supportInternet Explorer

Java

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.

Flash

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, [7] and the Flash player is installed on 99% of Internet-enabled PC's. [8] 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.

Silverlight

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

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.

Desktop browsers HTML5 support

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.[ clarification needed ]

Mobile platforms HTML5 support

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. [9] [10]

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.[ clarification needed ] 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.[ clarification needed ]
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.

Related Research Articles

<span class="mw-page-title-main">HTML</span> HyperText Markup Language

The HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It defines the content and structure of web content. It is often assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.

<span class="mw-page-title-main">Java applet</span> Small application written in Java

Java applets were small applications written in the Java programming language, or another programming language that compiles to Java bytecode, and delivered to users in the form of Java bytecode. The user launched the Java applet from a web page, and the applet was then executed within a Java virtual machine (JVM) in a process separate from the web browser itself. A Java applet could appear in a frame of the web page, a new application window, a program from Sun called appletviewer, or a stand-alone tool for testing applets.

An HTML element is a type of HTML document component, one of several types of HTML nodes. The first used version of HTML was written by Tim Berners-Lee in 1993 and there have since been many versions of HTML. The current de facto standard is governed by the industry group WHATWG and is known as the HTML Living Standard.

A query string is a part of a uniform resource locator (URL) that assigns values to specified parameters. A query string commonly includes fields added to a base URL by a Web browser or other client application, for example as part of an HTML document, choosing the appearance of a page, or jumping to positions in multimedia content.

A Rich Internet Application is a web application that has many of the characteristics of desktop application software. The concept is closely related to a single-page application, and may allow the user interactive features such as drag and drop, background menu, WYSIWYG editing, etc. The concept was first introduced in 2002 by Macromedia to describe Macromedia Flash MX product. Throughout the 2000-s, the term was generalized to describe browser-based applications developed with other competing browser plugin technologies including Java applets, Microsoft Silverlight.

In the context of a web browser, a frame is a part of a web page or browser window which displays content independent of its container, with the ability to load content independently. The HTML or media elements in a frame may come from a web site distinct from the site providing the enclosing content. This practice, known as framing, is today often regarded as a violation of same-origin policy.

Push technology, also known as server push, refers to a method of communication on the Internet where the initial request for a transaction is initiated by the server, rather than the client. This approach is different from the more commonly known "pull" method, where information transmission is requested by the receiver or client.

In computing, Java Web Start is a deprecated framework developed by Sun Microsystems that allows users to start application software for the Java Platform directly from the Internet using a web browser. The technology enables seamless version updating for globally distributed applications and greater control of memory allocation to the Java virtual machine.

An image hosting service allows individuals to upload images to an Internet website. The image host will then store the image onto its server, and show the individual different types of code to allow others to view that image. Some examples are Flickr, Imgur, and Photobucket.

The Extensible Metadata Platform (XMP) is an ISO standard, originally created by Adobe Systems Inc., for the creation, processing and interchange of standardized and custom metadata for digital documents and data sets.

In HTML, div and span tags are elements used to define parts of a document, so that they are identifiable when a unique classification is necessary. Where other HTML elements such as p (paragraph), em (emphasis), and so on, accurately represent the semantics of the content, the additional use of span and div tags leads to better accessibility for readers and easier maintainability for authors. Where no existing HTML element is applicable, span and div can valuably represent parts of a document so that HTML attributes such as class, id, lang, or dir can be applied.

A webform, web form or HTML form on a web page allows a user to enter data that is sent to a server for processing. Forms can resemble paper or database forms because web users fill out the forms using checkboxes, radio buttons, or text fields. For example, forms can be used to enter shipping or credit card data to order a product, or can be used to retrieve search results from a search engine.

<span class="mw-page-title-main">Twango</span>

Twango was an online media sharing site that supported multiple file types such as photos, video, audio, and documents. Founded in 2004 by Jim Laurel, Philip Carmichael, Randy Kerr, Serena Glover and Michael Laurel in Redmond, Washington, it provided users a means of repurposing their media, including sharing, editing, organizing and categorizing. In addition, Twango saved all the original media and its metadata. Non-members were free to browse the site, however only members could upload media to the site. Sign up for a basic account was free, and provided 250 megabytes of upload bandwidth a month.

<span class="mw-page-title-main">HTML5</span> Fifth and current version of hypertext markup language

HTML5 is a markup language used for structuring and presenting content on the World Wide Web. It is the fifth and final major HTML version that is a World Wide Web Consortium (W3C) recommendation. The current specification is known as the HTML Living Standard. It is maintained by the Web Hypertext Application Technology Working Group (WHATWG), a consortium of the major browser vendors.

CrushFTP is a proprietary multi-protocol, multi-platform file transfer server originally developed in 1999. CrushFTP is shareware with a tiered pricing model. It is targeted at home users on up to enterprise users.

In HTML, a file-select control is a component of a web form with which a user can select a local file. When the form is submitted, the file is uploaded to the web server. There, when the file arrives, some action usually takes place, such as saving the file on the web server. However, the particular action that takes place is determined by the server-side script to which the form is submitted.

<span class="mw-page-title-main">FastPictureViewer</span>

FastPictureViewer is a freemium image viewer for Windows XP and later. Its aim is to facilitate quick review, rating and annotation of large quantities of digital images in the early steps of the digital workflow, with an emphasis on simplicity and speed. As an app with a freemium license, a basic version is available cost-free for personal, non-profit or educational uses, while a commercial license is required for the professional version with additional features. The basic version starts as a full version trial.

The HTML5 specification introduced the video element for the purpose of playing videos, partially replacing the object element. HTML5 video is intended by its creators to become the new standard way to show video on the web, instead of the previous de facto standard of using the proprietary Adobe Flash plugin, though early adoption was hampered by lack of agreement as to which video coding formats and audio coding formats should be supported in web browsers. As of 2020, HTML5 video is the only widely supported video playback technology in modern browsers, with the Flash plugin being phased out.

Content Security Policy (CSP) is a computer security standard introduced to prevent cross-site scripting (XSS), clickjacking and other code injection attacks resulting from execution of malicious content in the trusted web page context. It is a Candidate Recommendation of the W3C working group on Web Application Security, widely supported by modern web browsers. CSP provides a standard method for website owners to declare approved origins of content that browsers should be allowed to load on that website—covered types are JavaScript, CSS, HTML frames, web workers, fonts, images, embeddable objects such as Java applets, ActiveX, audio and video files, and other HTML5 features.

Front-end web development is the development of the graphical user interface of a website, through the use of HTML, CSS, and JavaScript, so that users can view and interact with that website.

References

  1. Nebel, E.; Masinter, L. (1995). "RFC 1867 Form-based File Upload in HTML". doi:10.17487/RFC1867.{{cite journal}}: Cite journal requires |journal= (help)
  2. "HTML Forms and Input".
  3. "W3C HTML5 Working Draft".
  4. "W3C HTML5 API Specifications".
  5. "W3C OS Statistics".
  6. "W3C Browser Statistics".
  7. "W3C Web Technology Surveys. Usage of Flash for websites".
  8. "Adobe Flash Statistics. PC Penetration".
  9. "HTML5 Support Statistics".
  10. "BrowserScope HTML5 support statistics".
  11. "Exif specification". Archived from the original on 2020-11-27. Retrieved 2012-06-15.
  12. "IPTC Specification". Archived from the original on 2012-06-16. Retrieved 2012-06-15.