Uploading files to server like Gmail?

Question

JavaScript

How to implement and maybe there are ready-made solutions for implementing the process of uploading files to the server like on Gmail.
Let me remind you the features:
*) multiAttach, you can attach several files at a time, and not poke one at a time
*) progressBar, the selected files are loaded sequentially + indication of the download process of each file
*) You can interrupt the download of a file or delete a separate file from already downloaded, or delete from queue a file that has not yet started loading.
*) maybe I haven't seen something useful yet

Answer 1

here is a list of the most popular stackoverflow.com/questions/4072889/uploadify-alternative-need-to-upload-large-1gb-files
I myself use the third one (derived from the first one), even works on IE6. Progress bar and cancellation can be taken from the first. These two are non-flash, HTML4

Answer 2

www.plupload.com/

Answer 3

I used the version with PHP + APC www.ibm.com/developerworks/library/os-php-v525/index.html Everything is beautiful, without unnecessary plugins and without flash.

Answer 4

If you do not touch any flashes and server components, then you can do it based on the functionality offered by HTML5. The only problem is that it is introduced slowly and supported by browsers sucks:
1. Chrome: starting from the 5th (?) version added FormData (from XHR2). Now you can send files (despite the fact that it is not yet possible to read the binary contents of the file, at least in stable releases) with XHR (and there, I remind you, you need multipart). In earlier versions, you had to send the raw binary content of the file, without any headers. Accordingly, the web servers did not understand that they received a file, and did not process the information sent at all (it had to be read from the input stream). There is support for XMLHttpRequestUpload, which allows you to monitor the progress of the upload.
2. Firefox: since 3.5 (?) you can read the contents of files, there is a special method for sending binary data. So the absence of FormData does not affect anything bad - you can form a multipart request yourself. XMLHttpRequestUpload is also supported.
3. Safari: I can’t tell the point, but File, FormData, XMLHttpRequestUpload are implemented there (5.0 - 7533.16).
4. Opera, IE: apparently, they have not even heard of such people. For them, you will have to do it the old fashioned way - flash / serverside / etc.
To read from the category:
javascript.ru/blog/Brmaley.ee/FileAPI - the material is somewhat outdated*
www.thecssninja.com/javascript/gmail-upload - the material is somewhat outdated*
code.google.com/p/html5uploader/- a library for D&D, but, in my opinion, it is also somewhat outdated * :)

* - means support for such a thing as FormData.

Answer 5

There is such an interesting plugin valums.com/ajax-upload/

Answer 6

progressbars are implemented on jQuery a bunch of ready-made components
there are flash solutions
if nginx is used, and this is a large part of the runet, then you need to use the module:
ngx_upload_module, mgx_upload_progress_module
if you use apache, that is, cgi progress-load scripts.

Answer 7

In my opinion, the most interesting and useful feature of gmail is drag'n'drop support :)

Answer 8

thank you all for the advice, suggestions and recommendations, now I will digest the information and wind it up

Answer 9

lwu.no-ip.org/
Supports html5, flash and silverlight loading, rolls back successfully if there are banner cutters.
In my opinion, it has a set of events for the realization of any desires.
All customization of the download queue is done by you.
Supports reloading in case of connection failure (only in html5 and silverlight).
Supports cross-domain file uploads.
Works only with nginx + nginx_upload_module, although you can implement the www.grid.net.ru/nginx/resumable_uploads.ru.html protocol in other server components if you wish.