Process Incoming XHR2 Data (Blob)

Question

Process Incoming XHR2 Data (Blob)

I send multiple files chunked into Blob's over XHR2 to a Node.js/Express server.

How can I receive them on the server while making sure they are put together correctly? In their right order and to the right file when multiple files are uploaded "at once".

Following is the code (both front- and backend) I have so far but doesn't account for multiple uploads yet.

Frontend:

// 'files' is of type FileList, directly from file input.
for (var i = 0, length = files.length; i < length; i++) {
    var file = files[i];

    var bytes = 51200; // 50 KB
    var size = file.size;
    var start = 0;
    var end = bytes;

    while (start < size) {
        sendBlob(file.slice(start, end), file.name, file.type);
        start = end;
        end = start + bytes;
    }   
}   

// sendBlob()
var sendBlob: function (data, filename, filetype) {
    var xhr = new XMLHttpRequest();
    xhr.open('POST', this.url, false);
    xhr.setRequestHeader('X_FILENAME', filename);
    xhr.setRequestHeader('Content-Type', filetype);
    xhr.send(data);
};

Backend:

app.post('/', function (req, res) {
    var body = '';
    req.on('data', function (data) {
        body += data;
    });
    req.on('end', function () {
        var filename = req.headers['x_filename'];
        var newPath = __dirname + '/upload/' + filename;
        fs.writeFile(newPath, body, function (err) {
            res.send({
                filename: filename
            });
        });
    });
});

Very small text files are stored correctly but images seem to always get messed up and end up with a bigger file size. Bigger text files are written correctly but there the first chunk seems to be missing.

javascript
node.js
express
xmlhttprequest

Answer 1

Your upload logic is naive. Here are some things you should do to ensure correctness :

You have to maintain and communicate the chunk id/number between client and server so that order can be maintained.
```
var sendBlob: function (data, filename, filetype, chunkid)
//set chunkid in header or in data.
```
In your server you are accepting any post request and appending it to the body. You should maintain variables for filename and filetype and match it with incoming request before appending it.
```
Files[Name] = { //Create a new Entry in The Files Variable for each new file
    Filetype : "",
    FileSize: 0,//size of Data in buffer  
    Data: "",  //buffer for storing data
    Downloaded:  //chunks recieved
}
```
Append to Data only when you check it. (Extra file size could be due to this)
In your fs.writeFile you should set encoding as binary, image and video files are binary encoded and writing them into default utf-8 encoding may corrupt them.
```
fs.writeFile(newPath, body, 'binary', function (err){...});
```
(optional) For each chunk received by server it should send an acknowledgement back to client so that it knows which chunk is dropped and must be sent.