Problem using click() on input[type=file]

Question

I'm having a problem with the click() functon. It does not work in Opera.

I am trying to make a input type=file clicked on onclick event of another element. I need to style my input type=file element so I made it invisible and replaced it with simple styled button. Now I want file element to be clicked when button is clicked.

I can't use jQuery because I am using the MooTools library for a calendar in my page and it makes conflict when I try to use jQuery. I also tried to avoid the conflict using jQuery.noConflict(); but I could not do it because I am new to jQuery. Here is my html code:

<input name="myfile" id="uploadme" type="file" style="visibility:hidden; width:1px;" onchange="this.form.submit()"/>
<input type="button" id="clickme" onclick="show_upload()"/>

And here is my JavaScript code:

function show_upload()
{
    document.getElementById('uploadme').click();
}

I also tried this jQuery code but I could not make it work without conflict with the MooTools library:

jQuery.noConflict();
(function($){
    $('#clickme').click(function($){
        $('#uploadme').click();
    })(jQuery);
});

Answer 1

input[type=file] is very peculiar input type, you can't really do a whole lot with it, primarily for security reasons.

I'm guessing here, but do you perhaps want you own styled upload button? In that case I must disappoint you, you can't do it with HTML. You'll either have to use HTML5 or Flash (like SWFUpload)

Answer 2

It's an Opera bug, but there is possibility to get the result by a different way, using <label> tag:

<input type="file" id="file" style="position: absolute; visibility: hidden;">
<label for="file" id="file-label"></label>
<a onclick="$('#file-label').click()">Browse..</a>

Answer 3

I'm not sure for the input click (it might just be impossible due to security reasons), but your jQuery code is not completely correct.

jQuery.noConflict();

(function($){
    $('#clickme').click(function(){ // The $ is not necessary - you already have it
        $('#uploadme').click();
    }); // You should remove (jQuery) because you don't want to call the function here
})(jQuery); // you need (jQuery) to actually call the function - you only defined the function

Anyway, this answer says you cannot do what you want in Opera: In JavaScript can I make a "click" event fire programmatically for a file input element?

Answer 4

it's not impossible:

var evObj = document.createEvent('MouseEvents');
evObj.initMouseEvent('click', true, true, window);  
setTimeout(function(){ document.getElementById('input_field_id').dispatchEvent(evObj); },100);

But somehow it works only if this is in a function which was called via a click-event.

So you might have following setup:

html:

<div onclick="openFileChooser()" class="some_fancy_stuff">Click here to open image chooser</div>
<input type="file" id="input_img">

JavaScript:

    function openFileChooser() {
      var evObj = document.createEvent('MouseEvents');
      evObj.initMouseEvent('click', true, true, window);  
      setTimeout(function()
      { 
        document.getElementById('input_img').dispatchEvent(evObj);      
      },100);      
    }