Search code examples
javascripthtmlchunking

File slicing in JavaScript results in empty blob


I am implementing a browser-based chunked file uploader. To open the file I am using <input type="file" id="fileSelector" /> and this piece of code (simplified):

$('#fileSelector').on('change', function () {
    _file = evt.target.files[0];
});

I am slicing the file into chunks, but not reading the chunk into memory (not explicitly).

Problem: occasionally (for less than 0.1% of uploaded files) the chunk sliced from the underlying file is empty. E.g. during uploading a large file things go well, and then in the middle of that file calling:

var _blob = _file.slice(chunk.start, chunk.end, _file.type);

results in an empty slice (_blob.size is 0). Sending such blob to the server (.NET 4.6) results in Request.InputStream being empty. I am sending bniary data:

_xhr.setRequestHeader('content-type', 'application/octet-stream');
_xhr.send(_blob);

I should also mention that calling _file.slice again produces same empty blob. I can observe this in Chrome 57, Chrome 60 (Win and Mac), Mac Safari 10.1.1 and in Edge 15. Other browsers are also possible.

What can be wrong? Things I am considering:


Solution

  • The answer turned out to be very simple: that's what happens when the file being uploaded is gone (renamed, deleted).