van an nguyen

Drag and drop files in a drop zone example

Drag and drop files to a drop zone, display file details in a list

Example of drag'n'drop of a file

Try the example below directly in your browser (just drag and drop files to the greyish drop zone), or play with it at CodePen:

https://codepen.io/w3devcampus/embed/JYjpqV?user=w3devcampus&default-tab=result&slug-hash=JYjpqV&theme-id=0&height=269&name=cp_embed_1

Complete source code from the example:

  1. <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4.    <style>
  5.       div {
  6.          height: 150px;
  7.          width: 350px;
  8.          float: left;
  9.          border: 2px solid #666666;
  10.          background–color: #ccc;
  11.          margin–right: 5px;
  12.          border–radius: 10px;
  13.          box–shadow: inset 0 0 3px #000;
  14.          text–align: center;
  15.          cursor: move;
  16.       }
  18.       .dragged {
  19.          border: 2px dashed #000;
  20.          background–color: green;
  21.       }
  23.       .draggedOver {
  24.          border: 2px dashed #000;
  25.          background–color: green;
  26.       }
  28.     </style>
  29.     
  30.       function dragLeaveHandler(event) {
  31.           console.log(“drag leave”);
  32.           // Set style of drop zone to default
  33.           event.target.classList.remove(‘draggedOver’);
  34.       }
  36.       function dragEnterHandler(event) {
  37.           console.log(“Drag enter”);
  38.           // Show some visual feedback
  39.           event.target.classList.add(‘draggedOver’);
  40.       }
  42.       function dragOverHandler(event) {
  43.           //console.log(“Drag over a droppable zone”);
  44.           // Do not propagate the event
  45.           event.stopPropagation();
  46.           // Prevent default behavior, in particular when we drop images or links
  47.           event.preventDefault();
  48.       }
  50.       function dropHandler(event) {
  51.           console.log(‘drop event’);
  53.           // Do not propagate the event
  54.           event.stopPropagation();
  55.           // Prevent default behavior, in particular when we drop images or links
  56.           event.preventDefault();
  59.           // reset the visual look of the drop zone to default
  60.           event.target.classList.remove(‘draggedOver’);
  63.           // get the files from the clipboard
  64.           var files = event.dataTransfer.files;
  65.           var filesLen = files.length;
  66.           var filenames = “”;
  68.           // iterate on the files, get details using the file API
  69.           // Display file names in a list.
  70.           for(var i = 0 ; i  filesLen ; i++) {
  71.               filenames += ‘\n’ + files[i].name;
  72.               // Create a li, set its value to a file name, add it to the ol
  73.               var li = document.createElement(‘li’);
  74.               li.textContent = files[i].name; document.querySelector(“#droppedFiles”).appendChild(li);
  75.           }
  76.           console.log(files.length + ‘ file(s) have been dropped:\n’ + filenames);
  77.       }
  78.   
  79. </head>
  80. <body>
  81.   <h2>Drop your files here!</h2>
  82.   
     id=“droppableZone” ondragenter=“dragEnterHandler(event)“ ondrop=“dropHandler(event)“     
  83.                           ondragover=“dragOverHandler(event)“   ondragleave=“dragLeaveHandler(event)“>
  84.      Drop zone
  85.      
       id=“droppedFiles”>
  86.  
  • <body>
  • <html>

    • Note that:

      • We prevented the browser default behavior in the drop and dragover handlers Otherwise, if we dropped a media file (an image, an audio of video file), the browser would try to display/play it in a new window/tab. We also stop the  propagation for performance reasons, because when we drag an object it can raise many events within the parents of the drop zone element as well.
      • Lines 73-74 create a <li> element. Its value is initialized with the file name of the current file in the collection, and added to the <ol> list.

    In principle, this example is very similar to the “fruit” examples we worked through earlier, except that this time we’re working with files. And when we work with files, it is important to prevent the browser’s default behavior.