Accessing value of javascript file input variable

Question

I am trying to get the filepath of the selected file. Using the debugger, I see that the file has an property called value which is equal to : "C:\fakepath\filename.txt".

However when I try to access file.value, the filepath is equal to null.
I am using Java 8, Struts 1.2, Jsps, and Chrome Javascript:

function validateFile(file)
{
    filepath = file.value; /*This is null*/
    return true; 
}

Html:

<input type="file" id="theFile[0]" onChange="validateFile(this)"/>

You aren't trying to set the value property of anything in that example that I can see. Are you sure that's the right code for the error? — Quentin
– Quentin, Commented May 12, 2016 at 18:08
I agree with the above comment. Try changing onChange to validateFile(this) and instead of function validateFile(fileid) use function validateFile(file). Remove the variable declaration for var file also. — Jonathan Gray
– Jonathan Gray, Commented May 12, 2016 at 18:10
@Quentin filepath = file.value when var file = ... was set isn't an attempt to set the value property with filepath? — 8protons
– 8protons, Commented May 12, 2016 at 18:10
@8protons, Cannot set property 'value' means something basically did undefined.value = ... there is no code in the example that does that — Patrick Evans
– Patrick Evans, Commented May 12, 2016 at 18:12
@Quentin you are right. The .value is for another part of the code. My apologies. The value of filepath is just null. — Turtle
– Turtle, Commented May 12, 2016 at 18:12

F. Hauri - Give Up GitHub · Accepted Answer · 2016-05-12 18:45:42Z

2

Try this:

function validateFile(fileinput) {
    var allowed = "pdf,png";
    var filepath=fileinput.value;
    var ext = filepath.substr(filepath.lastIndexOf('.')+1);
    if (filepath = "" || allowed.search(ext) <= -1) {
        fileinput.value='';
        alert('Invalid file type');
        return false;
    }
}

<input type="file" id="inputFile" onChange="validateFile(this)"/>

edited May 12, 2016 at 18:45

answered May 12, 2016 at 18:28

F. Hauri - Give Up GitHub

72.9k19 gold badges136 silver badges154 bronze badges

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

2 Comments

Turtle Over a year ago

Thank you for your answer. However, I just fixed the problem using Jonathan's answer.

Jonathan Gray Over a year ago

I have also +1'd this answer as it would have in fact fixed the issue.

Jonathan Gray · Accepted Answer · 2016-05-12 18:39:55Z

1

I guess it wasn't too much work after all :)

function validateFile(file)
{
    filepath = file.value;
    document.getElementById('result').innerText = filepath;
    return true; 
}

<input type="file" onChange="validateFile(this)"/>
<div id="result">[result will be here]</div>

answered May 12, 2016 at 18:39

Jonathan Gray

2,60919 silver badges20 bronze badges

Collectives™ on Stack Overflow

Accessing value of javascript file input variable

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