JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<input type="file">

CSS

input,
img,
textarea {
  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();';
      console.log( binary )
    	$('body').append('<textarea rows="3" cols="150">'+ string +'</textarea>');
      $('textarea').focus();
    });
    
});

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( encodeURI( reader.result ) );
  };
  reader.readAsBinaryString( file );
  
};