can i place an input file tag inside a button?

Question

Im currently working on having a button to upload a file, but i dont want to use the default input[type=file]

here's my snippet:

%button.btn
   Upload your own
   %input{ :type => "file", :class => 'file-input' }

and here's the css:

left: -34; // to align it with the button
top: -23;
position: relative;
opacity: 0;

currently it works, im just not sure about the markup. twitter has the same structure also when trying to upload a profile photo.

_but i dont want to use the default input[type=file]_ **Any reason??** — Nitesh, Jul 12 '13 at 08:37
a simple button that would open a file upload window when clicked, not the default input[type=file], which im trying to hide. Currently this is working, im just trying to find out if it is a valid markup — Harvey Katrina, Jul 12 '13 at 09:26
Check this link, this has best answers for your question http://stackoverflow.com/questions/793014/jquery-trigger-file-input — Shiva Avula, Jul 18 '13 at 11:36

score 2 · Answer 1 · answered Jul 12 '13 at 08:46

2

Set the opacity of the input file button to 0 and position it over the styled button div.

answered Jul 12 '13 at 08:46

Patsy Issa

that is exactly what i'm doing, im just trying to find out if this is a valid markup – Harvey Katrina Jul 12 '13 at 09:29
It is, another method would be to have your input file button positioned absolutely and out of sight and then through javascript when your fake button is pressed you click your input file button, both work as intended. @HarveyKatrina – Patsy Issa Jul 12 '13 at 09:30
i just found it that it's an invalid markup, but can i still get away with this one? – Harvey Katrina Jul 12 '13 at 09:44
hmm can you show me the source ? I v been using such techniques for a while, but instead of actual – Patsy Issa Jul 12 '13 at 09:55

score 1 · Answer 2 · answered Jul 12 '13 at 08:42

1

Why don't you just use:

<button type='file'>Content</button>

It works the same.

answered Jul 12 '13 at 08:42

[It really doesn't](http://jsfiddle.net/U9cjM/), in my testing. – David Thomas Jul 12 '13 at 08:46

score 0 · Answer 3 · answered Jul 12 '13 at 08:57

0

Try this

Select a file: <input type="file" name="img">

more details Here

answered Jul 12 '13 at 08:57

Ajay

3 Answers3