Drag and Drop File Upload Lab

Easy
27
1
50.9% Acceptance

In this lab, you will be creating a drag-and-drop file upload interface using HTML and JavaScript. This lab will help you understand how to handle drag and drop events, and process files uploaded in the browser.

To achieve this, you will follow these steps:

  1. Create a div with id attribute 'drop-zone' to enclose the area designated for drag and drop functionality.
  2. Style the drop-zone using CSS, giving it a dotted border, center-aligned text, and appropriate padding.
  3. Implement JavaScript event listeners to handle 'dragover' and 'drop' events on the drop-zone div. The 'dragover' event listener should prevent the default action.
  4. The 'drop' event listener should prevent the default action and display the name(s) of uploaded file(s) in the console.