Question:
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, only the input
shrinks a bit but it does not show me a preview at least of the name of the file you have 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 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>
Answer:
Apparently wtf forms
uses a <span class="file-custom></span>
to generate its own skin for input
of type file.
Let's say the input
is completely phantom and wtf forms
overwrites it with its span
.
In the documentation they clarify the reason for this. http://wtfforms.com/
Heads up! The custom file input is currently unable to update the Choose file… text with the filename. Without JavaScript, this might not be possible to change, but I'm open to ideas.
I leave you my solution. Basically I've added a data-after
property to the span
, this property is being listened to by the CSS
content
property, so that when the data-after
property changes the content
property will also change.
Espero que esto solucione tu problema.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible"
content="ie=edge">
<title>Document</title>
<link
href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/wtf-forms.css">
<style>
*,
*: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;
}
.file-custom::after {
content: attr(data-after);
}
</style>
</head>
<body>
<label class="file">
<input type="file"
id="file"
onchange="fileChoose(event,this)"
aria-label="File browser example">
<span class="file-custom"
data-after="Choose file..."></span>
</label>
</body>
<script>
function fileChoose(event, element) {
if (event.target.files.length > 0) {
element.nextElementSibling.setAttribute('data-after', event.target.files[0].name);
}
}
</script>
</html>