JSFiddle - React, Tailwind, and code Playground

Image upload with EXIF orientation interpreter

by tonytlwu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-load-image/2.10.0/load-image.all.min.js"></script>
<form>
<input type="file" name="file" id="file" />
</form>
<div id="container"></div>

CSS

img, canvas {
  max-width: 100%;
}

JavaScript

/* See https://github.com/blueimp/JavaScript-Load-Image */

$('#file').on('change', function(e){
  var file = e.target.files[0];
  document.querySelector('#container').innerHTML = '';
  if(!file.type.match(/image.*/)){
    return console.warn("File is not an image: ", file.type);
  }
  loadImage.parseMetaData(
    file,
    function(data){
      loadImage(
        file,
        function(canvas){
          var img = new Image;
          img.src = canvas.toDataURL('image/jpeg', 80);
          document.querySelector('#container').appendChild(img);
        },
        {
        	canvas: true,
          orientation: (data.exif) ? data.exif.get('Orientation') : true
        }
      );
    }
  );
});