0

I'm using a script which replaces the usual file upload input with whatever image you want and then with JS makes sure that an invisible 'browse' button is underneath the mouse pointer whenever the mouse is moved over the image you want to use.

It works in ie7 ie8 ie9 Firefox, Safari, Chrome but not on Opera. On Opera the regular file input appears.

I know there are loads of scripts which do similar things, but either they are too complicated for me to figure out how to use them (eg uploadify) or they do similar things but just not as well - like making the custom image the same size as the file input would be (there's issues with that too).

Here's the script I'm using - there's not much to it

How come it doesn't work in Opera. Is there anyway to fix it? This is perfect for what I want apart from not working in Opera.

user229044
  • 232,980
  • 40
  • 330
  • 338
crazy sarah
  • 611
  • 4
  • 13
  • 29
  • The reference http://shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom you give says, that it does not work for Opera. And there is a comment in the page how to fix it, search for Opera. The library is from 2007, so a little bit outdated. – mliebelt Oct 29 '11 at 12:50
  • @mliebelt thanks for the reply. I saw that it said it didn't work for opera but didn't think the solution was posted. Do you mean: if (some_element.style.opacity !== undefined) {works} <-- this bit? If so where would I stick that? I'm totally new :) – crazy sarah Oct 29 '11 at 14:12
  • When I look at the [source code](http://shauninman.com/assets/examples/styling-file-inputs/si.files.js), I see the line that begins with `if (window.opera || (ie && ie < 5.5)`... I would try to just remove the part `window.opera ||` and try it again. – mliebelt Oct 29 '11 at 14:22
  • Hi there, thanks again. If I remove that it does appear like you said but the 'browse' button is visible on top of the image when you mouse over :( – crazy sarah Oct 29 '11 at 15:35
  • This isn't a valid question for Stack Overflow. You need to include the script you're using in the question, not just a link to it. – user229044 Aug 07 '12 at 18:14

2 Answers2

1

I have played a little bit with your example (SI.Files and example) and tried to find the reason why it does not work (well) in Opera. Here is the result of my "research":

  • The check if (window.opera ||... is the reason why the functionality is blocked at all. If you remove that ...
  • You get then a moving image of the (formerly) hidden button, that overlays your image you want to show.
  • If you remove the function elem.parentNode.onmousemove = function(e) {...} completely, the button will not shown, but too, no cursor is shown in Chrome, ... and in Opera, as cursor you see now the bar cursor for an input field.
  • If you press then the "button", the function for the download dialog is called.

Perhaps you should have a look at the question "Styling an input type=“file” button" with the references to working solutions there:

Community
  • 1
  • 1
mliebelt
  • 15,345
  • 7
  • 55
  • 92
  • Thanks, I'll take a look at your suggestion. Thanks for taking the time to have alook at it for me :) – crazy sarah Oct 29 '11 at 17:25
  • hey, sorry only replying now, I was drinking. Your suggestion works but breaks in IE7, 8 & 9 unfortunately, where it just seems to be a text input you could type into (except you can't type into it). I had read those articles you linked to but I'm not sure they solve my problem? But I might be miss-understanding them, I'm still a little drunk :) – crazy sarah Oct 30 '11 at 13:43
1

Interesting case, shows an Opera layout bug I wasn't aware of: if a file input with opacity set to 0 is moved so that the text area part of the input is outside of the parent, the input will become visible. I will report a bug for this issue and follow up.

To work around this and make the script work, you can do this:

  1. First remove or alter the Opera sniffing that disables the script. Find this:

    if (window.opera ||

    and remove window.opera || .

  2. Add a small workaround that will change the positioning of the file input and avoid placing it so far to the left that the text area part is hidden and opacity is ignored. Before this:

    this.file.style.left = x - (w - 30) + 'px';

    Add this line:

    if(window.opera && parseFloat(opera.version())>11.50 && (x-(w-30)<0))w=w/2;

I've limited that to run only in Opera, and only in 11.50 and greater. The reason is that most older Opera versions do not open the file dialog if you click the "text input" part. In Opera versions less than 11.50 you will thus get the buggy display (but the functionality will work).

I hope this helps you work around the bug. Whether it is future-proof I have no idea. The file input might see some changes in the future.

hallvors
  • 6,069
  • 1
  • 25
  • 43