HomeCSSCustom File Upload Button

Custom File Upload Button

Hey everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to create a custom file upload button. To build this button, we need HTML, CSS and Javascript.
 
This is an intermediate-level javascript project. If you are looking for more such tutorials to improve your javascript skills, you can check out this playlist here.
 
This playlist contains about 100+ javascript projects. Each of these projects comes with a free-to-download source code.
 

Video Tutorial:

If you are interested to learn by watching a video tutorial rather than reading this blog post you can check out the video below. Also subscribe to my youtube channel where I post new tips, tricks and tutorials every alternate day.

Project Folder Structure:

Before we start coding, let us take a look at the project folder structure. We create a project folder called – ‘Custom File Upload Button’.Inside this folder, we have three files – index.html, style.css and script.js. The first file is the HTML document, the next is the stylesheet, and the last one is the script file.

HTML:

We begin with the HTML code. The HTML code consists of a file input with its corresponding label. It also contains two divs. The first div displays the number of files chosen by the user. And the second div displays the file names with extensions and sizes.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Custom File Upload Button</title>
    <!-- Font Awesome Icons -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
    />
    <!-- Google Fonts  -->
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap"
      rel="stylesheet"
    />
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <input type="file" id="file-input" multiple />
      <label for="file-input">
        <i class="fa-solid fa-arrow-up-from-bracket"></i>
        &nbsp; Choose Files To Upload
      </label>
      <div id="num-of-files">No Files Choosen</div>
      <ul id="files-list"></ul>
    </div>
    <!-- Script -->
    <script src="script.js"></script>
  </body>
</html>

CSS:

We use CSS to hide the input file button and style the label to look like a button.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  background-color: #025bee;
}
.container {
  background-color: #ffffff;
  width: 90%;
  max-width: 34.37em;
  position: relative;
  margin: 3.12em auto;
  padding: 3.12em 1.25em;
  border-radius: 0.43em;
  box-shadow: 0 1.25em 2.18em rgb(1, 28, 71, 0.3);
}
input[type="file"] {
  display: none;
}
label {
  display: block;
  position: relative;
  background-color: #025bee;
  color: #ffffff;
  font-size: 1.12em;
  font-weight: 500;
  text-align: center;
  width: 18.75em;
  padding: 1.12em 0;
  margin: auto;
  border-radius: 0.31em;
  cursor: pointer;
}
#num-of-files {
  font-weight: 400;
  text-align: center;
  margin: 1.25em 0 1.87em 0;
}
ul {
  list-style-type: none;
}
.container li {
  font-weight: 500;
  background-color: #eff5ff;
  color: #025bee;
  margin-bottom: 1em;
  padding: 1.1em 1em;
  border-radius: 0.3em;
  display: flex;
  justify-content: space-between;
}

Javascript:

We then use javascript to display the file names and sizes.

let fileInput = document.getElementById("file-input");
let fileList = document.getElementById("files-list");
let numOfFiles = document.getElementById("num-of-files");

fileInput.addEventListener("change", () => {
  fileList.innerHTML = "";
  numOfFiles.textContent = `${fileInput.files.length} Files Selected`;

  for (i of fileInput.files) {
    let reader = new FileReader();
    let listItem = document.createElement("li");
    let fileName = i.name;
    let fileSize = (i.size / 1024).toFixed(1);
    listItem.innerHTML = `<p>${fileName}</p><p>${fileSize}KB</p>`;
    if (fileSize >= 1024) {
      fileSize = (fileSize / 1024).toFixed(1);
      listItem.innerHTML = `<p>${fileName}</p><p>${fileSize}MB</p>`;
    }
    fileList.appendChild(listItem);
  }
});

That’s it for this tutorial. If you face any issues while creating this code you can download the source code by clicking on the ‘Download button’ below. Also if you have any queries, suggestions or feedback comment below.
Happy Coding!

Previous articleMCQ – 14/11/22
Next articleMCQ – 16/11/22
RELATED ARTICLES

1 COMMENT

LEAVE A REPLY

Please enter your comment!
Please enter your name here

20 − 2 =

Most Popular