JSFiddle - React, Tailwind, and code Playground

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>

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);
}

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(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 -> http://stackoverflow.com/questions/14069421/show-an-image-preview-before-upload
function handleFileSelect(evt) {
	var files =...