Learners, we all know that it is not the same time when you have to apply for an exam you have to fill the form, where you have to manually fill out the form, paste your beautiful picture, and then you have to physically deploy it at the office of collection.

But this is the old scenario,  Now we can fill online at the official site. In this way, we save lots of time.

So, Learners, I’m not here to compare the time and make you count on the situations.

I’m telling you because you might have observed the online form structure, or even you have filled out this. So in the form, there is some section where you need to upload your photos and other crucial documents.

So when you click on the upload button the internal file system of your device gets accessed after that you can see all photos and documentation and you select the required one from it. This is our Custom submission button.

Hey learners..!

Welcome to our today’s blog with code with random. In this blog, we gonna learn how we can design the Custom File Upload Button with the help of html,css, and javascript.

Although here we are designing this custom button if you will click on the button it will access your internal file manager and after selecting any file it will preview its name there.

10+ HTML CSS Projects For Beginners with Source Code

Without any further ado, let’s get it into.

HTML Code For Custom File Upload Button

In this section here we have a div with class file-upload under this there is input with class file and button with placeholder choose file. Then we have a vacant span with class file-upload_label.

Go through the below code and run it in your IDE or where you used to design just HTML without CSS styling.

<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>

CSS Code For Custom File Upload Button

In the CSS section, we will design our custom submission button and will center it by position flex.
In the body section, we will add a picture by URL. We will set the button hover effect as the color changes.

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

Then our main focus is our text changing in span next to the button. These are the main focus of designing.

The Below code will analyze you more. So just add in your HTML half-complete file and wait to watch some magic.

body{
background: no-repeat center url("https://i.postimg.cc/VLTVtKwp/image.jpg");
background-size: cover;
}
.file-upload {
display: flex;
justify-content:center;
align-items: center;
font-size: 15px;
}
.file-upload__input {
display: 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: "Quicksand", 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;
font-family: "Quicksand", sans-serif;
}

JavaScript Code For Custom File Upload Button

By javascript, we will place a text in an empty span as no file is uploaded.

With DOM manipulation when you will click on choose file button, it will show you the internal file system if you will choose any file the name of the file is placed over no file upload.

Restaurant Website Using HTML And CSS With Source Code

This is the main function of our javascript code.

Add the below code with your HTML and CSS file and observe the functionality.

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";
// Set default text for label
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(", ") || defaultLabelText;
label.title = label.textContent;
});
}
);

If you want a live preview of the project that you have designed till now. Have look below

Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)

Final Output Of Custom File Upload Button