File upload for the 21st century
Download as PPTX, PDF2 likes1,194 views
The document discusses various methods for uploading files to a server from a web form, including single file uploads, multiple file uploads, asynchronous uploads with progress tracking, and drag-and-drop uploads. It also covers how file uploads are handled on the server side, including using an Nginx upload module to process uploaded files and configure storage, limits, and passing file data to backend applications.
![Uploading multiple files
public function process($form, $values) {
/** @var FileUpload[] $files */
$files = $values->files;
}](https://image.slidesharecdn.com/fileupload-141025101750-conversion-gate02/85/File-upload-for-the-21st-century-15-320.jpg)
![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]);
}
});](https://image.slidesharecdn.com/fileupload-141025101750-conversion-gate02/85/File-upload-for-the-21st-century-27-320.jpg)
![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";](https://image.slidesharecdn.com/fileupload-141025101750-conversion-gate02/85/File-upload-for-the-21st-century-40-320.jpg)
![Configuration
upload_set_form_field
$upload_field_name[$upload_file_number][name]
"$upload_file_name";
upload_tame_arrays on;](https://image.slidesharecdn.com/fileupload-141025101750-conversion-gate02/85/File-upload-for-the-21st-century-41-320.jpg)
File upload for the 21st century
- 1. File upload for the 21st century @jiripudil #posobota
- 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');
- 10. Uploading multiple files for ($i = 1; $i <= 100; $i++) { $form->addUpload("file$i", "File $i"); }
- 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