This is a mini Javascript Project that consists in creating an interface that allows the user to upload the file by drag & drop.
- 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”.
- Semantic HTML5 markup
- CSS custom properties
- Javascript Click Events
- FileReader Object
- 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
- Access Project: Drag & Drop Upload File