Display file name after upload

Question

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.

Nikhil Aggarwal · Accepted Answer · 2015-07-18 11:37:36Z

4

You need to update from

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

to

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

answered Jul 18, 2015 at 11:37

Nikhil Aggarwal

28.5k4 gold badges46 silver badges61 bronze badges

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

2 Comments

RaviTej310 Over a year ago

But then, "image1" is displayed. Suppose i upload image.jpg, i need image.jpg to be displayed.

Nikhil Aggarwal Over a year ago

No, it will display the file with extension.

Vitalii Petrychuk · Accepted Answer · 2015-07-18 12:29:17Z

3

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;
}

edited Jul 18, 2015 at 12:29

answered Jul 18, 2015 at 12:06

Vitalii Petrychuk

14.3k8 gold badges54 silver badges55 bronze badges

Collectives™ on Stack Overflow

Display file name after upload

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related