JQuery - get all fileNames inside input='file'

Question

I have <input type="file" id="basicUploadFile" multiple="multiple"> and I want to get all file names inside this input. I've seen some example, but it gets only name of first file.

$ ('#basicUploadFile').live ('change', function () {
    alert($ ('#basicUploadFile').val());
});

How can I do this? Thanks.

http://stackoverflow.com/questions/6171013/javascript-get-number-of-files-and-their-filenames-from-input-multiple-elemen — lukas.pukenis, May 22 '12 at 13:37
Exact duplicate of this question: http://stackoverflow.com/questions/3654179/retrieving-file-names-out-of-a-multi-file-upload-control-with-javascript — Tr1stan, May 22 '12 at 13:39

score 89 · Accepted Answer · edited Jul 02 '13 at 00:44

89

var files = $('#basicUploadFile').prop("files")

files will be a FileList object.

var names = $.map(files, function(val) { return val.name; });

Now names is an array of strings (file names)

FileAPI reference
files property reference

edited Jul 02 '13 at 00:44

sanchez

4,519
3
23
53

answered May 22 '12 at 13:38

wrock

1,349
9
9

3

Good demonstration of the `.prop()` and `$.map()` methods that I wasn't aware of. :) – Richard May 22 '12 at 13:43
3

Yes, the support for the multiple attribute only appeared in IE10. – wrock May 24 '13 at 11:35
3

Use `if (window.File && window.FileList)` to check browser support – robmcvey Oct 01 '13 at 10:11
Simple explanation. Thanks – Amit Gupta Feb 10 '14 at 12:31
http://stackoverflow.com/questions/27898745/how-to-get-the-filename-in-javascript-from-input-file-tag .... pls help @wrock – Hitesh Jan 12 '15 at 09:37

Richard · Answer 2 · 2013-02-14T09:18:22.103

12

jsFiddle Demo

You can still access the files as a FileList collection without the need for over-using jQuery. I've created a quick jsFiddle demonstrating how to get the information out of the input using the FileList and File objects. Here is a snippet:

$('#basicUploadFile').live('change', function ()
{
    for (var i = 0; i < this.files.length; i++)
    {
        alert(this.files[i].name);
        alert(this.files.item(i).name); // alternatively
    }
});

edited Feb 14 '13 at 09:18

answered May 22 '12 at 13:42

Richard

8,110
3
36
59

can you please explain a little why use of "this" instead of "$(this)" – atif Feb 06 '13 at 06:32
2

`$(this)` would simply provide us with a jQuery wrapper for the object `this`, which in some instances would be helpful as it would expose certain methods, however in this case it's unnecessary. – Richard Feb 06 '13 at 09:24
this does not work in IE - IE does not allow you access to the list of files. – Oddman Feb 13 '13 at 04:55
@Oddman, that's partially correct; multiple file upload is only supported in IE10, http://caniuse.com/#feat=forms – Richard Feb 13 '13 at 16:31
We've tested it extensively on our own browsers at work, and could not access the files property in any of the IE browsers :( – Oddman Feb 14 '13 at 06:29
@Oddman, Hmm interesting, you could try using `this.files.item(i).name` instead. – Richard Feb 14 '13 at 09:17
@Richard - it's a little hard to access the item method if the files property isn't available ;) – Oddman Feb 15 '13 at 10:04
@Oddman haha, pardon my assumptions, I thought it might've been a different structure rather than `undefined`. Sadly it turns out that the property isn't supported in either IE or Opera. http://help.dottoro.com/ljxenmhs.php [Update] Although this is conflicting, I'm so confused, lol. http://msdn.microsoft.com/en-gb/library/ie/hh772307(v=vs.85).aspx – Richard Feb 15 '13 at 10:57

score 1 · Answer 3 · answered Dec 16 '15 at 01:03

I used this to show in console all files name:

var input_file = $("#input_file");
input_file.on("change", function () {
     var files = input_file.prop("files")
     var names = $.map(files, function (val) { return val.name; });
     $.each(names, function (i, name) {
          console.log(name);
     });
});

score 0 · Answer 4 · answered Sep 29 '15 at 10:24

<input name="selectAttachment" id="selectAttachment" type="file" multiple="multiple">
<button class="btn btn-default" onclick="uploadAttachment()" type="submit">Upload</button>


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

score 0 · Answer 5 · answered Dec 05 '18 at 05:28

you can extend the prototype of File Object (for example File.prototype.toJSON), and you can access the FileList of <input ..>:

<input id="myFile" type="file">

 var file = document.getElementById('fileItem').files[0];

For more information check this documentation:

https://developer.mozilla.org/en-US/docs/Web/API/FileList#Using_the_file_list

check this simple example:

File.prototype.toJSON = function() {
 return {
  'lastModified'     : this.lastModified,
  'lastModifiedDate' : this.lastModifiedDate,
  'name'             : this.name,
  'size'             : this.size,
  'type'             : this.type 
 };
}

function getFiles() {
    var files = document.getElementById('myFiles').files;
    document.getElementById('result').innerHTML = '<h1>result</h1>'
      + JSON.stringify(files);
}

<input id="myFiles" type="file" multiple onchange="getFiles()" />
<pre id='result'></pre>

Good Luck!

JQuery - get all fileNames inside input='file'

5 Answers5

jsFiddle Demo

check this simple example:

Linked

Related