What is the best way to upload files to a modern browser

Question

I want to upload (one) file to the server and show the download progress.

I know that I can upload a file using HTTP POST. I am not familiar with web sockets, but as I understand it, binary data can also be sent this way, and since web sockets are bidirectional, I could get the download progress.

I'm not worried about older browsers, so iframe and flash solutions are not very attractive if there is no significant advantage in this way.

I am also curious to learn about the best server technologies. Do they have the benefits of using a WSGI server such as Django? Or maybe a non-blocking I / O technology like Node.js? I am not asking if web framework x is better than web framework y, or server x is better than server y. But just what an ideal technology should have for loading an object into a client.

Update : the server side does not seem to be related to the technologies / APIs available on the client to facilitate loading.

Answer 1

Edit (2017-10-17): At the moment, there is also the option to use the Fetch API . It offers the same features as XMLHttpRequest, with a more advanced promise-based API. There is a polyfill for browsers that initially do not support window.fetch() (now these are mainly Internet Explorer and older versions of Safari).

XMLHttpRequest versus web sockets versus something else

Understood XMLHttpRequest . Its capabilities in modern browsers are huge and cover almost all scenarios. It will issue a standard POST or PUT request that any combination of web server and infrastructure can handle.

Although web sockets are good for some scenarios, this is another protocol that adds a lot of complexity - they should be used only if you need real-time server responses. And, as you yourself noted, other approaches, such as Flash, are just ugly hacks.

Sending binary data

Usually you will not have direct access to files. Thus, you will have a form field <input type="file"> somewhere on your page, and you will wait for the user to select the file. Options:

• Sending only the contents of the file: request.send(input.files[0]) . The request body will be the contents of the file and nothing more, encoding will not be performed, and no metadata, such as the file name, will be transmitted. Browser Compatibility : Chrome 7, Firefox 3.6, Opera 12, IE 10.
• Submitting entire form data : request.send(new FormData(input.form)) . Here, the contents of the form will be encoded as multipart/form-data , which means that you can send several form fields, as well as metadata, such as the names of the fields and files, will be transmitted. You can also modify the FormData object before submitting it. Depending on the server environment, processing this request may be simpler than raw data, usually you can use many helpers. Browser Compatibility : Chrome 6, Firefox 4, Opera 12, IE 10.
• Sending a typed array : in case you do not have a file, but just want to send some binary data that you generate on the fly. No additional encoding is performed here, so for the server side this works like sending the contents of a file. Browser Compatibility : Chrome 9, Firefox 9, Opera 11.60, IE 10.

Download progress display

You can listen for progress events on XMLHttpRequest.upload . loaded events are progress and total properties that allow you to determine how far you have come up to your request. Browser Compatibility : Chrome 7, Firefox 3.5, Opera 11.60, IE 10.

JavaScript libraries

Of course, there are existing libraries that describe the functionality described here. They are mentioned in other answers, the search on the Internet will certainly be even more. I clearly do not want to offer any libraries here - which of them, if you should use one, is exclusively a matter of preference.

Answer 2

My answer is rather late, but here it is:

---

Short answer:

XMLHttpRequest is the best way to upload files to a modern browser.

---

---

What is XMLHttpRequest?

XMLHttpRequest is a JavaScript object that was developed by Microsoft and adopted by Mozilla, Apple and Google. Now it is standardized in W3C . It provides an easy way to retrieve data from a URL without the need for a full page refresh. A web page can only refresh part of the page without violating what the user is doing. XMLHttpRequest is used in AJAX .

Despite its name, XMLHttpRequest can be used to retrieve any type of data, not just XML , and supports protocols other than HTTP (including file and ftp ).

The XMLHttpRequest object received a facelift in the Html5 specifications. In particular, XMLHttpRequest Level 2 .

---

Benefits:

• Handling byte streams such as File , Blob and FormData strong> objects to upload and download
• Run Events on Download and Download
• Cross Start Requests
• Allow creation of anonymous request - this is not sending HTTP Referer
• Ability to set timeout for request
• Download takes place in the background
• The page the user is on remains intact
• No changes are required on the server side , so the existing logic on the server side should not remain unchanged, which greatly facilitates the adaptation of this technology.

---

Html5 progress event:

According to the Html5 Progress Events spec , the Html5 progress event provides, among other things, the following information:

 total - Total bytes being transferred loaded - Bytes uploaded thus far lengthComputable - Specifies if the total size of the data/file being uploaded is known 

Using the above information, it is quite easy to provide the user with information about the time remaining until the end.

---

Report this to the user:

Information about the file that can be provided to the user:

• File name
• file size
• Type mime
• Progress bar with percent complete.
• Download speed or bandwidth.
• Estimated Time Left
• Bytes loaded so far
• Server response

---

Download Files Using XMLHttpRequest Demo

Please check " Uploading Files Using Html5 with Progress Demonstration " for an example. All JavaScript code is needed on the page, but CSS is not included. For security reasons, file types are limited to jpg, png, gif, and txt. The maximum file size is 2 MB.

---

XMLHttpRequest Browser Compatibility:

---

Answer 3

The Javascript API is probably the best way in modern browsers:

http://robertnyman.com/2010/12/16/utilizing-the-html5-file-api-to-choose-upload-preview-and-see-progress-for-multiple-files/

http://www.sitepoint.com/html5-javascript-file-upload-progress-bar/

Vulnerability on the server side ... I think that in any of the main frameworks there is a POST function of the HTTP file, well lit.

Answer 4

Files can be uploaded via AJAX.

Use the jQuery form plugin . It does all the dirty work of linking files to a form and serializing it. It is also capable of showing download progress.

The server stack has nothing to do with this.

Demo

Answer 5

I personally like the blueimp jQuery file upload plugin ( https://blueimp.imtqy.com/jQuery-File-Upload/ )

File upload widget with multiple file selections, drag and drop support, progress bars, checks and previews, audio and video for jQuery. Support for cross-domain, distributed and renewable file downloads and image resizing on the client side. It works with any server platform (PHP, Python, Ruby on Rails, Java, Node.js, Go, etc.), which supports standard HTML file uploads.

Demos:

• Basic
• Main plus
• Basic user interface Plus
• Angularjs

Download (GitHub): https://github.com/blueimp/jQuery-File-Upload