title: DropZoneJS + JavascriptLoadImage: rotate image?
body: <p>I'm trying to combine DropZoneJS (found <a href="http://www.dropzonejs.com/" rel="noreferrer"> here</a>) and JavascriptLoadImage (found <a href="https://github.com/blueimp/JavaScript-Load-Image" rel="noreferrer">here</a>) to create a solution where a user can drag-drop a file to upload, and based on the EXIF metadata information in the image, it will rotate it (including the preview thumbnail) if necessary. I think that all of the necessary pieces are provided:</p>
  
  <p>DropZoneJS provides the "addedfile" event which includes the file object. Hooking up that event handler, I can then pass its parameter to the JavascriptLoadImage.parseMetaData function and correctly read the stored orientation value:</p>
  
  <pre><code>var myDropZone = $("#my-awesome-dropzone").dropzone({ url: "/file/post" });
  
          myDropZone[0].dropzone.on("addedfile", function (file) {
  
  
  //Successfully loads the image, flips it and sticks the resulting HTML5 canvas in the DOM for display.
              loadImage(file, function (img) {
                  document.body.appendChild(img);
              },
  
              {
                  orientation: 2,
                  canvas:true
              }
              );
  
  
              loadImage.parseMetaData(file, function (data) {
                  if (!data.imageHead) {
                      return;
                  }
                  var orientation = data.exif.get('Orientation');
              },
          {
              maxMetaDataSize: 262144,
              disableImageHead: false
          }
      );
  
          });
  </code></pre>
  
  <p>I can successfully do the rotation, but I'm not sure about taking the resulting canvas, and replacing the dropzone "file" objet with the resulting content.</p>
  
  <ul>
  <li>Can anyone confirm if the "fileadded" event in DropzoneJS allows me to modify the file data (or if it's read only)</li>
  </ul>
  
  <p>Thanks...</p>
  
  <p>-Ben</p>