Jquery: Simulating a Click on a ≪Input Type="File" /≫ Doesn't Work in Firefox

jQuery : simulating a click on a input type=file / doesn't work in Firefox?

Is there a way to get this working in FF?

No, and it doesn't work in most common versions of IE, either. IE will open the dialog, but once you've selected a file with it the form won't actually submit.

Abandon hope. The only way to fake a file upload box is using the transparency technique, and that's really not recommended at all as browsers may lay out file upload boxes differently internally (or even provide a file upload control that doesn't include a Browse dialogue), making it highly likely you'll end up with an inoperable form.

Learn to love the grey file upload field, or use progressive enhancement to replace it with Flash where available.

In JavaScript can I make a click event fire programmatically for a file input element?

You cannot do that in all browsers, supposedly IE does allow it, but Mozilla and Opera do not.

When you compose a message in GMail, the 'attach files' feature is implemented one way for IE and any browser that supports this, and then implemented another way for Firefox and those browsers that do not.

I don't know why you cannot do it, but one thing that is a security risk, and which you are not allowed to do in any browser, is programmatically set the file name on the HTML File element.

Second use of input file doesn't trigger onchange anymore

Thanks to codingrhythm for leading me on the right track.

What I did was to actually just add the on("change") call again on the field.

So I only altered the clearPictureAttachment() function (called when deleting a picture) to this:

function clearPictureAttachment(){
$("#image-message").attr('value', '');    
$("#image_message_file").attr('value', '');
$("#image_message_loading").hide();
$("#image_message_upload").show();
$("#image_message_preview").hide();
//reenable the onchange to upload a picture
$("#image-message").on('change', function () {
    $('#editor-photoarea').show();
    ajaxFileUploadMessagePicture();
});
}

Thanks again!

Workaround for file input label click (Firefox)

thank you for this q&a... helped me out.

my variation of @marten-wikstrom's solution:

if($.browser.mozilla) {
  $(document).on('click', 'label', function(e) {
    if(e.currentTarget === this && e.target.nodeName !== 'INPUT') {
      $(this.control).click();
    }
  });
}

notes

using document.ready ($(function() {...});) is unnecessary, in either solution. jQuery.fn.live takes care of that in @marten-wikstrom's case; explicitly binding to document does in my example.
using jQuery.fn.on... current recommended binding technique.
added the !== 'INPUT' check to ensure execution does not get caught in a loop here:
```
<label>
  <input type="file">
</label>
```
(since the file field click will bubble back up to the label)
change event.target check to event.currentTarget, allowing for initial click on the <em> in:
```
<label for="field">click <em>here</em></label>
```
using the label element's control attribute for cleaner, simpler, spec-base form field association.

HTML input type=“file” in Google Chrome not showing popup window

There's no reason that this shouldn't work in Chrome. Have you tried copying JUST the mark up in the example you've given us into a HTML file, and opening that? Does it work? It should, unless there's some third party plugin or extension stopping it.

It may be that you have have mark up elsewhere causing this issue; perhaps a layer over the input field catching the click event before it can make it's way down to the "browse" button?

Cancel event on input type=file

A bit of research indicates that there is no way to detect when Cancel is selected in the File Selection dialog window. You can use onchange or onblur to check if files have been selected or if something has been added to the input value.

This could look like: https://jsfiddle.net/Twisty/j18td9cs/

HTML

<form>
  Select File:
  <input type="file" name="test1" id="testFile" />
  <button type="reset" id="pseudoCancel">
    Cancel
  </button>
</form>

JavaScript

var inputElement = document.getElementById("testFile");
var cancelButton = document.getElementById("pseudoCancel");
var numFiles = 0;

inputElement.onclick = function(event) {
  var target = event.target || event.srcElement;
  console.log(target, "clicked.");
  console.log(event);
  if (target.value.length == 0) {
    console.log("Suspect Cancel was hit, no files selected.");
    cancelButton.onclick();
  } else {
    console.log("File selected: ", target.value);
    numFiles = target.files.length;
  }
}

inputElement.onchange = function(event) {
  var target = event.target || event.srcElement;
  console.log(target, "changed.");
  console.log(event);
  if (target.value.length == 0) {
    console.log("Suspect Cancel was hit, no files selected.");
    if (numFiles == target.files.length) {
      cancelButton.onclick();
    }
  } else {
    console.log("File selected: ", target.value);
    numFiles = target.files.length;
  }
}

inputElement.onblur = function(event) {
  var target = event.target || event.srcElement;
  console.log(target, "changed.");
  console.log(event);
  if (target.value.length == 0) {
    console.log("Suspect Cancel was hit, no files selected.");
    if (numFiles == target.files.length) {
      cancelButton.onclick();
    }
  } else {
    console.log("File selected: ", target.value);
    numFiles = target.files.length;
  }
}


cancelButton.onclick = function(event) {
  console.log("Pseudo Cancel button clicked.");
}

I suggest making your own cancel or reset button that resets the form or clears the value from the input.

How can I remove the No file chosen tooltip from a file input in Chrome?

This is a native part of the webkit browsers and you cannot remove it. You should think about a hacky solution like covering or hiding the file inputs.

A hacky solution:

input[type='file'] {
  opacity:0    
}

<div>
    <input type='file'/>
    <span id='val'></span>
    <span id='button'>Select File</span>
</div>

$('#button').click(function(){
   $("input[type='file']").trigger('click');
})

$("input[type='file']").change(function(){
   $('#val').text(this.value.replace(/C:\\fakepath\\/i, ''))
})

Fiddle

Jquery: Simulating a Click on a ≪Input Type="File" /≫ Doesn't Work in Firefox