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);
});

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);
});

• javascript
• jquery
• triggers
• click
• file-io

• Why have you added the jquery tag if you cannot use it? – PeeHaa Commented Aug 7, 2011 at 17:02
• @PeeHaa: He probably wants help in making jQuery work with MooTools so a question tagged jquery is not that strange at all :) – pimvdb Commented Aug 7, 2011 at 17:05

6 Answers 6

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)

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>

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?

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);      
    }

Hmm...this works for me. In Chrome.

<input type='file' id='csvfile'  onclick='reset_upload()'  /> 

where reset_upload() is a jQuery function.

It's impossible to click that button using JavaScript (like friends have said) but see this:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Lorem ipsum</title>
    </head>
    <body>
        <input type="file" id="first" style="width:200px; background-color:red">
        <input type="file" id="second" style="width:200px; background-color:green; position:relative; left:-100px; opacity:0">
        <script>
            document.getElementById("first").onchange = function(){alert("first")}
            document.getElementById("second").onchange = function(){alert("second")}
        </script>
    </body>
</html>

You can do something like that. Only problem is that you have to know dimensions of these inputs. Hm... Maybe it's not problem. You can set dimensions. :>