How To Make Custom File Uploader With HTML, CSS & JavaScript

Hey Programmers! In this post, we will make a custom File uploader with HTML, CSS & JavaScript. When we have to make a tool website As we know we have an HTML Input Tag to upload files on the webpage, and we will make this normal file input field look professional.

Apart from this, we will see how we can upload more than one file & display all the uploaded files on the web page. This tutorial aims to show how we can use JavaScript with HTML Input tags.

Also Read: Cool Email Input Feild With HTML & CSS

I will explain all the code step by step so that you can make such a custom file uploader on your own. At the end, I will provide the entire source code so that you can run this project on your local machine.

Concepts Used To Make Custom File Uploader

1. HTML File Input
2. CSS Border Radius & Box Shadow
3. CSS Flex Box & Box Model
4. JavaScritp Query Selector
5. JavaScript Change Event Listener

Understanding HTML To Make Custom File Uploader

1. Main Container: The div with the class container acts as the outermost container, centralizing and aligning the content on the page.

   <div class="container">

2. Card: Inside the container, there’s a div with the class card that serves as a structured area to display the file upload section.

   <div class="card">

3. Card Title: A h3 tag with the text “Upload Files” serves as the title of the card.

   <h3>Upload Files</h3>

4. Drop Box: A div with the class drop_box provides an area where users can drag and drop files or click to select them.

   <div class="drop_box">

5. Drop Box Header: Inside the drop_box, a header contains a h4 tag prompting users to “Select File here”.

   <header>
     <h4>Select File here</h4>
   </header>

6. Supported Files Info: A p tag describes the types of files supported: PDF, TEXT, DOC, DOCX.

   <p>Files Supported: PDF, TEXT, DOC , DOCX</p>

7. Hidden File Input: An input element of type file is hidden, allowing users to select files from their devices. It only accepts files with extensions .doc, .docx, and .pdf.

   <input type="file" hidden accept=".doc,.docx,.pdf" id="fileID" style="display:none;">

8. Choose File Button: A button with the class btn that, when clicked, will trigger the file input to open the file selection dialog.

   <button class="btn">Choose File</button>

Also Read: OTP Input Feild With HTML & CSS

Understanding CSS To Make Custom File Uploader

1. Global Styling: Universal selectors reset margin, padding, and box-sizing, and set a default font.

   * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: "Poppins", sans-serif;
   }

2. Container Styling: The container class is styled to center its content vertically and horizontally within the viewport.

   .container {
     height: 100vh;
     width: 100%;
     align-items: center;
     display: flex;
     justify-content: center;
     background-color: #fcfcfc;
   }

3. Card Styling: The card class is styled to give it a white background, rounded corners, and a shadow. It’s sized and padded to fit the content nicely.

   .card {
     border-radius: 10px;
     box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.3);
     width: 600px;
     height: 260px;
     background-color: #ffffff;
     padding: 10px 30px 40px;
   }

4. Card Title Styling: The h3 within the card has a font size of 22px and a bold weight to stand out as the title.

   .card h3 {
     font-size: 22px;
     font-weight: 600;
   }

5. Drop Box Styling: The drop_box class is styled to center its content and display a dotted border. It has padding and rounded corners.

   .drop_box {
     margin: 10px 0;
     padding: 30px;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     border: 3px dotted #a3a3a3;
     border-radius: 5px;
   }

6. Drop Box Header Styling: The h4 inside the drop_box has a moderate font size and a lighter color.

   .drop_box h4 {
     font-size: 16px;
     font-weight: 400;
     color: #2e2e2e;
   }

7. Supported Files Info Styling: The p inside the drop_box is styled with a smaller font size and a light grey color, with top and bottom margins for spacing.

   .drop_box p {
     margin-top: 10px;
     margin-bottom: 20px;
     font-size: 12px;
     color: #a3a3a3;
   }

8. Button Styling: The .btn class styles the button with a blue background, white text, and padding. It transitions when hovered to inverted colors and outlines the button.

   .btn {
     text-decoration: none;
     background-color: #005af0;
     color: #ffffff;
     padding: 10px 20px;
     border: none;
     outline: none;
     transition: 0.3s;
   }

   .btn:hover {
     text-decoration: none;
     background-color: #ffffff;
     color: #005af0;
     padding: 10px 20px;
     border: none;
     outline: 1px solid #010101;
   }

9. Form Input Styling: The .form input styles input fields within forms with a grey background, rounded corners, and padding.

   .form input {
     margin: 10px 0;
     width: 100%;
     background-color: #e2e2e2;
     border: none;
     outline: none;
     padding: 12px 20px;
     border-radius: 4px;
   }

Understanding JavaScript To Make Custom File Uploader

1. Select Elements: The script selects elements within the .drop_box like the button, header, and input field using document.querySelector.

   const dropArea = document.querySelector(".drop_box"),
     button = dropArea.querySelector("button"),
     dragText = dropArea.querySelector("header"),
     input = dropArea.querySelector("input");

2. File Variable: A variable file is declared to store the file object when a file is selected.

   let file;

3. Button Click Event: An event listener is added to the button to trigger the hidden file input when clicked. This opens the file selection dialog.

   button.onclick = () => {
     input.click();
   };

Source Code Of Cusotme File Uploader

HTML:

<div class="container">
    <div class="card">
      <h3>Upload Files</h3>
      <div class="drop_box">
        <header>
          <h4>Select File here</h4>
        </header>
        <p>Files Supported: PDF, TEXT, DOC , DOCX</p>
        <input type="file" hidden accept=".doc,.docx,.pdf" id="fileID" style="display:none;">
        <button class="btn">Choose File</button>
      </div>
    </div>
  </div>

CSS:

<style>
    @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

.container {
  height: 100vh;
  width: 100%;
  align-items: center;
  display: flex;
  justify-content: center;
  background-color: #fcfcfc;
}

.card {
  border-radius: 10px;
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.3);
  width: 600px;
  height: 260px;
  background-color: #ffffff;
  padding: 10px 30px 40px;
}

.card h3 {
  font-size: 22px;
  font-weight: 600;
  
}

.drop_box {
  margin: 10px 0;
  padding: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border: 3px dotted #a3a3a3;
  border-radius: 5px;
}

.drop_box h4 {
  font-size: 16px;
  font-weight: 400;
  color: #2e2e2e;
}

.drop_box p {
  margin-top: 10px;
  margin-bottom: 20px;
  font-size: 12px;
  color: #a3a3a3;
}

.btn {
  text-decoration: none;
  background-color: #005af0;
  color: #ffffff;
  padding: 10px 20px;
  border: none;
  outline: none;
  transition: 0.3s;
}

.btn:hover{
  text-decoration: none;
  background-color: #ffffff;
  color: #005af0;
  padding: 10px 20px;
  border: none;
  outline: 1px solid #010101;
}
.form input {
  margin: 10px 0;
  width: 100%;
  background-color: #e2e2e2;
  border: none;
  outline: none;
  padding: 12px 20px;
  border-radius: 4px;
}
  </style>

JavaScript:

<script>
    const dropArea = document.querySelector(".drop_box"),
  button = dropArea.querySelector("button"),
  dragText = dropArea.querySelector("header"),
  input = dropArea.querySelector("input");
let file;
var filename;

button.onclick = () => {
  input.click();
};

input.addEventListener("change", function (e) {
  var fileName = e.target.files[0].name;
  let filedata = `
    <form action="" method="post">
    <div class="form">
    <h4>${fileName}</h4>
    <input type="email" placeholder="Enter email upload file">
    <button class="btn">Upload</button>
    </div>
    </form>`;
  dropArea.innerHTML = filedata;
});

  </script>

About Author