I am using Blueimp File Uploader.
While uploading files larger than the maxChunkSize, how do we access each uploaded file blobs separately in the server ?
My issue is that I need to forward the uploaded files in separate blobs to a different server using a backend api.
So far, looking at wiki, for chunks of 1 mb, I have added the following in the js :
$('#fileupload').fileupload({ url: 'server/php/', maxChunkSize: 1000000 // 1 MB }); but after upload is completed, I see the full merged file in the server :
server/php/files How do we access the individual blobs on the server ?
I have not done any changes in the default file server/php/index.php :
error_reporting(E_ALL | E_STRICT); require('UploadHandler.php'); $upload_handler = new UploadHandler(); and the default UploadHandler class in
server/php/UploadHandler.php (https://github.com/blueimp/jQuery-File-Upload/blob/master/server/php/UploadHandler.php). File is too big to be placed here.
I tried adding fileuploadchunkdone option, but am unsure, how do we access the file blobs in the server -- that is if it is the right way to do it.
$('#fileupload').fileupload({ url: 'server/php/', maxChunkSize: 1000000 // 1 MB }) .on('fileuploadchunkdone', function (e, data) { console.log('chunkdone') console.log(e) console.log(data) }); 1 Answers
Answers 1
chunking upload have 2 requirement
- javascript to chunking (split of certain bytes) the file
- PHP to save and merge file. commonly use : FILE_APPEND
i dont know what chunk file do you want to get. in client or server?
- if you want to get chunk which is will be send, you need check on
fileuploadchunksend - if you want to get chunk which is finished uploaded, you need check on
fileuploadchunkdone
From your question title, i assume you need to get chunk file which is already uploaded in the server.
so let's we use basic html from this page https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin
HTML
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>jQuery File Upload Example</title> <style> .bar { height: 18px; background: green; } </style> </head> <body> <input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple> <div id="progress"> <div class="bar" style="width: 0%;"></div> </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="js/vendor/jquery.ui.widget.js"></script> <script src="js/jquery.iframe-transport.js"></script> <script src="js/jquery.fileupload.js"></script> <script> $(function () { $('#fileupload').fileupload({ dataType: 'json', done: function (e, data) { $.each(data.result.files, function (index, file) { $('<p/>').text(file.name).appendTo(document.body); }); }, progressall: function (e, data) { var progress = parseInt(data.loaded / data.total * 100, 10); $('#progress .bar').css( 'width', progress + '%' ); //console.log(progress); }, maxChunkSize: 50000 // i prefer 50 Kb, because my file is only 190Kb (4 step) }) .on('fileuploadchunksend', function (e, data) { console.log('send'); }) .on('fileuploadchunkdone', function (e, data) { console.log('done'); console.log(data.result); //forceerror; wrong javascript function to make error so file upload will stopped. and we can start debugging }) .on('fileuploadchunkfail', function (e, data) { console.log('fail'); console.log(data); }) .on('fileuploadchunkalways', function (e, data) { console.log('always'); }); }); </script> </body> </html> then we edit the php file: server/php/UploadHandler.php
line 1061
protected function handle_file_upload($uploaded_file, $name, $size, $type, $error, $index = null, $content_range = null) { .... if ($uploaded_file && is_uploaded_file($uploaded_file)) { // multipart/formdata uploads (POST method uploads) $path_parts = pathinfo($file_path); //new $chunkFileName = $path_parts['dirname'].'/'.$path_parts['filename'].'_'. $content_range[1]."_". $content_range[2].".".$path_parts['extension'];//new if ($append_file) { file_put_contents($chunkFileName, file_get_contents($uploaded_file));//new file_put_contents( $file_path, fopen($uploaded_file, 'r'), FILE_APPEND ); } else { file_put_contents($chunkFileName, file_get_contents($uploaded_file));//new move_uploaded_file($uploaded_file, $file_path); } } else { // Non-multipart uploads (PUT method support) .... full code: https://pastebin.com/3AsHbkqQ (i just add 4 lines to get the chunks)
now lets try the code. i try upload 196kb dummy.png using 50kb chunk. (this will processed in 4 step)
after upload dummy.png file: now you will get 5 files:
- dummy.png //full file
- dummy_0_49999.png //1st chunk
- dummy_50000_99999.png //2nd chunk
- dummy_100000_149999.png //3rd chunk
- dummy_150000_196064.png //last chunk
Then you can do anything with this chunk
NOTE: from my experience please migrate to plupload instead using blueimp. you can read my comment below your question.
0 comments:
Post a Comment