I have an input which is hidden:
<input class="hidden" id="imageInput" type="file" accept="image/*;capture=camera" />
The way this gets "clicked" is that have a label which calls a function like this:
<label onclick="verifyValue(); return false;" class="hand-pointer">Click me!</label>
And my verifyValue() function looks like this:
function verifyValue() {
app.ajax({
type: "POST",
dataType: 'json',
url: myUrl + '/DoSomeVerification',
contentType: 'application/json; charset=utf-8',
cache: false,
data: JSON.stringify(myData),
success: function (result) {
//Success? Cool, stuff has been verified
//Let's let them upload their image
$('#imageInput').click();
}
error: {
//Other stuff that's not relevant
}
});
}
My issue is that the $('#imageInput').click(); does not work. When I debug through it, it makes it to that line, and then does absolutely nothing. I get no errors, no dialog to upload a file or anything.
To test that it wasn't some other aspect of my code I got rid of the AJAX post and simplified that function down to the click event. When I get rid of the AJAX post it works like a charm.
Additionally if I do something like this instead of .click():
$('#pickTicketImageUpload').removeClass('hidden');
It shows the input with the Choose File button, and lets me click it and upload a file.
I'm wondering if this is some sort of browser security feature or if there is something else that I am missing. If it is some sort of security feature is there anyway around it?
Also it should be mentioned so that no one gets hung up on it, that this is an internal application and I'm not at all worried about the fact that someone could hijack this and upload their image without doing the AJAX post.
