CODEWITHSUNDEEP
javascripthtml
RaviTej310
RaviTej310

Reputation: 1715

Display file name after upload

I have a file upload option like so.

<input type="file" name='image1' id='image1'>

then, i have a button which onclick, runs the function addphotos(). Para is the id of a paragraph.

function addphotos() {
document.getElementById("para").innerHTML=document.getElementById("image1").text;
}

Now, when we upload a file, a filename is displayed. e.g. picture.png I want to print this filename in the position of the paragraph. The above function is not working. How can we do this. It is also okay if we can store this filename in a javascript variable.

Upvotes: 2

Views: 3820

Answers (2)

Vitalii Petrychuk
Vitalii Petrychuk

Reputation: 14255

You are looking for something like this I guess

// Access first file from the input. More details:
// https://developer.mozilla.org/en/docs/Using_files_from_web_applications
var file = document.getElementById('image1').files[0];

// Process only if file is valid (uploaded)
if (file) {

  // Access file name
  file.name;
}

Upvotes: 3

Nikhil Aggarwal
Nikhil Aggarwal

Reputation: 28475

You need to update from

document.getElementById("para").innerHTML=document.getElementById("image1").text;

to

document.getElementById("para").innerHTML=document.getElementById("image1").name;

Upvotes: 4

Related Questions