Trying to get file from input returns Object Error in IE8

Question

I already searched for the specific error but couldn't really come up with a lot of useful information. The code in question returning the error is below.

JS:

var files = document.getElementById("file").files;
for (var i = 0; i < files.length; i++)
    document.getElementById("filename").value = files[i].name;
    document.getElementById("filename").setAttribute('value', files[i].name);
    document.getElementById("filename") = document.getElementById("filename");

HTML:

    <form action="../interface/upload.php" method="post" enctype="multipart/form-data">
      <span class="btn btn-default btn-file btn-lg btn-block">
          <i class="glyphicon glyphicon-file fileinput-exists"></i> Browse File <input type="file" id="file" onchange="getfile()" name="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
          <input id="filename" type="text" class="btn" value="No file choosen" disabled="true">
      </span>
      <input type="submit" name="submit" value="Upload" class="btn btn-primary btn-lg btn-block">
    </form>

The goal is to display the name of the selected file in the "filename" input.

For some reason this returns me the following error in IE8

ERROR / IE8:

Message: 'length' is Null or not an Object
Line: 4
Character: 18
Code: 0
URI: http://localhost/assets/js/filechooser.js

Fix

function getfile(evt)
{
  var filename = evt.value;
  filename = filename.split('\\').pop();
  document.getElementById("filename").value = filename;
}

Where's your HTML? Have you attempted to [debug your JavaScript](http://stackoverflow.com/questions/988363/how-can-i-debug-my-javascript-code) — Liam, Apr 22 '14 at 14:00
added html, yes i did debug the js (code on the bottom is the error message from IE) — user3513936, Apr 22 '14 at 14:04

score 4 · Answer 1 · answered Apr 22 '14 at 14:39

4

IE9 and older do not support the File API. As a result, there is no files property at all, and multiple-selection of files is not possible. You only have access to the file name via the value property on the file input.

answered Apr 22 '14 at 14:39

Ray Nicholus

19,538
14
59
82

Okay, Thank you for your answer I guess I'll need to find a fix for this. – user3513936 Apr 23 '14 at 07:55
The only "fix" is to use flash or java, neither of which I recommend. – Ray Nicholus Apr 23 '14 at 12:37

G. Stoynev · Accepted Answer · 2014-04-22T14:30:22.473

-1

When you only have one single element returned by document.getElementById("file").files, file doesn't have length. Protect for this special case, and also for all cases that return nothing.

EDIT:

since you clarified that you always have one file element, the following may work for you:

<form action="../interface/upload.php" method="post" enctype="multipart/form-data">
      <span class="btn btn-default btn-file btn-lg btn-block">
          <i class="glyphicon glyphicon-file fileinput-exists"></i> Browse File <input type="file" id="file" onchange="getfile(this)" name="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
          <input id="filename" type="text" class="btn" value="No file choosen" disabled="true">
      </span>
      <input type="submit" name="submit" value="Upload" class="btn btn-primary btn-lg btn-block">
</form>


<script language="javascript">
function getfile(evt)
{
  alert(evt.value);
  document.getElementById("filename").value = evt.value;
}
</script>

Please note the onchange="getfile(this)" edit I made to your HTML.

edited Apr 22 '14 at 14:30

answered Apr 22 '14 at 14:01

G. Stoynev

7,389
6
38
49

In my specific use-case there is always a single element returned. Can you give me an example how you'd alter the code? – user3513936 Apr 22 '14 at 14:07
@user3513936 `Message: 'length' is Null or not an Object` kind of tells us otherwise. – Daniel Apr 22 '14 at 14:38
1

There is never a `files` property in IE8 (or IE9 and older), as there is no `FileList` since these browsers do not implement the File API. – Ray Nicholus Apr 22 '14 at 14:40
I added the fix I ended up using in my initial post. I added .split('\\') so I ended up with only the filename without the path/fakepath – user3513936 Apr 23 '14 at 08:13

Trying to get file from input returns Object Error in IE8

JS:

HTML:

ERROR / IE8:

Fix

2 Answers2