Html. 5 File Upload with Progress On Matlus. Html. 5 finally solves an age old problem of being able to upload files while also showing the upload progress. Today most websites use Flash Player to achieve this functionality. Some websites continue to use the Html lt form with enctypemultipartform data, but with modification on the server side to enable showing users the upload progress. Essentially, what you need to do is hook into the servers byte stream while it is receiving a file so you know how many bytes youve received and somehow convey that information back to the client browser, while it is still in the process of uploading the file. This solution works extremely well and is not fraught with the issues Flash Player causes especially for large files. However it is fairly complicated and not for the faint of heart because you are essentially taking over the entire server side processing when you tap into the byte stream and that includes implementing the multipartform data protocol on the server side, along with a bunch of other things. Uploading files using Html. The XMLHttp. Request object has gotten a facelift in the Html. Specifically the XMLHttp. Request Level 2 specification currently the latest version that has included the following new features Handling of byte streams such as File, Blob and Form. Data objects for uploading and downloading Progress events during uploading and downloading Cross origin requests Allow making anonymous request that is not send HTTP Referer The ability to set a Timeout for the Request In this post well look more closely at 1 and 2. In particular, uploading of files using XMLHttp. I have been struggling to upload files from WebView since last few days and there is no progress. I googled and implemented all suggested solutions but. Online file sharing and storage 15 GB free web space. Easy registration. File upload progressor. Multiple file transfer. Fast download. Request and providing upload progress information to the end user. Note that this solution does not require any change to the server side, at least insofar as handling the multipartform data protocol. So existing server side logic should remain unchanged, which makes adapting this technology that much easier. Figure 1 Showing the File Upload screen Upload just started. Figure 2 Showing the File Upload screen with upload completed. Notice in the images above the following pieces of information made available to the user Information on the file that has been selected such as File Name File Size Mime Type A Progress bar with percent complete The upload speed or upload bandwidth The approximate time remaining The bytes uploaded thus far A response from the server side the organge box Item 6 above may not sound important, but in fact is quite important in this context because, remember that the user is not navigating away from this page as she normally would after submitting an html form. Because were using XMLHttp. Request, the uploading is happening in the background. The page the user is on remains intact. Which is a nice feature to have if your business process can work with it. Html. 5 Progress Event. Theres a new version of this plugin with HTML5 support, file size validation and more Checkout the new jQuery File Upload Plugin now and fork us on Github. As per the Html. 5 Progress Events spec, the Html. Total bytes being transferred loaded Bytes uploaded thus far length. Computable Specifies if the total size of the datafile being uploaded is known You should notice that we need to use these two pieces of information to calculate figure out all of the other information were displaying to the user. Depending on the web hosting company you choose and the package you select, each of you will see maximum file upload limit on your Media Uploader page in WordPress. Once you have geocoded the digital camera photos, you can create Google Maps, export KML or KMZ files to Google Earth, upload geotagged photos to Flickr, export ESRI. It is fairly simple to figure out all of the other information given the above two pieces of information but it does involve quite a bit of extra coding and setting up a timer. Html. 5 Progress Event What it should have been. Considering that those who go down the route of providing upload progress information to the end user will require to show all of the other information to the end user as well, the Html. Progress Event specifications should have accounted for this need as well, as it would be fairly simple for browser vendors to provide these additional pieces of information each time the progress event is raised. So I propose that the progress event should be modified to the following total Total bytes being transferred loaded Bytes uploaded thus far length. Computable Specifies if the total size of the datafile being uploaded is known transfer. Speed as a longtime. Remaining as a Java. Script Date object Html. Upload using XMLHttp. Request. Ive provided a Uploading files using Html. Progress indication demo for those who want to jump right to it. All of the Java. Script code required is in the page. However, because the demo is a real world demo there are a number of CSS styles in use, and the layout of the page the Html is fairly complex. In this article we work with a minimalistic version of the Html and Java. Script so as to keep things simple and understandable. Browser Support for this Feature. At the time of this writing only the following browsers support this feature Firefox 4. Chrome 6 Safari 5. IE 9 Beta and Opera 1. Lets get started. The entire code listing for the minimalistic but functional implementation can be found in Code Listing 6. Each aspect of the minimalistic HtmlJava. Script is explained in detail in the rest of this article. Below, is a very simple Html form. This Html is no different then the Html youd use to do a regular HtmlHTTP file upload youd use today Html. Html. lt DOCTYPEhtml lt html lt head lt title Upload Files using XMLHttp. Request Minimallt title lt head lt body lt formidform. Upload. aspx lt divclassrow lt labelforfile. To. Upload Select a File to Uploadlt label lt br lt inputtypefilenamefile. To. Uploadidfile. To. Uploadonchangefile. Selected lt div lt dividfile. Name lt div lt dividfile. Size lt div lt dividfile. Type lt div lt divclassrow lt inputtypebuttononclickupload. FilevalueUpload lt div lt dividprogress. Number lt div lt form lt body lt html Code Listing 1 The bare minimum Html Page. Notice that the lt input typefile element has the onchange event assigned to a Java. Script method called file. Selected. So essentially, each time someone selects a file by browsing to a file on their local system, this event is raised. The file. Selected Java. Script method looks like the following. Selected. var file document. Element. By. Idfile. To. Upload. files0. Size 0. if file. Size Math. roundfile. String MB. file. Size Math. roundfile. String KB. document. Element. By. Idfile. Name. inner. HTML Name file. Element. By. Idfile. Size. inner. HTML Size file. Size. document. get. Element. By. Idfile. Type. inner. HTML Type file. Code Listing 2 The file. Selected Java. Script method. The first line of code in the method is doing something youve not seen or done before. Essentially, once you have a reference to the lt input typefile element, you have access to what is called a File. List object which is new in Html. File API specifications of Html 5. A File. List object is a collection of files. More specifically, it is a collection of File objects. A File object has the following properties. The name of the file excluding any path. The MIME type of the file in lower case. The size of the file in bytes This is already getting interesting isnt it We have access to this information on the client sideIn fact the File API gives us access to the contents of the file the file stream or bytes on the client side too, using the File.