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.

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.

• javascript
• html

2 Answers 2

You need to update from

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

to

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

You are looking for something like this I guess

// Access first file from the input. More details:
// https://developer.mozilla/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;
}