Camille846 / DragDrop

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

☁️ Drag & Drop or Browse – File upload Feature ☁️

This is a mini Javascript Project that consists in creating an interface that allows the user to upload the file by drag & drop.

Table of contents

• Overview
  • The project
  • Gif
• My process
  • Built with
  • Useful resources
• Access the project

Overview

The project

• There is a drop area container with text, icon, and browse file button. When you drag any image file over the drag area, the border of the container changes to solid, and the text “Drag & Drop to upload file” also changes to “Release to upload file”.

Gif

My process

Built With

• Semantic HTML5 markup
• CSS custom properties
• Javascript Click Events
• FileReader Object

Useful Resources

• Coding Nepal - This was my inspiration to start the project. It guided me to accomplish the result I was expecting.
• MDN - Dragover event - This helped me using the dragover event
• MDN - Dragleave event - This helped me using the dragleave event
• MDN - Drop event - This helped me using the drop event
• W3Schools - preventDefault - This is a good article to understand the definition and usage of preventDefault() Event Method

Link

• Access Project: Drag & Drop Upload File