Jquery Trigger File Input

trigger click on input file

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.

How to trigger click on input file element by clicking on another element

For the security reasons some browsers don't allow to trigger file input directly.
The action to open the dialog box MUST be called by a user interaction (a click for instance) AND the input file MUST be visible (display != none) and focused.

You can show to open dialog and after hide like this:

getAcceptedExtension = function() {  $('#inputFile').attr('accept', '.jpg, .png');  $('#inputFile').show();  $('#inputFile').focus();  $('#inputFile').click();  $('#inputFile').hide();}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><button type="button" id="uploadBtn" onclick="getAcceptedExtension()"title="Upload" class="">CLICK ME</button><input type="file" name="" id="inputFile" multiple="multiple"style="display: none;" >

Trigger file-input explorer when element is selected in dropdown

In the Template.Name.js file, you need to trigger a change event on the select tag.

Template.Name.events({
    'change #performaction' : function(event, template){
        event.preventDefault();
        $('input[type=file]').click();
    }
});

And if selection specific implementation, then you can use as below;

Template.Name.events({
    'change #performaction' : function(event, template){
        event.preventDefault();
        var selection = event.target.value;
        if(selection == "uploadStudents"){
            // your specific input file trigger like 
            // $('input[type=file]').click();
        }

    }
});

jQuery drop and trigger input type file

Actually, some browsers won't allow event trigger on the input: file, Click event will work only, when it comes directly from the user.

But alternative is there to do this, refer it here Jquery trigger file input

jquery trigger: how can I trigger the browse file in the input when I click on a text link?

You can't use style="display:none;" use style="visibility:hidden;"

and I changed trigger to click:

$('.upload').click(function(){
    $('input[type=file]').click();
    return false;
});

Reasoning:

The input fields will not be sent to the server with display:none, but will be with visibility:hidden.

Trigger click on input=file on asynchronous ajax done()

Its not possible right now to open a file popup window from an async ajax callback due to w3c recommended security features in the browsers.

In the file input element's activation behavior it first checks if the algorithm is allowed to show a popup, if not then abort the next steps without doing anything else. from w3c.org

An algorithm is allowed to show a popup if any of the following conditions is true:

The task in which the algorithm is running is currently processing
an activation behavior whose click event was trusted.(trusted events : Events that are generated by the user agent, either as a result of user interaction, or as a direct result of changes to the DOM, are trusted by the user agent with privileges that are not afforded to events generated by script through the DocumentEvent.createEvent("Event") method, modified using the Event.initEvent() method, or dispatched via the EventTarget.dispatchEvent() method. The isTrusted attribute of trusted events has a value of true, while untrusted events have a isTrusted attribute value of false.
otherwise. http://www.w3.org/TR/2012/WD-DOM-Level-3-Events-20120614/#trusted-events.)
The task in which the algorithm is running is currently running the
event listener for a trusted event whose type is in the following
list:
- change
- click
- dblclick
- mouseup
- reset
- submit
The task in which the algorithm is running was queued by an
algorithm that was allowed to show a popup, and the chain of such
algorithms started within a user-agent defined timeframe.

w3c.org

In your code the click event is not triggered by the user but its triggered by the ajax complete callback. Here the browser declares that the event cannot be trusted to open a popup. In some browsers you can see an isTrusted attribute set to true if the event is declared as trusted.https://developer.mozilla.org/en-US/docs/Web/API/Event/isTrusted

Note

Different browsers trap the difference between a script activated cick and a real user using different methods.

What you can do in this scenario is to disable the file input button(or the entire form) and enable after ajax is done. That way the user wont click on the upload button until the ajax request gets completed. As of now there is no other way to do both in one click since there is a timeframe limit also for opening popup. When I checked in chrome the timeframe is 1000ms. 1000ms after the user action, window will not get opened.