JSFiddle - React, Tailwind, and code Playground

by Arnold Daniels

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.0/css/jasny-bootstrap.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.0/js/jasny-bootstrap.js"></script>
<script src="http://www.nihilogic.dk/labs/exif/exif.js"></script>
<script src="http://www.nihilogic.dk/labs/binaryajax/binaryajax.js"></script>
<div class="fileinput fileinput-new" data-provides="fileinput">
  <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;"></div>
  <div>
      <span class="btn btn-default btn-file"><span class="fileinput-new">Select image</span><span class="fileinput-exists">Change</span><input type="file" name="myfile" /></span>
    <a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
  </div>
</div>

CSS

html, body {
    min-height: 100%;
}
img {
    max-width: 30%;
}

.fileinput-flip-horizontal {
    -ms-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
}
.fileinput-flip-vertical {
    -ms-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
    filter: FlipY;
}
.fileinput-rotate-left {
    -ms-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.fileinput-rotate-right {
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
.fileinput-rotate-full {
    -ms-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}
.fileinput-flip-horizontal.fileinput-rotate-left {
    -ms-transform: scaleX(-1) rotate(-90deg);
    -webkit-transform: scaleX(-1) rotate(-90deg);
    transform: scaleX(-1) rotate(-90deg);
    filter: FlipH progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.fileinput-flip-horizontal.fileinput-rotate-right {
    -ms-transform: scaleX(-1) rotate(90deg);
    -webkit-transform: scaleX(-1) rotate(90deg);
    transform: scaleX(-1) rotate(90deg);
    filter: FlipH progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
.fileinput-flip-vertical.fileinput-rotate-left {
    -ms-transform: scaleY(-1) rotate(-90deg);
    -webkit-transform: scaleY(-1) rotate(-90deg);
    transform: scaleY(-1) rotate(-90deg);
    filter: FlipY progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.fileinput-flip-vertical.fileinput-rotate-right {
    -ms-transform: scaleY(-1) rotate(90deg);
    -webkit-transform: scaleY(-1) rotate(90deg);
    transform: scaleY(-1) rotate(90deg);
    filter: FlipY...

JavaScript

// Uses http://www.nihilogic.dk/labs/exif/exif.js
//      http://www.nihilogic.dk/labs/binaryajax/binaryajax.js

+function(exif) {
    var rotate_classes = {
        1: '',
        2: 'fileinput-flip-horizontal',
        3: 'fileinput-rotate-full',
        4: 'fileinput-flip-vertical',
        5: 'fileinput-rotate-right fileinput-flip-horizontal',
        6: 'fileinput-rotate-right',
        7: 'fileinput-rotate-left fileinput-flip-horizontal',
        8: 'fileinput-rotate-left'
    };

    $('.fileinput').on('change.bs.fileinput', function(e, file) {
        if (!file) return;
        
        var bin_string = window.atob(file.result.replace(/^data:.+;base64,/, ''));
        var bin_file   = new BinaryFile(bin_string);
        var info  = exif.readFromBinaryFile(bin_file);
        
        if(typeof info.Orientation != "undefined" && typeof rotate_classes[info.Orientation] != "undefined" && rotate_classes[info.Orientation]) {
            $(this).find('.fileinput-preview img').addClass(rotate_classes[info.Orientation]); 
        }
    });
}(EXIF);