Creating a Simple File Upload UI for Web using Bootstrap 5 Tutorial

25 Jul, 2022

Making a simple UI design of File Upload and Drag Section using HTML,CSS and Bootstrap. Follow the Step by Step guide or Watch YouTube Video for Code.

Step 1: Create an upload.html file and write basic HTML5 blocks.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport"
    content="width=device-width,
    initial-scale=1.0" />
    <title>File Upload</title>
  </head>
  <body>
  </body>
</html>

Step 2: Inserting a Bootstrap 5 Code in Header and Body Section.

<!--Paste in Head CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!--Paste in Body JavaScript Bundle -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Step 3: Now, writing all the needed blocks for the File Upload UI Design.

<div class="container">
  <div>
    <label for="uploadFile">Drag & Drop File Here</label>
    <div>
      <label>File Supported PNG, JPG & PDF.</label>
      <input
        type="file"
        class="form-control"
        name="uploadFile"
        id="uploadFile"
      />
      <label>Maximum Size: 10MB</label>
    </div>
  </div>
</div>

Step 4: Adding Google Font Icon in the Code.

<!--Paste in Head -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
<!--Paste above 'Drag & Drop Here' Lable  -->
<span class="material-symbols-outlined">upload_file</span>

Step 5: Finally, Writing some own CSS style code for personal touch to the Design.

<div class="container">
  <div ondrop="" ondragover="" class="row borders rounded-3 m-2 p-5 gap-2">
    <span class="material-symbols-outlined">upload_file</span>
    <label class="text-center p-0 m-0 fs-3 fw-bold" for="uploadFile"
      >Drag & Drop File Here</label
    >
    <div class="col-sm-4 m-auto text-center">
      <label class="txt-color pb-2">File Supported PNG, JPG & PDF.</label>
      <input
        type="file"
        class="form-control"
        name="uploadFile"
        id="uploadFile"
      />
      <label class="txt-color pt-2">Maximum Size: 10MB</label>
    </div>
  </div>
</div>

Step 6: Finally, Writing some own CSS style code for personal touch to the Design.

.borders{
  border: 3px dashed #7e7e7e;
  }
.txt-color{
  color:#a3a3a3;
}
.material-symbols-outlined {
  font-size: 58px;
  text-align: center;
  color: #686868;
}

Done!

There are no limits for designing a simple UI. This is a simple File Upload, Drag and Drop UI design for Beginners.

Follow for more tutorials like this on Instagram & YouTube.

Blog