Web-Development. Downloading files with HTML5 and how many times we say bad words

It was a challenge: find or create the boot files on the server using HTML5 features for multiboot. The loader must:

POST method to send any of these items along with the file;
send cookies;
provide an opportunity to select several files at once (or several thousand – here the user wants);
send files to groups;
Files are collected in groups of up to a certain number of megabytes, or number of files in a group (this is due to the fact that the server has a limit on the size of the POST request and the number of files in one package)

It is because of lack of experience with Flash, to create a boot has been chosen just JavaScript.
So what came of it

First there was the search: SWFupload, Uploadify and others have been studied. Probably not too well, but each of them did not meet all the requirements.

Bugs, bugs, bugs. Some versions of Flash could be controlled by a variable name. SWFupload does not send cookies, but it has a garbage cookie, and he sends them only by the methods GET or POST. However, we have the CMS to the server checks the user’s session is based on cookies, so Flash was discarded and the solution was chosen, using the HTML5.
Since FileApi only supported FF 3.0 +, Chrome, and Safari 4 +, then analyze the subtleties of working with these browsers.

Feature number 1

Getting the contents of the file in Chrome with readAsBinaryString.
With this method, we are faced with an incomprehensible problem that all files are coming beaten in size by approximately 1.5 times greater than the original size. Overcome this problem did not happen, so for chromium (as well as Safari), we used FormData.

To send a group of files + some data with the POST method in FF (and 4.0) form a multipart / form-data:
Content-Type: multipart / form-data; boundary =—— multipartformboundary1295790618
rn
——– Multipartformboundary1295790618
rn
Content-Disposition: form-data; name = ‘user_files []‘; filename = ‘My_File1.jpg’
rn
Content-Type: application / octet-stream
rn
rn
contents
rn
——– Multipartformboundary1295790618
rn
Content-Disposition: form-data; name = ‘user_files []‘; filename = ‘My_File2.jpg’
rn
Content-Type: application / octet-stream
rn
rn
contents
rn
——– Multipartformboundary1295790618
rn
Content-Disposition: form-data; name = ‘my_param’
rn
rn
Param_value
rn
——– Multipartformboundary1295790618
rn
Content-Disposition: form-data; name = ‘my_param’
rn
rn
Param_value
rn
——– Multipartformboundary1295790618 -
rn

Feature number 2

Defining support FormData can check the following:
function isFormDataSupported () {
return (window.FormData);
}

Feature number 3

In FF 3.0/3.5 and FF 3.6 uses a different function to retrieve the contents of files:
FF 3.0/3.5: readAsBinary ()
FF 3.6: getAsBinary ()

Feature № 4

There is also a difference in sending files via XMLHttpRequest:
FormData to be sent by the send (), and to send files, obtained by getAsBinary () method to send sendAsBinary ().

Feature number 5

FF rarely causes a progress event at XMLHttpRequest, as opposed to chrome or Safari. In fact, in FF progress event at all times not worked out at a very fast connection or lokalhoste.

Feature number 6

In the event of a XMLHttpRequest abort the FF is also called an event error. With this need to be especially careful if you have there is a handler for the error – it can cause additional problems for the user.

Feature № 7

If you use a FormData, then send method send (). Otherwise – sendAsBinary ().

For PHP advise you to pay attention to the following settings in php.ini:

post_max_size – the maximum size of POST.
upload_max_filesize – maximum file size.
max_file_uploads – the maximum number of downloads.

If you use the script, do not forget to change the script under the configuration of the server.