Get the list of files currently attached to the element

Question

I am wrapping some jQuery functionality around jQuery File Upload plugin. It uses an <input type="file" name="files[]" multiple="multiple"> element to what it seems like "hook up" the selected files before the upload. When a form on which the input resides is submitted, files are parsed on the server.

In order to debug my UI, I need to see the list of files currently "attached" to the input. Is it possible with Firebug or Chrome debugger?

perhaps [this](https://github.com/blueimp/jQuery-File-Upload/wiki/API) could help? — SpYk3HH, Mar 22 '12 at 16:38

Justin Pihony · Accepted Answer · 2014-07-01T02:13:28.307

20

Yes, you can just use the console and jquery:

$("#idofinput")[0].files

Then just treat it like an array of files :)

edited Jul 01 '14 at 02:13

answered Mar 22 '12 at 16:40

Justin Pihony

66,056
18
147
180

@SarathSaleem You seem to be correct. Here is a jsfiddle (not mine) that exhibits this...http://jsfiddle.net/eq3Qv/176/ – Justin Pihony Feb 15 '13 at 17:08
Here is a SO where this problem is brought up, but not quite addressed: http://stackoverflow.com/questions/5000950/ie-input-file-problem – Justin Pihony Feb 15 '13 at 17:11
Finally, here is another SO that lists some alternatives (mainly that you have to use ActiveX)...no wonder IE sucks...http://stackoverflow.com/questions/13512009/how-to-get-file-size-from-clientside-using-javascript-in-ie – Justin Pihony Feb 15 '13 at 17:15
1

Correction: $("#idofinput")[0].files 'files' is a property of the element, not the jQuery object. – Doug Domeny Oct 29 '13 at 20:13
Can somebody please help me? I'm only able to get a single file using this but I selected multiple files. It's driving me insane! – Mihael Keehl Feb 23 '17 at 15:59
@user2081044 you should open up a separate wuestion – Justin Pihony Mar 04 '17 at 06:33
Never mind, I fixed it. I just created a separate array because all the files in the input get overwritten once the user makes a different selection of images. It was a little tedious, but the user had to be able to add/delete images from a central point so I convert them to base64 and store them in a separate array and it works :) – Mihael Keehl Mar 04 '17 at 14:58

score 7 · Answer 2 · edited Mar 28 '13 at 17:58

7

This is how you can check in console:

$("#idofinput").get(0).files

edited Mar 28 '13 at 17:58

Wouter J

41,455
15
107
112

answered Mar 28 '13 at 17:39

romelmederos

198
3
5

You rocked Man (Y) . get() is what I was looking for :) Thank You so much! – Shehroz Ahmed Sep 14 '15 at 08:17

Get the list of files currently attached to the element

2 Answers2