How to get the fileName in javascript from input file tag in IE browser

Question

I have done this in jQuery, to get filename from input file tag, With jQuery it works perfectly.

//jQuery('input[type=file]').on('change', prepareUpload);

document.getElementsByTagName('input[type=file]').addEventListener('change',prepareUpload1,true);

/*
//this works in jQuery 

function prepareUpload(event)
{
  var files = event.target.files;
  var fileName = files [0].name
alert(fileName);
}

*/

/****Check it here ****/

// it does not work in javascript 


function prepareUpload1(event)
{
  var files = event.target.files;
  var fileName = files [0].name
alert("fileName 2 : "+fileName);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" />

But I found Event.target does not work in IE, I tried to change it to java script addeventlistener, it did not work.

It throws error

Uncaught ReferenceError: input is not defined

It is working in jQuery but it is not working in JS, Due to IE issue I need to change it to JS.

Can some one help

Adi · Accepted Answer · 2015-01-12T10:22:58.803

12

I found the problem to be in getElementsByTagName method, you use this when you have a group of elements with the same tag name.

Try this code below, it works

//HTML
<input id="inp" type="file" />


// JavaScript
document.getElementById('inp').addEventListener('change',prepareUpload,false);

function prepareUpload(event)
{
  var files = event.target.files;
  var fileName = files[0].name;
  alert(fileName);
}

Below is the code if you want to do it for more than one element

<body>
<input type="file" class="input"/>
<input type="file" class="input"/>
<input type="file" class="input"/>
<input type="file" class="input"/>

<script>
var inputArray = document.getElementsByClassName('input');

for(var i = 0; i < inputArray.length; i++){
    inputArray[i].addEventListener('change',prepareUpload,false);
};

function prepareUpload(event)
{
    var files = event.target.files;
    var fileName = files[0].name;
    alert(fileName);
}
</script>
</body>

edited Jan 12 '15 at 10:22

answered Jan 12 '15 at 09:49

Adi

5,560
1
24
37

I have multiple input file tag and want to use it for all input file tag , like how I used in jQuery `jQuery('input[type=file]').on('change', prepareUpload);` – Hitesh Jan 12 '15 at 09:55
Is it possible in Java script or else I will go with Id concept – Hitesh Jan 12 '15 at 09:55
I suggest you go with jQuery for convenience sake but if you want to really learn how to work with `getElementsByTagName`, here's how you could do it. `getElementsByTagName` returns an array so then you can loop over the array to set an `eventListener` to each element, and you are good to go. – Adi Jan 12 '15 at 10:00
Read the question please, I have already done it in jQuery, The reason I am trying it in java script, because event.target is not working in IE – Hitesh Jan 12 '15 at 10:07
thanks for answer , but Is it possible to it using TAG ? .. other wise I will use `getElementsByClassName`. Thanks again – Hitesh Jan 12 '15 at 10:24
it throws error in IE 9 `Unable to get property '0' of undefined or null reference` for this line `fileName = files[0].name;` – Hitesh Jan 12 '15 at 13:09
Take a look at http://stackoverflow.com/questions/10813494/javascript-html5-jquery-drag-and-drop-upload-uncaught-typeerror-cannot-read question it might have some answer – Adi Jan 12 '15 at 13:23
@Hitesh You wouldn't want to run through all your inputs at 1 time with any single function. You should do file processing each time a file is added to the input. You could add listeners to each input & have it all point to the same function-that would be the same thing as your jQuery, but it is still processing it one at a time, per change event. The code in this answer is correct for all but IE simply because IE doesn't like `event.target` - you need something like `if (window.navigator.userAgent.indexOf("MSIE ") > 0) { var files = event.srcElement.files; var name = files[0].name; }` – vapcguy Apr 04 '18 at 23:50

score 1 · Answer 2 · answered Jan 12 '15 at 10:34

1

This will work

var fileName = $("input[type='file']").val().split('/').pop().split('\\').pop();

answered Jan 12 '15 at 10:34

Sangram Chavan

331
1
9

I want it in JS not jQuery , Thanks for answer – Hitesh Jan 12 '15 at 11:39

score 0 · Answer 3 · answered Apr 05 '18 at 00:07

The code above is correct for all but IE simply because IE doesn't like event.target - you need event.srcElement: https://developer.mozilla.org/en-US/docs/Web/API/Event/srcElement

So something like this should sort that out:

var files;

if (window.navigator.userAgent.indexOf("MSIE ") > 0) ? 
    files = event.srcElement.files :
    files = event.target.files;

I couldn't make that work in the "Run Snippet" thing SO has, though, so here's how you can just get it using another button:

document.getElementById('myBtn').addEventListener('click', function() { 
   doUpload(); 
});

function doUpload()
{
    var myFile = myInput.files[0];
    // can also use var myFile = document.querySelector('input').files[0];
    var fileName = myFile.name;
    alert(fileName);
}

<input id="myInput" type="file" />
<button id="myBtn">Try Me</button>

How to get the fileName in javascript from input file tag in IE browser

3 Answers3

Linked