HTML5 mean concise and complete

##Web Application's Browser based File Upload Architecture

Web Application run on everywhere with Web Browser installed. There is two way to allows file upload in Web Browser, First is using external third-party plugin on Browser such as Flash, Java Applet, SilverLight, etc. Second is using the HTML Elements supported by Web Browser natively.

###Plugin based Flash, SilverLight or Java Applet require user's to install proprietary runtime and user will required to allow the runtime to execute due to security concern and based on trust of the web domain/

For example, in Redmine software, the image uploading are using Java Applet, mostly unable to use the function in certain browser, even we clicking allows to run the Java in the browser.

Another file upload in Redmine, using Javascript and Server backend controller to handle the file uplad

###HTML Forms HTML form support file input elements to support select user's file on their device with the Operation Systems's Open File Dialog. HTML form method has it own merit in these day, first, it does not require end-user to download and install any third-party plugin to support file upload such as Flash, SilverLight, etc. Furthermore, with current new version of HTML5 Specification, Web Application are now with modern appearance and ituitive user interface surpasses Flash and Silverlight.

HTML Specification define multipart/form-data of Form content types. Thus allows the File Input Element of HTML Form to prepare a HTTP POST request with user-selected files and additional data and sends it to the server page/controller specified in its settings, once the user decided to upload the file. This page/controller receives and processes the request and performs any other upload-related actions. Progress bar with estimated remaining upload time is shown during the upload process; users always know the upload time, and they can always stop the upload if it takes too long. Additionally, HTML5 Uploader is able to apply automatic client-side data optimization before sending it. For instance, it can resize images and compress files to ZIP archives. This way the add-on reduces traffic, uploading time, and server disk amount used to store your data.

The figure below demonstrates HTML5/Flash Uploader architecture: http://www.aurigma.com/docs/us8/FH_Architecture.png

##How does it work in Client Side: On the client-side, HTML File Uploader always enhanced with Javascript functions to display user-friendly notification such as file upload progress status, calculate checksum of the file selected by users.

##How Does It Work Server-Side?

Since HTML5 Fle Uploader sends files and data in HTTP POST request, the server-side part is represented with a web server which hosts your application. This server performs all the upload-related tasks, such as receiving and saving uploaded files to necessary folders, updating a database, sending email notifications, and etc. In a word, this part implements the internal logic of web application which uses HTML5 File Uploader.

When developing this part you may implement your own upload script which will parse the POST request received from HTML5 File Uploader. In this case you can use any server platform which is able to receive HTTP POST request.

##Client Side Technical Implementation Choice To verify the Integrity of File Uploaded, other than the HTML Form Element that natively support the file upload. On the client-side, we require some scripting language to implemented Hash-based verification. By using HTML5 File API in javascript, we can get the file contents with the file hash and sending both the file and file hash to the Server for verification.

HTML and Javascript Specification (With HTML5 FILE API to processing selected file Hash)
Javascript Library For File Upload (Straightforward integration, with/without Javascript Library support HTML5 File API)
Java Applet, Flash

###1. HTML and Javascript Specification

Using the primitive API supported on Browser based on HTML and Javascript specification. Potential require reading Web Browser's Specification if any Javasript API not supported by specific Browser such as Internet Explorer. Using popular Open Source Javascript Library such as jQuery-File-Upload, tus.io, etc, mostly already supported and tested on all Browser at sometimes in the project development cycle.

Additionally, to support file processing in Browser, we require to use HTML5 File API which is supported on Firefox 4+, Chrome 11+, Safari 6+ and Internet Explorer 10+. In short to support File Integrity check with Javascript, we only able to support it from Internet Explorer 10, which might be acceptable, as Microsoft had dropped support for Internet Explorer 9.

Potential example of the API is using FormData or XMLHttpRequest from All code example from Mozilla are under MIT or Public Domain. Long Live the Web.

var form = document.forms.namedItem("fileinfo");
form.addEventListener('submit', function(ev) {

  var oOutput = document.querySelector("div"),
      oData = new FormData(form);

  oData.append("CustomField", "This is some extra data");
  //Send for Server Verification
  oData.append("FileHash", filehash);
  var oReq = new XMLHttpRequest();
  oReq.open("POST", "stash.php", true);
  oReq.onload = function(oEvent) {
    if (oReq.status == 200) {
      oOutput.innerHTML = "Uploaded!";
    } else {
      oOutput.innerHTML = "Error " + oReq.status + " occurred when trying to upload your file.
";
    }
  };

  oReq.send(oData);
  ev.preventDefault();
}, false);

###2. Javascript Library for File Upload

With Open Source project's mature codebase, the Javascript Library has tendency to supported around most of the use case, and provide straightforward integration examples for usual scenario. Most of the library also include extensible consideration in the Project design.

Furthermore, Popular Javascript such as jQuery-File-Upload, tus.io, flow.js have supported custom backend, as long as it adhered to their designated specification. Most of Javascript file upload would be just simply follow the spefication defined in HTTP Protocol for Form Data.

Additionally, to support file processing in Browser, we require to use HTML5 File API which is supported on on Firefox 4+, Chrome 11+, Safari 6+ and Internet Explorer 10+. Some of the File Upload Javascript Library such as resumable.js and flow.js

Most of the Javascript Library are licensed in Academic License such as MIT and BSD.

###3. Java Applet or Flash For example on http://www.jfileupload.com/products/jfileupload/documentation/software.html, jFileUpload rely on Java Applet to verify the checksum of the file before uploaded to the server side components of the library.

####File Integrity Verification #####1. Javascript Implementation (HTML5 Browser only such as IE10 above)

If the file required to upload are larger than 10mb, consider using fast implementation of cryptographic algorithms such as js-spark-md5 https://code.google.com/archive/p/crypto-js/ https://github.com/satazor/js-spark-md5

Form input field


var filehash;
document.getElementById('file').addEventListener('change', function () {
    var blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice,
        file = this.files[0],
        chunkSize = 2097152,                             // Read in chunks of 2MB
        chunks = Math.ceil(file.size / chunkSize),
        currentChunk = 0,
        spark = new SparkMD5.ArrayBuffer(),
        fileReader = new FileReader();

    fileReader.onload = function (e) {
        console.log('read chunk nr', currentChunk + 1, 'of', chunks);
        spark.append(e.target.result);                   // Append array buffer
        currentChunk++;

        if (currentChunk < chunks) {
            loadNext();
        } else {
            console.log('finished loading');
            
            //Assign the computed hash to variable 
            filehash = spark.end();
            console.info('computed hash', filehash);  // Compute hash
        }
    };

    fileReader.onerror = function () {
        console.warn('oops, something went wrong.');
    };

    function loadNext() {
        var start = currentChunk * chunkSize,
            end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize;

        fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
    }

    loadNext();
});

The advantages of using Javascript implementation is supported on most of the latest version of SmartPhone.

#####2. Browser Plugins By using Flash and Java Applet

##Java Server Side Technical Implementation Choice On Server side, the Server will parse the HTTP request and received uploaded file and the form data with the hash signature of the file. Server side would required to performs all upload-related tasks, such as verify the file integrity before proceed to stored the file.

Apache Commons's FileUpload package
Servlet 3.0 (Spring Framework integrate with 3.0 seamlessly)

###1. Apache Commons's FileUpload package From Apache Commons website, Apache Commons's FileUpload package makes it easy to add robust, high-performance, file upload capability to your servlets and web applications.

https://commons.apache.org/proper/commons-fileupload/using.html

###2. Servlet 3.0 Most of the Modern Java Server such as Jetty, Tomcat, etc provide support Servlet which extends the functionality of Java Server. Servlet 3.0 only supported by Tomcat 7 and above.

Java Servlet 3.0 containers supported the File Upload with simplify API, which in MultipartConfigElement class. To integrate with Spring Framework, Spring framework must register the beans in the framework.

It support the client-side implementation of HTML form using FormData that defined in multipart/form-data or XHR call for multipart/form-data.

https://spring.io/guides/gs/uploading-files/

##Conclusion In short, if we required verify the file integrity of the uploaded file without knowing the uploaded file's signature hash by mandating the user to uploaded the md5,sha256 file etc.

For the client-side, we are limited to support only IE 10 or above. Regardless of the coding our own file upload and file integrity verification, or using available Javascript Library.

Otherwise, we required to use Java Applet, or Flash which might be non so user friendly to the user. Furthermore, Flash and Java Applet are not supported by either of Android or IOS.

For the server-side, we are free to decide such as Apache Commons's FileUpload package or Servlet 3.0 API to choose from. If depending another packages like Apache Commons is a pain, we can opt for Servlet 3.0. But the server that we deploy on, must support Servlet 3.0 API such as Tomcat 7 and above.

edwardchanjw/HTML5FileUpload.md