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

Seale

Why have you added the jquery tag if you cannot use it? – Internee

@PeeHaa: He probably wants help in making jQuery work with MooTools so a question tagged jquery is not that strange at all :) – Dhobi

Answer 1

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?

Dhobi

You were right about jquery code :) but I made it in the way described in the link you posted. Thanks a lot for help. – Seale

Answer 2

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)

Jakoba

jsfiddle.net/sSSNj/159 check this link and you will see that you can have your own styled upload button :) – Seale

Yes, but you're using a visibility:hidden hack. I think it's only due to the benevolence of browsers that it works, and apparently it doesn't in Opera. – Jakoba

+1 because this is true. input type=file is very vulnerable to hacking, and is thus quite locked down in its features. Yes, there are hacks that work in most browsers to style it, but they are just that: hacks, written to get around the security limitations. And there's every possibility that they'll stop working in future browser versions if they tweak the security. – Koller

I made it by giving to file element opcity=0 and z-index=1 and replacing it over my button. now I don`t need call() function. so I can finaly say that you can hav your own styled upload button and that does not matter that I used a trick to make it :) – Seale

Then why are you even bothering with Opera? :D – Jakoba

My past solution was setting files width to 1 px and set visibility to hidden and make file clicked when styled button is clicked. But now I hav just placed file behinde my button, set width to buttons width, opacity 0 and z-index 1. So if someone clicks on the button click is executed for file because it is placed in front of button. – Seale

Answer 3

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>

Tessy

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

Protamine

Answer 5

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

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

where reset_upload() is a jQuery function.

Goddaughter

Answer 6

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. :>

Schouten

Thansk. I have already made it in the way you described 10 minutes ago. – Seale

how could it click for file element ? – Escent