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

by

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:

  1. 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.)

  2. 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
  3. 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.

More Related Contents:

  1. jQuery find events handlers registered with an object
  2. Best way to remove an event handler in jQuery?
  3. jQuery Event : Detect changes to the html/text of a div
  4. jQuery table sort
  5. How to force a html5 form validation without submitting it via jQuery
  6. How can I animate multiple elements sequentially using jQuery?
  7. how to change a selections options based on another select option selected?
  8. jquery $(window).height() is returning the document height
  9. jquery – Click event not working for dynamically created button [duplicate]
  10. Ajax request with JQuery on page unload
  11. wait for a jquery ajax callback from calling function
  12. How can I use jQuery.load to replace a div including the div
  13. Order of execution of jquery document ready
  14. Disable specific days of the week on jQuery UI datepicker [duplicate]
  15. Unobtrusive Ajax stopped working after update jQuery to 1.9.0
  16. Removing file from multiple files uploader on button click when using HTML5 file input
  17. jquery callback after all images in dom are loaded?
  18. How to trigger $().ready() in jQuery?
  19. Jquery condition check is(‘:hover’) not working
  20. jQuery $.animate() multiple elements but only fire callback once
  21. iOS Safari – How to disable overscroll but allow scrollable divs to scroll normally?
  22. Selecting text on focus using jQuery not working in Safari and Chrome
  23. Apply CSS to jQuery Dialog Buttons
  24. Fire event on enter key press for a textbox
  25. TypeError: $(…).parents(…).size is not a function
  26. JQuery Star Rating [closed]
  27. jQuery Chosen plugin add options dynamically
  28. Creating templated/persistant header/footer template in jQuery Mobile and PhoneGap
  29. jQuery: check if element has CSS attribute
  30. Regex validation for numbers with comma separator

Leave a Comment