JSFiddle - React, Tailwind, and code Playground

by danialfarid

HTML

<!DOCTYPE html>
<input id="filebtn" type="button" value="Get Files">
<div id="stdout">no exif</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/0.8.2/lodash.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.0.6/require.min.js"></script>
<script>
require(["http://shanimal.com/_js/jpegmeta.js"],function(jpegmeta){});
$("#filebtn").click(function(){
  var files;
  var exif;
  var fbtn = $('<input type="file" multiple="multiple" accept="image/jpeg" />');
  fbtn.unbind().on("change",function(){
    function check(){
      if(_.reject(results,_.identity).length)
        return;
      console.log("Display EXIF data:",results);
      document.body.appendChild($('<div>' + JSON.stringify(results)+ '</div>')[0]);
      $("#stdout").html("EXIF Data Retrieved. (See console for detailed information)")
    }
    files = $(this).get(0).files;
    var results = new Array(files.length)
    _.each(files,function(file,i){
      var bin = new FileReader();
      bin.onloadend = function(){
        var exif = new JpegMeta.JpegFile(this.result, this.file.name);
        results[i] = {file:file,exif:exif};
        check();
      }
      bin.file = file
      bin.readAsBinaryString(file);
    })

  })
  fbtn.click()
})
</script>