<body background ="https://i.postimg.cc/qqs3k5JS/DSC-0087-3.jpg">
<h1> Custom File Upload Button</h1>
<div class="file-upload">
<input class ="file-upload__input" type="file" name="myFile[]" id="myFile" multiple>
<button class="file-upload__button" type="button"> Choose File(s)</button>
<span class="file-upload__label"></span>
</div>
h1{
color: white;
text-align: center;
}
.file-upload{
display: inline-flex;
align-items: center;
font-size: 15px:
}
.file-upload__input{
dislplay: none;
}
.file-upload__button{
-webkit-appearance: none;
background: #009879;
border: 2px solid #00745d;
border-radius: 4px;
outline: none;
padding: 0.5em 0.8em;
margin-right: 15px;
color: #ffffff;
font-size: 1em;
font-family: sans-serif;
font-weight: bold;
cursor: pointer;
}
.file-upload__button:active{
background: #00745d;
}
.file-upload__label{
max-width: 250px;
font-size: 0.95em;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
}
Array.prototype.forEach.call(document.querySelectorAll('.file-upload__button'), function(button){
const hiddenInput = button.parentElement.querySelector('.file-upload__input');
const label = button.parentElement.querySelector('.file-upload__label');
const defaultLabelText = 'No file(s) selected';
label.textContent = defaultLabelText;
label.title = defaultLabelText;
button.addEventListener('click', function(){
hiddenInput.click();
});
hiddenInput.addEventListener('change', function(){
const filenameList = Array.prototype.map.call(hiddenInput.files, function(file){
return file.name;
});
label.textContent = filenameList.join()
});
})
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.