title: DropzoneJS - IndexSizeError: Index or size is negative or greater than the allowed amount
body: <p>I started using <a href="http://www.dropzonejs.com/" rel="nofollow noreferrer">DropzoneJS</a> that is a great open source library with  <a href="https://github.com/enyo/dropzone/stargazers" rel="nofollow noreferrer">7,043</a> <a href="https://github.com/enyo/dropzone/" rel="nofollow noreferrer"> stars</a> on <a href="https://github.com/" rel="nofollow noreferrer">Github</a>. It provides drag and drop file uploads with image previews. </p>
  
  <p>However uploading images bigger than 100k resulted in the following error in <code>Firefox</code>:</p>
  
  <blockquote>
    <p>IndexSizeError: Index or size is negative or greater than the allowed amount </p>
  </blockquote>
  
  <p>in <em>dropzone.js</em> that was raised in the following line:</p>
  
  <pre><code>return ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh / vertSquashRatio);
  </code></pre>
  
  <p>Others have reported experiencing this behavior for thumbnails creation <a href="https://github.com/enyo/dropzone/issues/686" rel="nofollow noreferrer">here</a>. </p>
  
  <p>This is a common error in Firefox after a bit of research. Most relevant stackoverflow question:</p>
  
  <p>1- <a href="https://stackoverflow.com/questions/19338032/canvas-indexsizeerror-index-or-size-is-negative-or-greater-than-the-allowed-a">Canvas - IndexSizeError: Index or size is negative or greater than the allowed amount</a></p>