javascript – Show that a file was uploaded in the file input

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>
Post Views: 5
Scroll to Top