JSFiddle - React, Tailwind, and code Playground

by saeedneamati

HTML

<input type='file' multiple='multiple' id='uploader' />
<input type='button' id='getFilesInfo' value='Get Files Info' />
<table id='files-info'>
    <thead>
        <tr>
            <th>
                Name
            </th>
            <th>
                Type
            </th>
            <th>
                Size
            </th>
        </tr>
    </thead>
    <tbody>
        
    </tbody>
</table>

CSS

#files-info
{
    border-collapse: collapse;
    margin-top: 40px;
}
#files-info td, #files-info th
{
    border: 1px solid #666;   
    padding: 5px 15px;
}
#files-info th
{
    font-weight: bold;  
    background: #333;
    color: white;
    border-color: white; 
}

JavaScript

$(function() {
    $('#getFilesInfo').click(function() {
        var uploader = document.getElementById('uploader');
        for (var i = 0; i < uploader.files.length; i++) {
            var file = uploader.files[i];
            $('#files-info').append('<tr><td>' + file.name + '</td><td>' + file.type + '</td><td>' + file.size + '</td></tr>');
        }
    });
});