How to choose a file with Javascript?

Question

I am trying to create a Browser Dialog to let the user upload images to my webpage.

I know that I have to use an <input type="file"> but I do not know where (or better, when) retrieve the information when the user has accepted the prompt that appears when you click on the button.

In my case, when you click on a button, the prompt appears and I handle this event via Javascript.

Here is my code:

window.onload = function(){ 
  var buttonFile = document.getElementById("buttonFile");
  var file = document.getElementById("file");

  buttonFile.onclick = function(){
    document.getElementById("file").click();
  }

  var files = document.getElementById('file').files[0]; //I do not know where to put this line
  alert(files);
};

#file{
  display: none;
}

<input type="file" id="file" accept=".jpg, .png, .jpeg">
<button id="buttonFile">Upload file</button>

Of course, now is retrieving undefined because I am trying to retrieve it regardless if the prompt has appeared or not. If I put the line inside the onclick event of the button it also does not have the info yet. I also tried to create an onclick event for the file, but it also does not retrieve the info because it does not know when it has been accepted.

So here I have some questions:

Where should I put this line to get the value of the image that I am uploading?
As the filter of the input is not supported for old browsers, should I check it on the server side also, right?
If I want to check it on the server side (PHP), have I to link it to a form?

Thanks in advance!

Try putting document.getElementById('file').files[0] inside an onchange handler on the <input> element. — gen_Eric
– gen_Eric, Commented May 17, 2016 at 19:54
For 2 and 3: Yes. Actually I'd build this without JavaScript at first, and only when it works add some JavaScript on top of it to make it more user friendly. — GolezTrol
– GolezTrol, Commented May 17, 2016 at 19:55

A.J. · Accepted Answer · 2016-05-17 20:02:57Z

3

You've got everything right so far, except you don't need to get the value of the files until the user has uploaded them. Otherwise, it will definitely be undefined.

window.onload = function() { 
  var buttonFile = document.getElementById("buttonFile");
  var file = document.getElementById("file");

  buttonFile.onclick = function() {
    document.getElementById("file").click();
  };

  file.onchange = function(e){
     if (this.files && this.files[0]) {
        alert(JSON.stringify(this.files[0]));
     }
  };
};

1) You shouldn't put the line in the onclick handler at all. 2) You're correct in that older browsers don't check for the type. Regardless you should ALWAYS do server side validation. 3) Unless you decide to use web services.

edited May 17, 2016 at 20:02

answered May 17, 2016 at 19:57

A.J.

3931 silver badge8 bronze badges

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

1 Comment

Francisco Romero Over a year ago

Thank you very much! Exactly what I wanted! A handler for file change :)

Jon Koops · Accepted Answer · 2016-05-17 19:57:01Z

0

window.onload = function() { 
  var buttonFile = document.getElementById("buttonFile");
  var file = document.getElementById("file");

  buttonFile.onclick = function() {
    document.getElementById("file").click();
  };

  file.onchange = function() {
    alert(file.files[0].name);
  };
};

#file{
  display: none;
}

<input type="file" id="file" accept=".jpg, .png, .jpeg">
<button id="buttonFile">Upload file</button>

answered May 17, 2016 at 19:57

Jon Koops

9,4306 gold badges33 silver badges54 bronze badges

Collectives™ on Stack Overflow

How to choose a file with Javascript?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related