Browse and select files from user hard drive gives undefined in IE

Question

when I use my input button to browse for the file on the user computer it works on FF, IE9 and Chrome. But when I am passing the files to the JS function in IE9 I get undefined, while it works perfectly in FF and Chrome.

 <form id="uploadForm" style='display:none;padding:1px;' method="post" enctype="multipart/form-data">
 <input type="file" name="data" id="inFile" size="15" style="display:none" onchange="handleFiles(this.files)"/>


function handleFiles(files){
//doing something with the files
}



 //In IE files is undefined

I have also tried to use

    dojo.connect(dojo.byId("uploadForm").data, "onchange", function(evt){
        handleFiles(this.files);
    });

<form id="uploadForm" method="post" enctype="multipart/form-data">
<input type="file" name="data" id="inFile" size="15" style="display:none"/>

This.files comes undefined again

thanks

I have tried this: http://stackoverflow.com/questions/3279997/cant-access-form-element-in-ie-because-it-is-undefined-works-ok-in-ff-and-ch?rq=1 But it did not work! — setlio, Aug 17 '12 at 01:55

phusick · Answer 1 · 2012-08-19T21:31:43.193

6

IE9 does not support multiple files upload and it does not have files property. You will have to rely on value property and parse a filename from the path it provides.

My solution:

Pass this instead of this.files into handleFiles() function:
```
<input type="file" onchange="handleFiles(this)">
```

Start your handleFiles() function like this:

function handleFiles(input){
    var files = input.files;
    if (!files) {
        // workaround for IE9
        files = [];            
        files.push({
            name: input.value.substring(input.value.lastIndexOf("\\")+1),
            size: 0,  // it's not possible to get file size w/o flash or so
            type: input.value.substring(input.value.lastIndexOf(".")+1)
        });
    }

    // do whatever you need to with the `files` variable
    console.log(files);
}

See working example at jsFiddle: http://jsfiddle.net/phusick/fkY4k/

edited Aug 19 '12 at 21:31

answered Aug 19 '12 at 21:24

phusick

7,342
1
21
26

I have tried it, but since I can’t use the FileReader() how would I read the file. – setlio Aug 19 '12 at 23:00
1

Well, you cannot and will have to wait for IE10 to get [the FileReader API support](http://caniuse.com/#feat=filereader). According to [this post](http://stackoverflow.com/questions/6710432/ie-and-local-file-reading) you can use `ActiveX' FileSystemObject`. See [Working with Files](http://msdn.microsoft.com/en-us/library/czxefwt8(v=vs.85).aspx) at MSDN. I use `FileReader` just to preview images while uploading, and so I simply do not preview when the client appears to be IE (and also Safari before the latest 6.0). – phusick Aug 20 '12 at 08:32

score 0 · Answer 2 · edited May 23 '17 at 12:17

0

Well obviously files is not defined in IE. See here for how to do it with IE.

edited May 23 '17 at 12:17

Community

1
1

answered Aug 19 '12 at 19:04

Ridcully

23,362
7
71
86

do you know how to write it without the jquery? – setlio Aug 19 '12 at 20:51
Well according to the code of the linked answer, in IE you just use input itself to access the file, instead of input.files, so in your code is should suffice to do `onchange="handleFiles(this)"`. However, I'm not sure if this will work for multi-selections too. – Ridcully Aug 20 '12 at 18:08
1

Also note, that you'll have to do some browser-detection to use the correct code working for each browser. – Ridcully Aug 20 '12 at 18:14
1

After two days of research and trying all the suggested above, IE9 will not support file reading, and even if I extract all attributes like suggested, there is no way I can read the file. For now I will just notify the users to use Chrome or FF, and when the IE10 is out, the code will work anyway. Thanks for trying to help. – setlio Aug 20 '12 at 23:22

Browse and select files from user hard drive gives undefined in IE

2 Answers2

Linked