trigger click on input file

Question

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?

Answer 1

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.

Answer 2

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>