php jquery file-upload jquery-file-upload

How do we access file blobs in the server?

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)
});

Solution

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.