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-12 10:22:58Z

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, 2015 at 10:22

answered Jan 12, 2015 at 9:49

Adi

6,5001 gold badge27 silver badges37 bronze badges

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

8 Comments

Hitesh Over a year ago

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 Over a year ago

Is it possible in Java script or else I will go with Id concept

Adi Over a year ago

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.

Hitesh Over a year ago

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 Over a year ago

thanks for answer , but Is it possible to it using TAG ? .. other wise I will use getElementsByClassName. Thanks again

|

Sangram Chavan · Accepted Answer · 2015-01-12 10:34:28Z

1

This will work

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

answered Jan 12, 2015 at 10:34

Sangram Chavan

3511 silver badge9 bronze badges

1 Comment

Hitesh Over a year ago

I want it in JS not jQuery , Thanks for answer

vapcguy · Accepted Answer · 2018-04-05 00:07:46Z

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>

Collectives™ on Stack Overflow

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

3 Answers 3

8 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related