7

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);
});
pimvdb
  • 151,816
  • 78
  • 307
  • 352
Rafael Sedrakyan
  • 2,541
  • 10
  • 34
  • 42

6 Answers6

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>
Pavel Perminov
  • 1,506
  • 2
  • 10
  • 7
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)

Halcyon
  • 57,230
  • 10
  • 89
  • 128
  • http://jsfiddle.net/sSSNj/159/ check this link and you will see that you can have your own styled upload button :) – Rafael Sedrakyan Aug 07 '11 at 17:14
  • 1
    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. – Halcyon Aug 07 '11 at 17:19
  • 2
    +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. – Spudley Aug 07 '11 at 17:30
  • 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 :) – Rafael Sedrakyan Aug 07 '11 at 17:42
  • Then why are you even bothering with Opera? :D – Halcyon Aug 07 '11 at 17:53
  • 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. – Rafael Sedrakyan Aug 08 '11 at 07:07
2

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);      
    }
EscapeNetscape
  • 2,892
  • 1
  • 33
  • 32
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?

Community
  • 1
  • 1
pimvdb
  • 151,816
  • 78
  • 307
  • 352
0

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

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

where reset_upload() is a jQuery function.

David Weisser
  • 117
  • 1
  • 10
-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. :>