JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<input type="file" multiple="multiple" />
<ul id="output">
</ul>

CSS

#output {
    width: 80%;
    margin: 0 auto;
    padding: 1em;
}

#output > li {
    width: 100%;
    list-style-type: disc;
    line-height: 2em;
    border-bottom: 1px solid #ccc;
}

#output > li span {
    float: right;
}

JavaScript

$('input:file[multiple]').change(
        function(e){
            console.log(e.currentTarget.files);
            var numFiles = e.currentTarget.files.length;
                for (i=0;i<numFiles;i++){
                    fileSize = parseInt(e.currentTarget.files[i].fileSize, 10)/1024;
                    filesize = Math.round(fileSize);
                    $('<li />').text(e.currentTarget.files[i].fileName).appendTo($('#output'));
                    $('<span />').addClass('filesize').text('(' + filesize + 'kb)').appendTo($('#output li:last'));
                }
        });