A primer on how to implement effective and user-friendly asynchronous multiple file upload.

1. File upload
for the 21st century
@jiripudil
#posobota

2. Upload, anyone?

3. RFC 1867
Form-based File Upload in HTML
published 1995

4. RFC 1867
<form enctype="multipart/form-data"
method="post">
<input type="file">

5. Uploading in Nette
$form->addUpload('file', 'File');

6. Uploading in Nette
$form->addUpload('file', 'File')
->addCondition($form::FILLED)
->addRule($form::MAX_FILE_SIZE,
NULL, 1024)
->addRule($form::IMAGE);

7. Uploading in Nette
public function process($form, $values) {
/** @var FileUpload $file */
$file = $values->file;
}

8. Uploading multiple files
$form->addUpload('file1', 'File 1');
$form->addUpload('file2', 'File 2');
$form->addUpload('file3', 'File 3');
// ...
$form->addUpload('file100', 'File 100');

9. Uploading multiple files

10. Uploading multiple files
for ($i = 1; $i <= 100; $i++) {
$form->addUpload("file$i", "File $i");
}

11. Uploading multiple files

12. Uploading multiple files

13. Uploading multiple files
$form->addUpload('files', 'Files', TRUE);
// or (nette/forms@master)
$form->addMultiUpload('files', 'Files');

14. Uploading multiple files
<input type="file" multiple>

15. Uploading multiple files
public function process($form, $values) {
/** @var FileUpload[] $files */
$files = $values->files;
}

22. Asynchronous upload
var data = new FormData(form);
var xhr = new XMLHttpRequest;
xhr.open('POST', form.action);
xhr.onreadystatechange = function (e) {
if (xhr.readyState === 4) { // DONE
if (xhr.status === 200) {} else {}
}
};

23. Progress tracking
xhr.upload.onprogress = function (e) {
if (e.lengthComputable) {
var percentage = e.loaded / e.total;
// display somewhere
}
};
xhr.send(data);

25. Drag'n'drop
$('#dropzone').on('dragenter dragover', fn (e)
{
if (%containsFiles%) {
e.preventDefault();
}
});

26. Drag'n'drop
%containsFiles%:
// FF, IE - types is 'DOMStringList'
e.dataTransfer.types.contains('Files');
// WebKit - types is Array
e.dataTransfer.types.indexOf('Files') > -1;

27. Drag'n'drop
$('#dropzone').on('drop', function (e) {
e.preventDefault();
var data = new FormData();
var files = e.dataTransfer.files;
for (var i = 0; i < files.length; i++) {
data.append(files[i].name,
files[i]);
}
});

30. What happens on the server side

31. What happens on the server side

32. What happens on the server side

34. Upload Module

35. What upload module does

36. Installation
$ git clone -b 2.2
https://github.com/vkholodkov/nginx-upload-module

37. Installation
$ ./configure
--add-module=/path/to/upload/module

38. Configuration
client_max_body_size 32m;
location /upload {
upload_pass @upload;
# ...
}
location @upload {
rewrite ^ index.php last;
}

39. Configuration
upload_store /tmp/upload 1;
upload_store_access user:r group:r;
upload_cleanup 400 404 499 500-505;
upload_max_file_size 8m;
upload_limit_rate 512k;

40. Configuration
upload_set_form_field
$upload_field_name[name] "$upload_file_name";
-"-[path] "$upload_file_path";
-"-[type] "$upload_content_type";
upload_aggregate_form_field
-"-[size] "$upload_file_size";
-"-[md5] "$upload_file_md5";
upload_pass_form_field "submit";

41. Configuration
upload_set_form_field
$upload_field_name[$upload_file_number][name]
"$upload_file_name";
upload_tame_arrays on;

42. Summary

46. Thanks!
@jiripudil
#posobota