ADVERTISEMENT

Custom File Upload Button Using HTML,CSS & JavaScript

Telegram Group Join Now

ADVERTISEMENT

Custom File Upload Button Using HTML, CSS & JavaScript

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.

ADVERTISEMENT

ADVERTISEMENT

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.

ADVERTISEMENT

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.

ADVERTISEMENT

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.

Custom File Upload Button Using HTML,CSS & JavaScript
Custom File Upload Button Using HTML,CSS & JavaScript

 

Hey learners..!

ADVERTISEMENT

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

ADVERTISEMENT

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

ADVERTISEMENT

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.

ADVERTISEMENT

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

ADVERTISEMENT

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.

ADVERTISEMENT

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.

ADVERTISEMENT

Restaurant Website Using HTML And CSS With Source Code

ADVERTISEMENT

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

By this blog… We have learned how we can design custom submission buttons.
Now I’m looking for your reviews.
So, How was the blog, Learners?
Portfolio Website Using HTML ,CSS ,Bootstrap and JavaScript

If you want a more crisp blog like this then please check our Blogs sites CodewithRandom. keep tuned with us because every day you will learn something new here.

I hope that I’m able to make you understand this topic and you have learned something new from this blog. If you faced any difficulty feel free to drop a comment down your problems and if you liked it, please show your love in the comment section. This fills blogger hearts with enthusiasm for writing more and new blogs.

You can follow me on Instagram 

Written by @Ankit kumar

ADVERTISEMENT

Telegram Group Join Now

Share on:

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT