JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<input type="file">

CSS

input,
img,
div {
  float: left;
  clear: both;
  margin: 15px;
  white-space: pre;
}

JavaScript

$("input").change(function() {
    
    $('img, textarea').remove();
    
    var file = this.files[0];
    
    image.render( file, function( base64 ){
    	$('body').append("<img src='"  + base64 + "' />");
    });
    

    image.getBinary( file, function( binary ) {
    	var string = 
          'var dialog= new Window ("dialog"); \n' +
          'dialog.add ("image", undefined, File.decode("'+ binary +'") ); \n' +
          'dialog.show();';
      // https://bugs.chromium.org/p/chromium/issues/detail?id=237433
    	$('body').append('<div style="text-overflow: ellipsis; overflow: hidden; width: 250px; height: 75px;">'+ string +'</div>');
    });
    
});

var image = {};

image.render = function( file, callback ) {

  var reader = new FileReader();
  reader.onload = function() {
    callback( reader.result );
  }
  reader.readAsDataURL(file);
  
};

image.getBinary = function( file, callback ) {

  var reader = new FileReader();
  reader.onload = function(){
    callback( encodeURIComponent( reader.result ) );
  };
  reader.readAsBinaryString( file );
  
};