How do we access file blobs in the server?

user_896561 0
Viewed 424

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)
});
jquery-file-upload file-upload php jquery
1 Answers

chunking upload have 2 requirement

  1. javascript to chunking (split of certain bytes) the file
  2. 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:

  1. dummy.png //full file
  2. dummy_0_49999.png //1st chunk
  3. dummy_50000_99999.png //2nd chunk
  4. dummy_100000_149999.png //3rd chunk
  5. 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.

user_33961680
Related