Add class to thumbnails to correct exif orientation

Question

I would like to correct the exif orientation of thumbnails, which are shown to the user before the images are uploaded to the server.

I managed to detect the exif of the thumbnail using this answer by Ali.

What is still missing is to correct the correctly detected exif.

I tried to achieve this by adding a css class to each thumbnail, according to its exif orientation. Inspired by this answer.


THE FIDDLE


HTML

<form action="create/post" method="post" enctype="multipart/form-data">
        <output class="preview-thumbs"></output><br>
    <input type="file" name="images[]" id="upload-post-images" class="upload-images" multiple />
</form>

Javascript

var input = document.getElementById('upload-post-images');
input.onchange = function(e) {
    for (i = 0; i<=e.target.files.length; i++) {
        var image = e.target.files[i];
        getOrientation(input.files[i], function(orientation) {
            if (orientation == 2) {
                image.className += 'orientation2';
            } else if (orientation == 3) {
                image.className += 'orientation3';
            } else if (orientation == 4) {
                image.className += 'orientation4';
            } else if (orientation == 5) {
                image.className += 'orientation5';
            } else if (orientation == 6) {
                image.className += 'orientation6';
            } else if (orientation == 7) {
                image.className += 'orientation7';
            } else if (orientation == 8) {
                image.className += 'orientation8';
            }
        });
    }
}

// Function getOrientation by Ali -> https://stackoverflow.com/questions/7584794/accessing-jpeg-exif-rotation-data-in-javascript-on-the-client-side
function getOrientation(file, callback) {
  var reader = new FileReader();
  reader.onload = function(e) {

    var view = new DataView(e.target.result);
    if (view.getUint16(0, false) != 0xFFD8) return callback(-2);
    var length = view.byteLength, offset = 2;
    while (offset < length) {
      var marker = view.getUint16(offset, false);
      offset += 2;
      if (marker == 0xFFE1) {
        if (view.getUint32(offset += 2, false) != 0x45786966) callback(-1);
        var little = view.getUint16(offset += 6, false) == 0x4949;
        offset += view.getUint32(offset + 4, little);
        var tags = view.getUint16(offset, little);
        offset += 2;
        for (var i = 0; i < tags; i++)
          if (view.getUint16(offset + (i * 12), little) == 0x0112)
            return callback(view.getUint16(offset + (i * 12) + 8, little));
      }
      else if ((marker & 0xFF00) != 0xFF00) break;
      else offset += view.getUint16(offset, false);
    }
    return callback(-1);
  };
  reader.readAsArrayBuffer(file.slice(0, 64 * 1024));
}

// Preview the to be uploaded file by Kamyar Nazeri -> https://stackoverflow.com/questions/14069421/show-an-image-preview-before-upload
function handleFileSelect(evt) {
    var files = evt.target.files;
    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {
      // Only process image files.
      if (!f.type.match('image.*')) {
        continue;
      }

      var reader = new FileReader();

      // Closure to capture the file information.
      reader.onload = (function(theFile) {
        return function(e) {
          // Render thumbnail.
          var span = document.createElement('span');
          span.innerHTML = 
          [
            '<img style="height: 150px; margin: 5px" src="', 
            e.target.result,
            '" title="', escape(theFile.name), 
            '"/>'
          ].join('');

          document.getElementsByClassName('preview-thumbs')[0].insertBefore(span, null);
        };
      })(f);

      // Read in the image file as a data URL.
      reader.readAsDataURL(f);
    }
}
document.getElementsByClassName('upload-images')[0].addEventListener('change', handleFileSelect, false);

CSS

.orientation2 {
  -moz-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  transform: scaleX(-1);
}

.orientation3 {
  -moz-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

.orientation4 {
  -moz-transform: rotate(180deg) scaleX(-1);
  -webkit-transform: rotate(180deg) scaleX(-1);
  -o-transform: rotate(180deg) scaleX(-1);
  transform: rotate(180deg) scaleX(-1);
}

.orientation5 {
  -moz-transform: rotate(270deg) scaleX(-1);
  -webkit-transform: rotate(270deg) scaleX(-1);
  -o-transform: rotate(270deg) scaleX(-1);
  transform: rotate(270deg) scaleX(-1);
}

.orientation6 {
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}

.orientation7 {
  -moz-transform: rotate(90deg) scaleX(-1);
  -webkit-transform: rotate(90deg) scaleX(-1);
  -o-transform: rotate(90deg) scaleX(-1);
  transform: rotate(90deg) scaleX(-1);
}

.orientation8 {
  -moz-transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  transform: rotate(270deg);
}

I would be very thankful for any kind of help!!