title: Uploading BLOB/ArrayBuffer with Dropzone.js
body: <p>Using SharePoint 2013 REST API, I'm successfully uploading files, such as <code>.docx</code> or <code>.png</code>'s to a folder inside a document library using Dropzone.js. I have a function where I initialize my dropzone as follows:</p>
  
  <pre><code>myDropzone = new Dropzone("#dropzone");
  
  myDropzone.on("complete", function (file) {
      myDropzone.removeFile(file);
  });
  
  myDropzone.options.autoProcessQueue = false;
  
  myDropzone.on("addedfile", function (file) {
      $('.dz-message').hide();
      myDropzone.options.url = String.format(
      "{0}/{1}/_api/web/getfolderbyserverrelativeurl('{2}')/files" +
      "/add(overwrite=true, url='{3}')",
      _spPageContextInfo.siteAbsoluteUrl, _spPageContextInfo.webServerRelativeUrl, folder.d.ServerRelativeUrl, file.name);
  });
  
  myDropzone.options.previewTemplate = $('#preview-template').html();
  
  myDropzone.on('sending', function (file, xhr, fd) {
      xhr.setRequestHeader('X-RequestDigest', $('#__REQUESTDIGEST').val());
  });
  </code></pre>
  
  <p>The problem I've encountered is that almost all the files (PDF being the only one not) are shown as corrupt files when the upload is done. This is most likely due to the fact SharePoint requires that the file being uploaded is sent as an <strong>ArrayBuffer</strong>. <a href="https://msdn.microsoft.com/en-us/library/office/dn769086%28v=office.15%29.aspx" rel="nofollow noreferrer">MSDN Source</a></p>
  
  <p>Using a regular Ajax POST and the method above to convert the file to an arraybuffer, I've successfully uploaded content to the SharePoint document library, without them getting corrupt. Now, I would like to do the same but without having to omit the use of Dropzone.js, that adds a very nice touch to the interface of the functionality.</p>
  
  <p>I've looked into modifying the <code>uploadFiles()</code>-method in <code>dropzone.js</code>, but that seems drastic. I've also tried to figure out whether or not I can use the <code>accept</code> option in <code>options</code> but that seems like a dead end.</p>
  
  <p>The two most similar problems with solutions are the ones linked below, where the first seems to be applicable in my case, but at the same time looks less "clean" than I would want to use.</p>
  
  <p>The second one is for uploading images with a <code>Base64</code> encoding.</p>
  
  <p><a href="https://stackoverflow.com/a/27837178/1447173">1 - Simulating XHR to get ArrayBuffer</a></p>
  
  <p><a href="https://stackoverflow.com/a/22832623/1447173">2 - Upload image as Base64 with Dropzone.js</a></p>
  
  <p>So my question in a few less words is, when a file is added, how do I intercept this, convert the data to an arraybuffer, and then POST it using Dropzone.js?</p>