Custom File Upload Button | Html Style Custom File Upload Button







Custom File Upload Button | Html Style Custom File Upload Button

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 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 about the situations 😁. 
I’m telling because you might have observed the online form structure, or even you have filled 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 get 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 same custom submission button.

Although here we are designing this custom button as 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.


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

HTML SECTION 

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

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

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 SECTION 

By javascript, we will pace 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.

This is the main function of our javascript code.

Add this 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 your project that you have designed till now πŸ˜€. Have look belowπŸ‘‡

 

See the Pen Custom File Upload by Ankit kumar (@Kumar-Ankit56) on CodePen.


By this blog… We have learned how we can design custom submission button.

Now I’m looking for your reviews.
So, How was the blog 😁, Learners!

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

Share on:

Leave a Comment