Getting value from <input type='file'> returns empty string

Question

I am making a portlet and have a file uploader there. I should get the name of the file that is uploaded by the means of js.

The HTML code:

<form id="theuploadform" onsubmit = "javascript:setTimeout('fileupload_ajax_query_upload_status', 1000);"; action=<portlet:resourceURL/> method="post" enctype="multipart/form-data" encoding="multipart/form-data" target="postiframe">
    <input id="userfile" name="userfile" size="50" type="file" /> 
    <input id="formsubmit" type="submit" value="Upload to server" onclick="handleUploadDialogClose2();" />
</form>

And the js part:

function handleUploadDialogClose2() {
    var filepath = document.getElementById("userfile").value;
    alert(filepath);
}

I select a file to upload, click "Upload to server" button and check the value of input element - it is empty. But I saw quite similar code in the other questions here and it worked.
What should I do to get it work?

Am I doing something wrong?

Answer 1

This should work:

function handleUploadDialogClose2() {
  var filepath = document.getElementById("userfile").files[0];
  console.log(filepath);
}

working example: js.bin

Answer 2

You may try removing the semi-colon after the onsubmit attribute in the form. It should not be like:

onsubmit = "javascript:setTimeout('fileupload_ajax_query_upload_status', 1000);"; 

But should be like:

onsubmit = "javascript:setTimeout('fileupload_ajax_query_upload_status', 1000);"

You may also create a separate function which calls setTimeout() rather than putting the function call in the attribute.

Hope this helps you get the issue sorted!