I am using jQuery and Ajax on a button, to update the value of attribute "accept" on an input file upload element, then trigger click on it. But I can only do it on Firefox. On Chrome, the trigger click event doesn't work, and on IE8, it works but cannot upload the selected file. What should I do? This is my code in handleAjaxResponseSuccess function:

$('#inputFile').attr('accept', '.jpg, .png');
$('#inputFile').click();
//in Firefox and IE8, it shows a file dialog that allows choosing file to upload. But in Chrome, the file dialog does not appear, and in IE8, the selected file cannot be uploaded

My HTML code

<button type="button" id="uploadBtn" onclick="getAcceptedExtension()"title="Upload" class=""></button>
<input type="file" name="" id="inputFile" multiple="multiple"style="display: none;" >

I am using jQuery and Ajax on a button, to update the value of attribute "accept" on an input file upload element, then trigger click on it. But I can only do it on Firefox. On Chrome, the trigger click event doesn't work, and on IE8, it works but cannot upload the selected file. What should I do? This is my code in handleAjaxResponseSuccess function:

$('#inputFile').attr('accept', '.jpg, .png');
$('#inputFile').click();
//in Firefox and IE8, it shows a file dialog that allows choosing file to upload. But in Chrome, the file dialog does not appear, and in IE8, the selected file cannot be uploaded

My HTML code

<button type="button" id="uploadBtn" onclick="getAcceptedExtension()"title="Upload" class=""></button>
<input type="file" name="" id="inputFile" multiple="multiple"style="display: none;" >

• javascript
• jquery
• html
• file-upload

• On Chrome, the trigger click event doesn't work this is by design. You cannot fake events on file inputs for security reasons in some browsers. accept only works in IE10 and above, and not in Edge at all. See MDN patibility table: developer.mozilla/en-US/docs/Web/HTML/Element/… – Rory McCrossan Commented Nov 21, 2017 at 10:27
• I can see this. Is there any solution for this case? – omglolgg Commented Nov 21, 2017 at 10:31
• Not reliably, no. Even if there is, it's likely to be broken by future browser updates. You need to create your UI so that the user must initiate the fie open dialog – Rory McCrossan Commented Nov 21, 2017 at 10:32
• So you mean that the user have to directly click on the input file, right? – omglolgg Commented Nov 21, 2017 at 10:33
• Yes, that's right – Rory McCrossan Commented Nov 21, 2017 at 10:33

2 Answers 2

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./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;" >

one basic and easy way would be this:

$('#b1').on('click',function(){
    alert("button #1 is clicked");
    $('#b2').click();
});
$('#b2').on('click',function(){
    alert("button #2 is clicked");
});

Jsfiddle: https://jsfiddle/vf65pzhj/1/