ObjectURL, Blob playground #1

by sanford

HTML

<INPUT id="browser" type="file" />
<INPUT id="getObjectURL" type="button" value="Get Object URL" />
<div id="objectURL"></div>
<IMG id="blobImg" />
<DIV id="rawbase64" />

CSS

#browser {
    height: 200px;
    width: 200px;
    background-size: contain;
    background-position: center bottom;
    background-repeat: no-repeat;
    padding-right: 1px;
}
#rawbase64 {
    margin-top: 20px;
    width: 200px;
    font: 10px/10px Courier;
    word-wrap: break-word;
}

JavaScript

var reader = new FileReader();
reader.addEventListener('load', function(e){
    document.id('browser')
        .setStyle('background-image','url('+e.target.result+')');
    // document.id('rawbase64').set('text',e.target.result);
});

document.id('browser').addEvent('change',function(e){
    currentBrowsedFile = this.files[0];
    reader.readAsDataURL( currentBrowsedFile );
    document.id( 'objectURL' ).set('text',
          window.webkitURL.createObjectURL( currentBrowsedFile )
    )    
});

document.id('getObjectURL').addEvent('click',function(e){
    var URI = document.id( 'objectURL' ).get('text');
    document.id( 'blobImg' ).set('src',URI);
    var ntvXHR = new XMLHttpRequest();
    ntvXHR.open('GET', URI, true);
    ntvXHR.responseType = 'blob';
    ntvXHR.onload = function(e) {
      if (this.status == 200) {
        var reBlob = this.response;
        console.log( reBlob.size );
        reader.readAsDataURL( reBlob );
      }
};
    ntvXHR.send();
})