Labeling File Upload Button

Labeling file upload button

Pure CSS solution:

.inputfile {  /* visibility: hidden etc. wont work */  width: 0.1px;  height: 0.1px;  opacity: 0;  overflow: hidden;  position: absolute;  z-index: -1;}.inputfile:focus + label {  /* keyboard navigation */  outline: 1px dotted #000;  outline: -webkit-focus-ring-color auto 5px;}.inputfile + label * {  pointer-events: none;}

<input type="file" name="file" id="file" class="inputfile"><label for="file">Choose a file (Click me)</label>

How to design a custom file upload button such that the label changes when file is uploaded

Very quickly cobbled together using vanilla Javascript ~ essentially if there are multiple file input elements and you want the same functionality for each then you would want to obtain a reference to the nodelist collection ( querySelectorAll will return a nodelist ) and, for each one, assign a change event handler.
Using a combination of parentNode and previousElementSibling you can identify the span element and modify it quite easily.

The actual uploading of the file could be handled by the change handler and modifications to the DOM done as a result of this.

    document.querySelectorAll('input[type="file"]').forEach( input=>{
        input.addEventListener('change',function(e){
            this.parentNode.previousElementSibling.textContent=this.value.match(/([^\/\\]+)$/)[1];
            this.parentNode.textContent='Uploading...';
        });
    });

<form method='post' enctype='multipart/form-data'>
    <span>Select your file</span>
    <label for='file-upload'>Browse<input type='file' /></label>
</form>

<form method='post' enctype='multipart/form-data'>
    <span>Select your file</span>
    <label for='file-upload'>Browse<input type='file' /></label>
</form>

Custom File Upload button to show file name using JavaScript

.querySelectorAll() returns a NodeList, not a single element. Substituted .closest() for .querySelectorAll() to select closest ancestor <label> element to the current <input type="file"> element. Since the <input type="file"> element is the child of the <label> setting .innerHTML to the file name would overwrite the <input type="file"> element. The CSS does not display a <span> element that is first child of the <label>, added the <span> to display file name as .nextElementSibling of <label> element. You can use e.target.files[0].name to get the file name.

var inputs = document.querySelectorAll('.wpcf7-file');
Array.prototype.forEach.call(inputs, function(input) {  input.addEventListener('change', function(e) {    var label = e.target.closest('.custom-file-button');    label.nextElementSibling.innerHTML = e.target.files[0].name;  });});

label.custom-file-button {  position: relative;}
label.custom-file-button:before {  content: " Take or upload picture";  position: absolute;  left: 0;  padding: 10px;  background: #1b87d5;  color: #fff;  width: auto;  text-align: center;  border-radius: 5px;  cursor: pointer;}
label.custom-file-button:hover:before {  background: #146bac;}
.custom-file-input {  visibility: hidden;}

<div class="limit-to-view">  <label class="wpcf7-form-control-wrap custom-file-button">      <span class="wpcf7-form-control-wrap custom-file-input">        <input type="file" name="custom-file-input" size="40" class="wpcf7-form-control wpcf7-file" accept=".jpg,.jpeg,.png,.gif,.pdf,.doc,.docx,.ppt,.pptx,.odt,.avi,.ogg,.m4a,.mov,.mp3,.mp4,.mpg,.wav,.wmv" aria-invalid="false">      </span>    </label>    <span></span></div>

How to style the Search Computer File Upload button for eMail Contact Form 7?

Although it's difficult to style a file input itself due to browser compatibility, you can instead apply styling to its label to achieve the same result.

Take a look at this example input:

<label for="fileInput">
    Upload file
</label>
<input id="fileInput" type="file">

Because the label is directly linked to the input, it will open the file browser once you click on either the label or the input. Since that's the case, you can hide the input itself and only display the label.

<style>
input[type="file"] {
    display: none;
}
</style>

Now that you're left with only the label, you can apply styling to the element to make it look more like a button instead of a label. Take a look at this basic example of CSS you could use to style the label.

<style>
label[for="fileInput"] {
    border: 1px solid black;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}
</style>

Here's what you'll end up with after hiding the input and add styling to the label. Of course, this is just a basic example, but there are almost no limits to what you can achieve through CSS, so you could style the label any way you'd like.

Sample Image

Putting it all together, the final code for this implementation will look something like the following:

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

label[for="fileInput"] {
  border: 1px solid black;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
}

<!doctype html>
<html>

<head>
  <title>File upload styling</title>
</head>

<body>
  <form method="post">
    <label for="fileInput">
    Upload file
</label>
    <input id="fileInput" type="file">
  </form>
</body>

</html>

Labeling File Upload Button