CODEWITHSUNDEEP
javascriptfile-upload
Mishigen
Mishigen

Reputation: 1261

Get the filename of a fileupload in a document through JavaScript

var fu1 = document.getElementById("FileUpload1");

How can I get the filename of the fileupload control with id FileUpload1?

Upvotes: 40

Views: 201749

Answers (7)

Mohamed Thasin ah
Mohamed Thasin ah

Reputation: 11192

To get only uploaded file Name use this,

fake_path=document.getElementById('FileUpload1').value
alert(fake_path.split("\\").pop())

FileUpload1 value contains fake path, that you probably don't want, to avoid that use split and pop last element from your file.

Upvotes: 27

rickatech
rickatech

Reputation: 551

Using code like this in a form I can capture the original source upload filename, copy it to a second simple input field. This is so user can provide an alternate upload filename in submit request since the file upload filename is immutable.

    <input type="file" id="imgup1" name="imagefile">
      onchange="document.getElementsByName('imgfn1')[0].value = document.getElementById('imgup1').value;">
    <input type="text" name="imgfn1" value="">

Upvotes: 4

vanessen
vanessen

Reputation: 1260

In google chrome element.value return the name + the path, but a fake path. Thus, for my case I used the name attribute on the file like below :

function getFileData(myFile){
   var file = myFile.files[0];  
   var filename = file.name;
}

this is the call from the page :

<input id="ph1" name="photo" type="file" class="jq_req" onchange="getFileData(this);"/>

Upvotes: 62

DavidHyogo
DavidHyogo

Reputation: 2898

RaYell, You don't need to parse the value returned. document.getElementById("FileUpload1").value returns only the file name with extension. This was useful for me because I wanted to copy the name of the file to be uploaded to an input box called 'title'. In my application, the uploaded file is renamed to the index generated by the backend database and the title is stored in the database.

Upvotes: 3

RaYell
RaYell

Reputation: 70404

Try document.getElementById("FileUpload1").value this value should have a path for a file to be uploaded, just strip all dirs from that value and you will have file name.

Upvotes: 3

Adriaan Stander
Adriaan Stander

Reputation: 166336

Try

var fu1 = document.getElementById("FileUpload1").value;

Upvotes: 1

SLaks
SLaks

Reputation: 887245

Try the value property, like this:

var fu1 = document.getElementById("FileUpload1");
alert("You selected " + fu1.value);

NOTE: It looks like FileUpload1 is an ASP.Net server-side FileUpload control.
If so, you should get its ID using the ClientID property, like this:

var fu1 = document.getElementById("<%= FileUpload1.ClientID %>");

Upvotes: 49

Related Questions