How to get files from (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, Apr 03 '13 at 15:28
You need to use the `onchange` event of the `` element. `return _el_upload.files` happens *before* you select a file. — gen_Eric, Apr 03 '13 at 15:30
hi @RocketHazmat thx for reply : i am tring to make my own UI in my CMS and i have problem with design ; i dont want to see a textbox nearby a button named "file upload" — Shamshirsaz.Navid, Apr 03 '13 at 15:41
Possible duplicate of http://stackoverflow.com/questions/2048026/open-file-dialog-box-in-javascript. — Ray Nicholus, Apr 03 '13 at 15:49
@RayNicholus : Consider the Alert : When Alert is called, the code will be stopped, to Alert end ; i want this for "INPUT FILE DIALOG". — Shamshirsaz.Navid, Apr 03 '13 at 16:08
**onchange** not working or I do not know how to do it? I use it as a callback function. — Shamshirsaz.Navid, Apr 03 '13 at 16:11
It's really hard to understand what you are trying to do here. — Ray Nicholus, Apr 03 '13 at 16:12
Maybe its because i'm not english and I cant explain what I mean :D — Shamshirsaz.Navid, Apr 03 '13 at 16:18
its Invert [http://stackoverflow.com/questions/12830058/ie8-input-type-file-get-files?rq=1] — Shamshirsaz.Navid, Apr 03 '13 at 16:23

score 94 · Accepted Answer · edited May 23 '17 at 12:34

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.

score 24 · Answer 2 · answered Jun 14 '19 at 04:17

24

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 '19 at 04:17

Kevin Chandra

675
1
9
16

2

It could also "event.currentTarget.files". – Luís Assunção Feb 27 '20 at 11:32

score 1 · Answer 3 · answered Aug 06 '19 at 13:34

1

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 06 '19 at 13:34

Jeyanth

531
2
6
19

How to get files from (indirect) with JavaScript

3 Answers3

Linked

Related