JSFiddle - React, Tailwind, and code Playground

by NunoMira

HTML

<input type="file" multiple="multiple" name="uploadedfile[]" />
<div id="name"></div>
<div id="size"></div>
<img id="xpto"/>

CSS

#name
{
    height: 70px;
    width: 400px;
    background:yellow;
}
#size
{
    height: 70px;
    width: 400px;
    background:green;
}
#bytes
{
    height: 70px;
    width: 400px;
    background:gray;
}

JavaScript

//Input file (get name, size, bytes, ext)
$('input[type="file"]').change(function()
{
    debugger;
    var file = this.files[0];
    var ola = new FileReader();
    ola.onload = function (ev)
    {
        debugger;
        var response=btoa(ev.currentTarget.result);
        $("#xpto").attr("src","data:"+file.type+";base64," + response);
    };
    ola.readAsBinaryString(file);
    
    $("#name").append('Filename : ' + file.name);
    $("#size").append('Filesize : ' + file.size);
});