Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 10 down vote favorite
3

Instead of using the <input type="file"> tag I'd like to have a button that launches a file browser dialog.

My first thought was to have a hidden file input tag and a button. I'd use the button click on the button to fire the onclick of the hidden file input, but I haven't been able to get this working properly.

So the question is, is this even possible? And second is there a nicer way to do this and still be able to send the information back in a form?

This will be the bottom layer of degrading functionality (from Flash to JavaScript (our site doesn't work without JS)) so it has to work with just basic JS and HTML.

share|improve this question

3 Answers

up vote 9 down vote

Yes, it's possible (in most browsers) via opacity. Here's a tutorial.

share|improve this answer
1  
Note that this is a security issue and action may be taken to prevent this in future browsers. – eyelidlessness Oct 16 '08 at 17:30
Possible? Yes. Recommended? No. Security issue? Definitely. – Kon Oct 16 '08 at 17:34
I've checked this out and it doesn't do quite what I want it to. And with the potential security/deprecation issues I won't be using it. Thanks for the response though. – user28655 Oct 16 '08 at 23:21
How is this a security issue? It simply allows you to control the presentation of the file selection UI widget. It still depends on the user's action. – Brenden Oct 18 '11 at 2:28
It's called clickjacking and can be used to make people click on things like invisible Facebook Like buttons. – ceejayoz Oct 18 '11 at 3:32
up vote 1 down vote

I've done this (see ceejayoz' answer) in the past, but now recommend against it. It is a security issue and can't be relied upon for the future. A much better solution is to progressively enhance your upload form so that the file input is replaced with a Flash- or Java-based uploader with more features (or use better features in HTML 5 if they become available).

share|improve this answer
Before using flash or a java applet you should always use the plain form. – Jan Jan 23 at 10:28
@Jan, that's what I said in my answer: "progressively enhance" means that you begin with the plain HTML and enhance it on the client side (JS, Flash, whatever) after load. – eyelidlessness Jan 24 at 15:44
up vote 1 down vote

Instead of trying to hack the browser's file input control, I'd suggest using a flash based file uploader like SWFUpload. I've started using this in one of my projects and have been VERY pleased with it.

You get javascript callbacks and you can do anything you want for a UI (the flash is just the uploading functionality).

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.