Show the amount of files uploaded at the right of an input

i am creating a form with a input=file, my problem is that when i added CSS to this, the number of files updated dissapear, i know that is because i put display=none in the CSS, but i need them to appear, or people won’t know the file uploaded correctly, is there a way to make this? i prefer without ussing JS if possible. Thanks

here is my code

HTML

  <div>
      <label for="file-upload" class="custom-file-upload mt-2"><i class="fas fa-cloud-upload-alt"></i> Upload[enter image description here][1]</label>
      <input id="file-upload" type="file" name="file" multiple="multiple" required>
  </div>

CSS

input[type="file"] {
display: none;
}
.custom-file-upload {
    border: 1px solid #ccc;
    border-radius: 30px;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}

and here is an image of what it look, i need to put the amount of uploaded files at the right of the “button” or any message really when a file is uploaded.

Answer

As you said, it – this is the problem. Just remove this part of the CSS. If this is not the desired solution please explain what i have misunderstood and please further specify your question.

input[type="file"] {
display: none;
}

If you look for further manipulation of the image upload button – here you can find some ideas and demos. Here How to hide default choose file button

Please note: As this a standard file selector without AJAX – the user has just selected 2 files BUT these have NOT been UPLOADED to the server. This will usually only when the user klicks on submit. (or you push them up with AJAX) Then the files get uploaded and ONLY THEN they are saved on the server and you could display that the files if if everything is ok (file size, file type, network connection…) then they are uploaded sucessfully. With AJAX you could upload them immediately and on callback change the appeareance of the file input (or the plugins will do this for you) but thats definitely JS.