CODEWITHSUNDEEP
javascriptjquery
Dariel Pratama
Dariel Pratama

Reputation: 1675

trigger click on input file

i have this mark up

<div id="wrapper">
    <input type="file" id="file" accept="image/*" capture="camera">
    <a href="#" id="capture">Submit Cleanup</a>
</div>

and jQuery as follow

jQuery(function($){
    $('#capture').on('click', function(e){
        e.preventDefault();
        $('#file').trigger('click');
    });
});

the script works as expected on PC browser, but when i try on mobile device the camera doesnt prompt. also i already tried using click(), but same result.

what could be the problem?

Upvotes: 13

Views: 42764

Answers (3)

SSA
SSA

Reputation: 5493

It's a security feature. Some browsers don't allow a non-manual click on file inputs. You can read more about it here and here.

Why isn't it possible to programmatically trigger the file input selection?

Most browsers prevent submitting files when the input field didn't receive a direct click (or keyboard) event as a security precaution. Some browsers (e.g. Google Chrome) simply prevent the click event, while e.g. Internet Explorer doesn't submit any files that have been selected by a programmatically triggered file input field. Firefox 4 (and later) is so far the only browser with full support for invoking "click"-Events on a completely hidden (display: none) file input field.

Upvotes: 18

SynCap
SynCap

Reputation: 6294

<label>
<input type="file" name="myfile" accept="application/pdf" id="myfile" style="display:none">
CLICK HERE!
</label>
<br>
<a href="javascript:document.querySelector('input#myfile').click()">OR HERE</a>

Upvotes: 8

Arun P Johny
Arun P Johny

Reputation: 388316

In most browsers( 

jQuery(function($){
    $('#capture').on('click', function(e){
        e.preventDefault();
        $('#file')[0].click();
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrapper">
    <input type="file" id="file" accept="image/*" capture="camera">
    <a href="#" id="capture">Submit Cleanup</a>
</div>

Upvotes: 10

Related Questions