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

@PeeHaa: He probably wants help in making jQuery work with MooTools so a question tagged jquery is not that strange at all :) — pimvdb
– pimvdb, Commented Aug 7, 2011 at 17:05

Halcyon · Accepted Answer · 2011-08-07 17:11:59Z

3

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)

answered Aug 7, 2011 at 17:11

Halcyon

57.7k10 gold badges93 silver badges131 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Rafael Sedrakyan Over a year ago

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

Halcyon Over a year ago

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.

Spudley Over a year ago

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

Rafael Sedrakyan Over a year ago

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

Halcyon Over a year ago

Then why are you even bothering with Opera? :D

|

Pavel Perminov · Accepted Answer · 2013-05-04 00:08:36Z

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>

answered May 4, 2013 at 0:08

Pavel Perminov

1,5062 gold badges10 silver badges7 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:59:55Z

2

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?

edited May 23, 2017 at 11:59

CommunityBot

11 silver badge

answered Aug 7, 2011 at 17:01

pimvdb

155k80 gold badges313 silver badges357 bronze badges

1 Comment

Rafael Sedrakyan Over a year ago

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

EscapeNetscape · Accepted Answer · 2015-10-03 00:24:15Z

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

David Weisser · Accepted Answer · 2021-02-15 20:48:02Z

0

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

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

where reset_upload() is a jQuery function.

answered Feb 15, 2021 at 20:48

David Weisser

3262 silver badges12 bronze badges

Comments

score -2 · Accepted Answer · 2011-08-07 17:39:19Z

-2

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

edited Aug 7, 2011 at 17:39

answered Aug 7, 2011 at 17:32

user882255

2 Comments

Rafael Sedrakyan Over a year ago

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

Mahi Over a year ago

how could it click for file element ?

Collectives™ on Stack Overflow

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

6 Answers 6

6 Comments

Comments

1 Comment

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

6 Comments

Comments

1 Comment

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related