I am using the following code to upload information to my site, but when I upload the file it does not show me the preload that the file is ready to be sent, input
it just shrinks a little but it does not show me a preview at least of the file name file that is preloaded.
Any suggestions for it to show me the file name once I upload it before I hit submit? I guess I have to do it with JavaScript, I'm currently learning Vue.
I'm doing this (as I show in this JSFiddle ):
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0;
padding: 2rem 1.5rem;
font: 1rem/1.5 "PT Sans", Arial, sans-serif;
color: #5a5a5a;
}
<link rel="stylesheet" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/wtf-forms.css" />
<label class="file">
<input type="file" id="file" aria-label="File browser example">
<span class="file-custom"></span>
</label>
Apparently it
wtf forms
uses a<span class="file-custom></span>
to generate its own skin for theinput
file type.Let's say the
input
is completely phantom andwtf forms
you overwrite it with yourspan
.In the documentation they clarify the reason for this. http://wtfforms.com/
I leave you my solution. Basically I have added a property
data-after
tospan
, this property is listening to the propertycontent
ofCSS
, in such a way that when the property changes, the property willdata-after
also changecontent
.I hope this solves your problem.