0

I have a form with a upload photo input on it. I wanted to have it so that people clicked an image and the browse folder dialog box would come up. So off I went this morning looking for how to do this.

So now I know that for security reasons this isn't as easy as I might have hoped. However, apparently you can make an image which is about the same size and the input field would be, set it at the same position as the input and set the inputs opacity to zero.

That's all very nice but there's an issue in IE7 where you can type directly into the text field of a file input. Also you're limited to having an image which is the same size as those inputs.

I was excited to find another solution which using the same idea you can have an image of any size and then with JavaScript make it so that the browse button appears (invisibly) behind the mouse pointer whenever the user mouses over the image.

However, I've just found out this solution doesn't work for Opera. And I've no idea why.

I've been at this all day and can't think of any other words to Google about this. Can anyone tell me how to fix this for opera or even if there's a similar solution (where you can have an image 95x95px) around?

user229044
  • 232,980
  • 40
  • 330
  • 338
crazy sarah
  • 611
  • 4
  • 13
  • 29
  • 1
    Try the solution [here](http://stackoverflow.com/questions/210643/in-javascript-can-i-make-a-click-event-fire-programmatically-for-a-file-input/3030174#3030174) and see if it works. – Dave Newton Oct 28 '11 at 18:10
  • @Dave: The problem is that trying to account for a 95px height is difficult when the control itself is only ~20px high. – Brad Christie Oct 28 '11 at 18:17
  • @Dave hi and thanks for the suggestion. I had a go but as Brad pointed out it doesn't seem to allow me to make the button image 93x97. Any way around that? – crazy sarah Oct 28 '11 at 22:55

1 Answers1

1

I would look in to uploadify. It's probably a little over-the-top for such a "simple" task, but it gives you all those freedoms and more (like multiple file upload ability if that matters).

The hard part is that the only real standard every browser agreed on, with regards to file uploads, is they need to click something, select a file, and have it upload on submit. Beyond that (size, color, method, etc.) is really on the browser developers.

The other thing you may be able to do is make the code browser-based. If it works (via the second method) on everything but opera, may want to stick with it then have JS intervene and default to the 0% opacity method when it is opera).

Unfortunately, I don't know what other options you have though.

Brad Christie
  • 100,477
  • 16
  • 156
  • 200
  • May or may not matter to the OP, but it's probably worth pointing out that uploadify does include some Flash. See also [this question](http://stackoverflow.com/questions/4960718/great-uploader-like-uploadify-but-with-a-no-flash-fallback). – eaj Oct 28 '11 at 18:29
  • @eaj: Indeed, it is flash-based, but because of that it lends a lot more flexibility to being customized. – Brad Christie Oct 28 '11 at 18:36
  • Of course, I didn't mean to discount it just because of Flash. I just thought it worth mentioning because I think it's important to keep user requirements in mind--not that you'd be likely to need to support an iOS device on a site doing file uploads. – eaj Oct 28 '11 at 20:30
  • @Brad Hey there, thanks for the suggestion. I've fiddled about with it for a bit but I'm new to JS and found it a little confusing, there isn't too many great examples for implementing it that I understand. Also Iknow nothing of flash so that makes it a little scary. I don't suppose you have any idea why the solution in my OP doesn't work on Opera? – crazy sarah Oct 28 '11 at 22:37