Uploading File with rest api and HTML5 api

Question

I am using SharePoint 2013 on premise. I am trying to upload file to the custom list from custom webpart purely jQuery and javascript. In my form I have hyperlink, when I click on it, it will open SharePoint Modal dialog. Where in I am making HTML5 drag & drop and trying to upload file.

This is my code HTML5, javascript with SharePoint REST api

(function(window) {
    function triggerCallback(e, callback) {
      if(!callback || typeof callback !== 'function') {
        return;
      }
      var files;
      if(e.dataTransfer) {
        files = e.dataTransfer.files;
      } else if(e.target) {
        files = e.target.files;
      }
      callback.call(null, files);
    }
    function makeDroppable(ele, callback) {
      var input = document.createElement('input');
      input.setAttribute('type', 'file');
      input.setAttribute('multiple', false);
      input.style.display = 'none';
      input.addEventListener('change', function(e) {
        triggerCallback(e, callback);
      });
      ele.appendChild(input);

      ele.addEventListener('dragover', function(e) {
        e.preventDefault();
        e.stopPropagation();
        ele.classList.add('dragover');
      });

      ele.addEventListener('dragleave', function(e) {
        e.preventDefault();
        e.stopPropagation();
        ele.classList.remove('dragover');
      });

      ele.addEventListener('drop', function(e) {
        e.preventDefault();
        e.stopPropagation();
        ele.classList.remove('dragover');
        triggerCallback(e, callback);
      });

      ele.addEventListener('click', function() {
        input.value = null;
        input.click();
      });
    }
    window.makeDroppable = makeDroppable;
  })(this);
  (function(window) {
    makeDroppable(window.document.querySelector('.droppable'), function(files) {
        console.log(files);
        /*Check Files Length*/
        if (files.length > 1) {
            var msg = document.querySelector('.dz-message');
            msg.innerHTML += "<br/><span style='color:red'>You cannot upload more than 1 files</span>";
            return;
        }
        /*End*/
      var output = document.querySelector('.output');
      output.innerHTML = '';
      //for(var i=0; i<files.length; i++) {
      //  output.innerHTML += '<p>'+files[i].name+'</p>';
        //}
      //var formData = new FormData();
        //formData.append("files", files);
        var file = files[0];
        var getFileBuffer = function(file) {
            var deferred = $.Deferred();
            var reader = new FileReader();
            reader.onload = function (e) {
                deferred.resolve(e.target.result);
            }
            reader.onerror = function (e) {
                deferred.reject(e.target.error);
            }
            reader.readAsArrayBuffer(file);
            return deferred.promise();
        };
        var url = "_api/Web/Lists/getByTitle('GatePassDetails')/items(4)"
        uploadDocument(getFileBuffer, files[0].name, url)
    });
    function uploadDocument(buffer, fileName, url) {
        var url = String.format("{0}/{1}/AttachmentFiles/add(FileName='{2}')", _spPageContextInfo.webAbsoluteUrl, url, fileName);
        var call = jQuery.ajax({
            url: url,
            data: buffer,
            type: "POST",
            processData: false,
            headers: {
                Accept: "application/json;odata=verbose",
                "X-RequestDigest": jQuery("#__REQUESTDIGEST").val(),
                "Content-Length": buffer.byteLength
            }
        });
    }

  })(this);

My codes works without any error but when I go to the list and try to open file than I will get error message as below after opening the file.

Kindly can somebody help me to solve it.

Answer 1

You can't send the form data directly, you need to read it into an array buffer first.

var getFileBuffer = function (file) {     
    var deferred = $.Deferred();
    var reader = new FileReader();
    reader.onload = function (e) {
        deferred.resolve(e.target.result);
    }
    reader.onerror = function (e) {
        deferred.reject(e.target.error);
    }
    reader.readAsArrayBuffer(file);
    return deferred.promise();
}; 

For more information see: Uploading Files in SharePoint 2013 using CSOM and REST