How to get files from <input type='file' .../> (indirect) with JavaScript

Question

I have a problem with the "input tag" in non-IE browsers:

<input type="file" ...

I'm trying to write my uploader, just using JavaScript and ASP.NET.

I have no problem uploading files.

My problem occurred when I wanted to get my files in non-IE browsers with

<input type="file" ...

I do not want to use directly from input because its appearance does not change correctly.

I wrote this code to get files from the hard disk:

function $tag(_str_tag) {
    return document.getElementsByTagName(_str_tag);
}

function $create(_str_tag) {
    return document.createElement(_str_tag);
}


function $open_file() {
    _el_upload = $create("input");
    _el_body = $tag("body")[0];
    _el_upload.setAttribute("type", "file");
    _el_upload.style.visibility = "hidden";
    _el_upload.setAttribute("multiple", "multiple");
    _el_upload.setAttribute("position", "absolute");
    _el_body.appendChild(_el_upload);
    _el_upload.click();
    _el_body.removeChild(_el_upload);
    return _el_upload.files;
}

In IE it works pretty well and returns my files currently.. In Chrome And Firefox, after loading "file input dialog", it can't return any file.

And Opera and Safari are completely out.

I can fix it with this trick, but it's not good basically.

_el_upload.click();
alert();

I think a "callback" or "wait function" may fix this, but I can't handle it.

What do you mean by its appearance does not change correctly What are you trying to do? — gen_Eric
– gen_Eric, Commented Apr 3, 2013 at 15:28
You need to use the onchange event of the <input> element. return _el_upload.files happens before you select a file. — gen_Eric
– gen_Eric, Commented Apr 3, 2013 at 15:30
hi @RocketHazmat thx for reply : i am tring to make my own UI in my CMS and i have problem with <input type="file"/> design ; i dont want to see a textbox nearby a button named "file upload" — Shamshirsaz.Navid
– Shamshirsaz.Navid, Commented Apr 3, 2013 at 15:41
Possible duplicate of stackoverflow.com/questions/2048026/…. — Ray Nicholus
– Ray Nicholus, Commented Apr 3, 2013 at 15:49

Community · Accepted Answer · 2017-05-23 12:34:23Z

93

If you are looking to style a file input element, look at open file dialog box in javascript. If you are looking to grab the files associated with a file input element, you must do something like this:

inputElement.onchange = function(event) {
   var fileList = inputElement.files;
   //TODO do something with fileList.  
}

See this MDN article for more info on the FileList type.

Note that the code above will only work in browsers that support the File API. For IE9 and earlier, for example, you only have access to the file name. The input element has no files property in non-File API browsers.

edited May 23, 2017 at 12:34

CommunityBot

11 silver badge

answered Apr 3, 2013 at 16:29

Ray Nicholus

19.9k14 gold badges65 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kevin Chandra · Accepted Answer · 2019-06-14 04:17:03Z

25

Based on Ray Nicholus's answer :

inputElement.onchange = function(event) {
   var fileList = inputElement.files;
   //TODO do something with fileList.  
}

using this will also work :

inputElement.onchange = function(event) {
   var fileList = event.target.files;
   //TODO do something with fileList.  
}

answered Jun 14, 2019 at 4:17

Kevin Chandra

7151 gold badge12 silver badges17 bronze badges

1 Comment

Luís Assunção Over a year ago

It could also "event.currentTarget.files".

Jeyanth · Accepted Answer · 2019-08-06 13:34:19Z

2

Above answers are pretty sufficient. Additional to the onChange, if you upload a file using drag and drop events, you can get the file in drop event by accessing eventArgs.dataTransfer.files.

answered Aug 6, 2019 at 13:34

Jeyanth

6412 gold badges8 silver badges19 bronze badges

Collectives™ on Stack Overflow

How to get files from <input type='file' .../> (indirect) with JavaScript

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related