mardi 5 mai 2015

Construct file from ArrayBuffer using Blob

I am experimenting some HTML5 APIs like FileReader, Blob and etc. I am trying to slice a file into chunks, read each chunk as array buffer, create a blob by adding all the chunked array buffers together, and then reconstruct the file. The issue i am having is after reconstruct the file, the file is corrupted for most file types except for text files which are fine. Any idea why? Below is the code i have so far.

JSFiddle Code Sample

<input type="file" id="files" name="files[]" multiple><button id="a">anaylze</button>



 document.getElementById('a').addEventListener('click', sliceFileToSend, false);
document.getElementById('files').addEventListener('change', handleFileSelect, false);
var files;
var blob = new Blob();
var filename='';

function handleFileSelect(evt) {
  files = evt.target.files; 
}

function sliceFileToSend() {
  console.log("enter sliceFileToSend function");

  if (typeof files !== 'undefined') {
    for (var j = 0, len = files.length; j < len; j++) {
      if (files[j].size > 25 * 1024 * 1024) {
        continue;
      }
      filename=files[j].name;
      alert(JSON.stringify({
        filename: files[j].name
      }));

      parseFile(files[j]);
    }
  }
}

function parseFile(file) {
  var fileSize = file.size;
  var chunkSize = 16 * 1024; // bytes
  var offset = 0;  
  var block = null;


  var foo = function(evt) {
    if (evt.target.error === null) {
      offset += evt.target.result.byteLength;
      blob = new Blob([evt.target.result,blob]); // callback for handling read chunk
    }
    else {
      console.log("Read error: " + evt.target.error);
      return;
    }
    if (offset >= fileSize) {
      console.log("Done reading file");
      alert({
        isEnded: true
      });
      saveFile(blob,filename);
      return;
    }

    block(offset, chunkSize, file);
  };

  block = function(_offset, length, _file) {
    var r = new FileReader();
    var blob = _file.slice(_offset, length + _offset);
    r.onload = foo;
    r.readAsArrayBuffer(blob);
  };

  block(offset, chunkSize, file);
}

function saveFile(blob, fileName) {
  var link = document.createElement('a');
  link.href = window.URL.createObjectURL(blob);
  link.download = fileName;
  link.click();
}

Aucun commentaire:

Enregistrer un commentaire