DEV Community

loading...
Cover image for Drag & Drop or Browse - File upload Feature using HTML CSS & JavaScript

Drag & Drop or Browse - File upload Feature using HTML CSS & JavaScript

CodingNepal
I'm Prakash Shahi and I am a self-taught front-end developer from Nepal.
・3 min read

Hey friends, today in this blog you'll learn how to create a Drag & Drop or Browse - File upload Feature using HTML CSS & JavaScript. In the earlier blog, I have also shared how to upload an image by clicking on the browse button but now in this blog, I'll teach you how you can upload an image file by drag & drop or by clicking on the browse file button.

Drag and Drop file upload means you can upload the file by drag & drop. Drag and Drop interfaces permit web applications to drag and drop files on a web page. You may have seen this type of file upload feature on most sites. There are many JavaScript libraries to create this type of drag & drop file upload feature with a few lines of JavaScript codes but today in this blog I'll create it with pure JavaScript means without using any library.

In this program [Drag & Drop or Browse - File upload Feature], on the webpage, there is a drop area container with some text, icon, and browse file button. When you drag any image file over the drag area, the border of the container also changed to solid, and the text "Drag & Drop to upload file" also changed to "Release to upload file". When you release your image file in the drag area, immediately the preview of that image will appear. You can also upload an image by clicking on the browse file button. When you click on the button, there is open a file window and you have to select one image file, after you selected it then it will appear in the drag area.

You can copy the codes from the given boxes or download the code files from the given link but I recommend you download the source code files instead of copying codes. Click here to download code files.

You might like this:

Tic Tac Toe JavaScript Game
Preview Image File Before Upload
Responsive Image Lightbox in JavaScript
How to Upload, Preview & Download Image

HTML CODE:
<!DOCTYPE html>
<!-- Created By CodingNepal - www.codingnepalweb.com -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Drag & Drop or Browse: File Upload | CodingNepal</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
  <div class="drag-area">
    <div class="icon"><i class="fas fa-cloud-upload-alt"></i></div>
    <header>Drag & Drop to Upload File</header>
    <span>OR</span>
    <button>Browse File</button>
    <input type="file" hidden>
  </div>

  <script src="script.js"></script>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode
CSS CODE:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #5256ad;
}
.drag-area{
  border: 2px dashed #fff;
  height: 500px;
  width: 700px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.drag-area.active{
  border: 2px solid #fff;
}
.drag-area .icon{
  font-size: 100px;
  color: #fff;
}
.drag-area header{
  font-size: 30px;
  font-weight: 500;
  color: #fff;
}
.drag-area span{
  font-size: 25px;
  font-weight: 500;
  color: #fff;
  margin: 10px 0 15px 0;
}
.drag-area button{
  padding: 10px 25px;
  font-size: 20px;
  font-weight: 500;
  border: none;
  outline: none;
  background: #fff;
  color: #5256ad;
  border-radius: 5px;
  cursor: pointer;
}
.drag-area img{
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 5px;
}
Enter fullscreen mode Exit fullscreen mode

For JavaScript codes please go to this link - https://www.codingnepalweb.com/2021/02/drag-drop-or-browse-file-upload-feature.html

Discussion (0)

Forem Open with the Forem app