How can I get the filename from the FileReader function in a Multiple Input?

Question

I have the following code:

<input type="file" multiple='multiple'>
<div id="thumbs"></div>

<script type="text/javascript">
    $('input[type="file"]').change(function() {
    $('#thumbs').html('');
    $.each(this.files, function() {
    readURL(this);
 })
});

function readURL(file) {
    var reader = new FileReader();
    reader.onload = function(e) {
    $('#thumbs').append('<img src="' + e.target.result + '" width="20%">')
    $('#quantity').text(i)
  }
  reader.readAsDataURL(file);
}
</script>

This is a multiupload input. When I select 'x' pictures, it creates thumbnails for them. That works perfectly, but I want to know how can I get the files name (if a picture is named "sun.jpg", I want to get "sun"), and append them bellow to the picture. I've tried this:

$('#thumbs').append('<img src="' + e.target.result + '" width="20%"><p>'+e.name+'</p>')

But e.name is undefined.

Here is a fiddle of everything: https://jsfiddle.net/ugs6rzqx/1/

Any help would be appreciated. Thanks.

use `file.name`, `e` is the reader event object, which doesn't contain any info about the file itself... — dandavis, Feb 02 '16 at 20:10
Yes @dandavis, you are correct! Thank you. Create the answer so I can mark it valid. — Roger Gonzalez, Feb 02 '16 at 20:13
Already answered here: http://stackoverflow.com/questions/12546775/get-filename-after-filereader-asynchronously-loaded-a-file — vandroid, Feb 02 '16 at 20:17

score 5 · Accepted Answer · answered Feb 02 '16 at 20:16

FileReader's event object is slim on details about the file. Inside the callback you can reach the normal File object, which still has all the file meta information like name, date, and size.

Your code just needs to use file instead of e

$('#thumbs').append('<img src="' + e.target.result + '" width="20%"><p>'+file.name+'</p>')

score 4 · Answer 2 · answered Feb 02 '16 at 20:21

4

If you just want the name:

$('#thumbs').append('<img src="' + e.target.result + '" width="20%"><p>'+file.name.split('.')[0]+'</p>')

Working fiddle: https://jsfiddle.net/robertrozas/ugs6rzqx/3/

answered Feb 02 '16 at 20:21

Hackerman

12,139
2
34
45

score 3 · Answer 3 · answered Feb 02 '16 at 20:16

3

Use

file.name

Here is your fiddle: https://jsfiddle.net/ugs6rzqx/2/

answered Feb 02 '16 at 20:16

Steven

121
5

How can I get the filename from the FileReader function in a Multiple Input?

3 Answers3

Working fiddle: https://jsfiddle.net/robertrozas/ugs6rzqx/3/

Linked