Add files from HTML input file in individual HTML table rows

Question

I have an input="file" that allows me to select multiple files. I'd like to have each of the files, without the extension, show in a new table row in an html table I have created.

I have the following code which allows me to find the filenames of the files selected in the input="file".

<script type="text/javascript">
        $(document).ready(function(){
            $('input[type="file"]').change(function(e){

                var files = $('#fileholder').prop("files")
                var names = $.map(files, function(val) { return val.name; });

               alert(names);
            });
        });
    </script>

Please keep in mind I am a beginner in jQuery but may understand most of the code.

Paul S. · Accepted Answer · 2015-11-07 15:53:07Z

1

In vanilla you could write it like this

(JavaScript must be invoked after Elements exist)

var file_input = document.getElementById('file_input'),
    file_table = document.getElementById('file_table');
    
file_input.addEventListener('change', function (e) {
    var i, j, fn;
    // empty table
    while (file_table.rows.length > 0)
        file_table.deleteRow(file_table.rows.length - 1);
    // add new values
    for (i = 0; i < this.files.length; ++i) {
        j = this.files[i].name.lastIndexOf('.');
        if (j > 0)
            fn = this.files[i].name.slice(0, j);
        else
            fn = this.files[i].name;
        file_table.insertRow().insertCell().textContent = fn;
    }
});

<input id="file_input" type="file" multiple/>

<table id="file_table">
    <tbody>
    </tbody>
</table>

1 Comment

Paul S. Over a year ago

The lastIndexOf > 0 test is to permit files such as .htaccess showing up, where lastIndexOf gives 0. If indexOf finds nothing, the return value is -1

Piotr Korlaga · Accepted Answer · 2015-11-10 07:48:35Z

0

JQuery solution looks like that:

$('#fileholder').change(function(e){
    var files = $('#fileholder').prop("files")
    var names = $.map(files, function(val) { return val.name; });
    $.each(names, function(index){
      $('#names').append('<tr><td>'+names[index].split('.').slice(0,-1).join('.')+'</td></tr>');
    });
});

https://jsfiddle.net/0gebxudp/4/

edited Nov 10, 2015 at 7:48

answered Nov 7, 2015 at 16:12

Piotr Korlaga

3,4783 gold badges22 silver badges28 bronze badges

3 Comments

Ralph Over a year ago

Thanks this works. I've changed it so it splits only at .mp3 . How could I make it split at other extensions such as .m4a and .wav ?

Piotr Korlaga Over a year ago

.split('.').shift() this covers all extensions

Ralph Over a year ago

@Piort Korlaga Yes but the problem is some music files are named such as Example Song Name (ft. Artist). By using your method anything after the ft. is removed.

Collectives™ on Stack Overflow

Add files from HTML input file in individual HTML table rows

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related