JSFiddle - React, Tailwind, and code Playground

by Shirly Manor

HTML

<input type="file" id="f" />

  <script src="script.js"></script>

JavaScript

(function() {

var f = document.getElementById('f');
var XUniqueUploadId = + new Date();
if (f.files.length)
  processFile();

f.addEventListener('change', processFile, false);


function processFile(e) {
  var file = f.files[0];
  var size = file.size;
  var sliceSize = 15000000;
  var start = 0;

  setTimeout(loop, 3);

  function loop() {
    var end = start + sliceSize;

    if(end>size){
      end=size;
    }
    var s = slice(file, start, end);
    send(s, start, end-1,size);
    if (end < size) {
      start += sliceSize;
      setTimeout(loop, 3);
    }
  }
}


function send(piece, start, end, size) {

  console.log("start ", start);
  console.log("end" , end);

  var formdata = new FormData();
  console.log(XUniqueUploadId);


  formdata.append('file', piece);
  formdata.append('upload_preset','<upload_preset>');
  formdata.append('cloud_name','<cloud_name>');
  formdata.append('public_id','<public_id>');
  var xhr = new XMLHttpRequest();
  xhr.open('POST', "https://api.cloudinary.com/v1_1/<cloud_name>/auto/upload",false);
  xhr.setRequestHeader('X-Unique-Upload-Id', XUniqueUploadId);
  xhr.setRequestHeader('Content-Range',"bytes " + start + "-" + end + "/" + size);


  

   xhr.onload = function () {
    // do something to response
    console.log(this.responseText);
};

    

  xhr.send(formdata);
}


  

function slice(file, start, end) {
  var slice = file.mozSlice ? file.mozSlice :
              file.webkitSlice ? file.webkitSlice :
              file.slice ? file.slice : noop;
  
  return slice.bind(file)(start, end);
}

function noop() {
  
}

})();