Trying to make a custom file upload button. Turns out, it's not as simple to change the look as you'd think with most
input tags. So I've found this solution using the
before selector. However, as this current method does not display the name of the selected file, I need a way to do that.
input[type="file"]::-webkit-file-upload-button{ visibility:hidden;width:0;height:0;}
input[type="file"]{font-size:30px !important;background:none !important;}
input[type="file"]::before{
content: 'Select an image';
display: inline-block;
background: -webkit-linear-gradient(top, #f9f9f9, #e3e3e3);
border: 1px solid #999;
border-radius: 3px;
outline: none;
white-space: nowrap;
-webkit-user-select: none;
cursor: pointer;
text-shadow: 1px 1px #fff;
font-size: 40px;
margin:auto auto;
text-align:center;
line-height:80px;
width:624px;
height:80px;border:0;border-radius:40px;
margin-left:-24px;
}
Here's the html code:
<input name="uploaded_file" id="uploaded_file" type="file" onchange="thing()"/>
And what I have so far for the js function, which so far only gets the name of the selected file.
function thing(){
var t = document.getElementById("uploaded_file");
var f = t.files[0].name;
}
I haven't quite figured out how I can select that pseudo-element so I can update it's content to display the file name. Since it has no name or ID. Any suggestions?
"I like offending people, because I think people who get offended should be offended." - Linus Torvalds
