Styling an input type= file button
Styling file inputs are notoriously difficult, as most browsers will not change the appearance from either CSS or javascript.
Even the size of the input will not respond to the likes of:
<input type="file" style="width:200px">
Instead, you will need to use the size attribute:
<input type="file" size="60" />
For any styling more sophisticated than that (e.g. changing the look of the browse button) you will need to look at the tricksy approach of overlaying a styled button and input box on top of the native file input. The article already mentioned by rm at www.quirksmode.org/dom/inputfile.html is the best one I've seen.
UPDATE
Although it's difficult to style an <input>
tag directly, this is easily possible with the help of a <label>
tag. See answer below from @JoshCrozier: https://stackoverflow.com/a/25825731/10128619
How to customize input type= file ?
You can’t modify much about the input[type=file]
control itself.
Since clicking a label
element correctly paired with an input will activate/focus it, we can use a label
to trigger the OS browse dialog.
Here is how you can do it…
label { cursor: pointer; /* Style as you please, it will become the visible UI component. */}
#upload-photo { opacity: 0; position: absolute; z-index: -1;}
<label for="upload-photo">Browse...</label><input type="file" name="photo" id="upload-photo" />
Change default text in input type= file ?
Each browser has it's own rendition of the control and as such you can't change either the text or the orientation of the control.
There are some "kind of" hacks you may want to try if you want an html/css solution rather than a Flash or silverlightsolution.
http://www.quirksmode.org/dom/inputfile.html
http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom
Personally, because most users stick to their browser of choice, and therefore are probably used to seeing the control in the default rendition, they'd probably get confused if they saw something different (depending on the types of users you're dealing with).
Styling of the input type file not working
We cannot do much customization of the file input. But you have options like below.
Note: I have used Bootstrap for some classes as your code is using it. But if you want you can have custom classes as well.
One disadvantage is that the select file information is also hidden. If you want that you can get that using JavaScript and show below the button.
input[type='file'] {
width: 0;
height: 0;
overflow: hidden;
opacity: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<label>
<input id="Image" type="file" class="form-control-image" name="image_reference">
<span class="btn btn-primary">File button</span>
</label>
<br />
<br />
<button class="btn btn-primary form-control-image">Submit</button>
Hide the browse button on a input type=file
No, what you can do is a (ugly) workaround, but largely used
- Create a normal input and a image
- Create file input with opacity 0
- When the user click on the image, you simulate a click on the file input
- When file input change, you pass it's value to the normal input (so user can see the path)
Here you can see a full explanation, along with code:
http://www.quirksmode.org/dom/inputfile.html
Vue - File input element's @change not triggered when its files are set using ref - drag and drop file upload
onChange
event of input type files will not trigger on dropEnd
.
Instead you have to modify your current onChange
method. So that you use the same code for drop end.
Update your onFileSelect
method like this:
onFileSelect(e) {
console.log("came here");
const file = e.target.files[0];
uploadFile(file) // this method will be responsible for uploading file to server. Move all code written in onFileSelect to this method.
}
Now on DropEnd, simple call this method with file parameter.
onDrop(e) {
uploadFile(e.dataTransfer.files[0])
},
Second use of input file doesn't trigger onchange anymore
Thanks to codingrhythm for leading me on the right track.
What I did was to actually just add the on("change") call again on the field.
So I only altered the clearPictureAttachment() function (called when deleting a picture) to this:
function clearPictureAttachment(){
$("#image-message").attr('value', '');
$("#image_message_file").attr('value', '');
$("#image_message_loading").hide();
$("#image_message_upload").show();
$("#image_message_preview").hide();
//reenable the onchange to upload a picture
$("#image-message").on('change', function () {
$('#editor-photoarea').show();
ajaxFileUploadMessagePicture();
});
}
Thanks again!
Related Topics
How to Make a Fieldset Legend-Style "Background Line" on Heading Text
What's the Maximum Pixel Value of CSS Width and Height Properties
Difference Between Body and * in CSS
Display:Inline Resets Height and Width
How to Make CSS A:Active Work After the Click
Zebra Striping a Table with Hidden Rows Using CSS3
How to Render Multiple Columns with Markdown in Github Readme
Sass @Each Variable Interpolation
Build List of Selectors with Less
Bootstrap 4 Navbar and Content Fill Height Flexbox
Input Height Differences in Firefox and Chrome
Is @Page { Size:Landscape} Obsolete
Css: Clean Solution to the Margin Collapse Issue When Floating an Element
Next.Js Global CSS Cannot Be Imported from Files Other Than Your Custom <App>