Upload a chunked image file issue

Question

I'm using ng-file-upload directive to send an image to server from my angular application. Here is my code:

Upload.upload({
    url: 'http://localhost:5000/upload',
    data: { file: blobFile },
    resumeChunkSize: 10000,
}).then(function (resp) { //upload function returns a promise
    console.log('resp: ', resp);
});

Image is being transferred in chunks. But now, I'm struck here. I don't know how to receive these chunks and merge to create a full image. My server code is as follows:

handler: function (req, res) {
    var size = 0;

    req.on('data', function (data) {
      size += data.length;
      console.log('Got chunk: ' + data.length + ' total: ' + size);
    });

    req.on('end', function () {
      console.log("total size = " + size);
      res.send("response");
    });

    req.on('error', function (e) {
      console.log("ERROR ERROR: " + e.message);
    });
  }

Every time, I receive a chunk request, req.on('end', ...) triggers. I'm a newbie so confused here.

pirs · Answer 1 · 2017-10-14T02:19:30.943

Yes.. a chunked image isn't so simple to upload...

Here a solution i use:

var request = require('request');
var fs = require('fs');

function uploadChunkedImage(url, callback){

    // request options
    var options = {  
        url: url, // the url of the image
        method: 'GET'
    };

    // array of chunks
    var chunks = [];

    // request
    request(options, function (err, res, body) {
        console.log('END')

        // body is corrupted, you can't use it for images... :-(
        // so, we will callback the concactened buffer of it instead

        // concact chunk buffers
        chunks = Buffer.concat(chunks); // image buffer that you can use

        // callback the result
        callback(err, res, chunks);

    }).on('response', function (response) {

        response.on('data', function (chunk) {
            // collect chunk buffer
            chunks.push(chunk);
        });

    });
}

uploadChunkedImage('http://localhost:5000/upload', function(err, res, buffer){
    if(!err){
         // save
         fs.writeFile('./myDirPath/image.jpg', buffer);
    }else{
         console.log(err);
    }

});

Don't forget to install request and fs in your project with npm, Buffer is native

 npm install request --save
 npm install fs --save

for more informations:

You could do the same trick with ng-file-upload, there is a good example right here, else i suggest to try something like below (not tested):

handler: function (req, res) {

    // array of chunks
    var chunks= [];

    req.on('data', function (data) {

      // collect
      chunks.push(data);
      console.log('Got chunk: ' + data.length);

    });

    req.on('end', function () {

      // concact
      chunks = Buffer.concat(chunks);
      console.log("Total size = " + chunks.length);

      // res.send() is deprecated, use res.write instead
      res.write(chunks,'binary');
      res.end(null, 'binary');

    });

    req.on('error', function (e) {
      console.log("ERROR ERROR: " + e.message);
    });
}

Hope that will help

Upload a chunked image file issue

1 Answers1