Making a font-icon a file upload button - html

How would I go about making a font-awesome icon like the faCamera accept fileUpload, basically make the font awesome icon into an input div with type file. Ive placeholder on the input div but it doesnt really work.
What I have
<input placeHolder={faImage} type='file' accept="image/*" onChange={handleFileSelect}</input>
<FontAwesomeIcon type="file" icon={faImage}></FontAwesomeIcon>

Related

Change input to button without touching js

i have html input when enter number and press enter it will change the image size
<input type="text" size="2" id="change-width">
now i want to turn the input into button or a icon when press it will change the image size like input did.the function is with the id name but i dont want to change stuff there.
is there anyway i could do this by only html and wont touch any js ?
i already tried
<button type="submit" value="25" id="change-width">A4 size</button>

Bootstrap Browse File Button Style

I have a question. I have a bootstrap input with type of file:
Html code:
input id="fileUpload" class="form-control" name="FileUpload" multiple="" type="file"
However it turns out to be that the "browse" button is being cropped. I would like to ask if it is possible or how to change the size of the "browse" button using html or css.
<input id="fileUpload" name="FileUpload" multiple="" type="file" />
If you would like to keep your fileupload as button please look at this
Twitter Bootstrap Form File Element upload button

HTML customize a button of the type file

I have this button
Here is the code of this button
<input type="file" value="Upload" id="fileToUpload">
My question: Can i customize this button? Change the text inside the button to "Upload" and not "Durchsuchen...". And if i choosed a file, is on the right side the name of the file, i dont like it. Can i remove the name?

File upload css issue

I want to have a file upload using php. my problem simple in the CSS I make:
<input name="ufile" type="file" id="ufile" size="50" />
it just show the browse button.
I want to have like a text box with the browse button to show the file address after upload it.
I know that :
<input name="ufile" type="file" id="ufile" size="50" />
will show the text box as will as the browse button but I tried it on firefox and chrome nothing showed just the button not text box. does anybody have any idea about that? why the text box is not shown???
I've tested your html above and it worked in Firefox and IE 9. My guess is that you have some CSS within your webpage that is affecting the file input. You could try use Firebug of developer tools in Chrome to inspect the input to see what css rules are being applied.

How to style a file upload?

In firefox it looks like a text field that you click on and i just need a button like safari renders..Is there a way to not display the text field looking file upload in firefox
Asked many times before:
How can I style a file input field in Firefox?
Styling an input type="file" button
How to style "input file" with CSS3 / Javascript?
https://stackoverflow.com/questions/3984815/jquery-best-way-to-style-a-input-file-tag
Can we change <input type="file"> style?
Style of input=File as a button