van an nguyen

Drag’n’drop images example

Drag and drop images with thumbnail previews

This time, let’s reuse the readFilesAndDisplayPreview() method we saw in the File API chapter in the HTML5 Part 1 course.

We have reproduced the example here – please review the source code to refresh your memory (click on the JS tab or look at the example at CodePen).

Click the “Choose files” button (an <input type=”file”> element), select one or more images — and you should see image thumbnails displayed in the open space beneath it:

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

Source code extract (the part that reads the image file content and displays the thumbnails):

  1. function readFilesAndDisplayPreview(files) {
  2.    // Loop through the FileList and render image files
  3.    // as thumbnails.
  4.    for (var i = 0, f; f = files[i]; i++) {
  6.      // Only process image files.
  7.      if (!f.type.match(‘image.*’)) {
  8.         continue;
  9.      }
  11.      var reader = new FileReader();
  13.      //capture the file information.
  14.      reader.onload = function(e) {
  15.          // Render thumbnail.
  16.          var span = document.createElement(‘span’);
  17.          span.innerHTML = “<img class=’thumb’ src='” +
  18.                            e.target.result + “‘/>”;
  19.          document.getElementById(‘list’).insertBefore(span, null);
  20.      };
  22.      // Read the image file as a data URL. Will trigger
  23.      // a call to the onload callback above
  24.      // only once the image is completely loaded
  25.      reader.readAsDataURL(f);
  26.    }
  27. }

At line7, there is a test that will avoid processing non image files. The “!” is the NOT operator in JavaScript. The call to continue at line 8 will make the for loop go to its end and process the next file. See the HTML5 part 1 course about the file API for more details (each file has a name, type, lastModificationDate and size attribute. The call to match(…) here is a standard way in JavaScript to match a string value with a regular expression).

At line 19, we insert the <img> element that was created and initialized with the dataURL of the image file, into the HTML list with an id of “list”.

So, let’s add this method to our code example, to display file details once dropped, and also add an <output id=”list”></output> to the HTML of this example.

Complete example of drag and drop + thumbnails of images

ilmage drag'n'drop with thumbnails

Try it below in your browser (drag’n’drop image files into the drop zone) or play with it at CodePen:

https://codepen.io/w3devcampus/embed/XmWEMQ?user=w3devcampus&default-tab=result&slug-hash=XmWEMQ&theme-id=18432&height=266&name=cp_embed_2

Complete source code:

  1. <!DOCTYPE html>
  2. <html lang=”en”>
  3. <head>
  4.     <style>
  5.        div {
  6.           height: 150px;
  7.           width: 350px;
  8.           border: 2px solid #666666;
  9.           background–color: #ccc;
  10.           margin–right: 5px;
  11.           border–radius: 10px;
  12.           box–shadow: inset 0 0 3px #000;
  13.           text–align: center;
  14.           cursor: move;
  15.        }
  17.        .dragged {
  18.           border: 2px dashed #000;
  19.           background–color: green;
  20.        }
  22.        .draggedOver {
  23.           border: 2px dashed #000;
  24.           background–color: green;
  25.        }
  27.      </style>
  28.      
  29.        function dragLeaveHandler(event) {
  30.           console.log(“drag leave”);
  31.           // Set style of drop zone to default
  32.           event.target.classList.remove(‘draggedOver’);
  33.        }
  35.        function dragEnterHandler(event) {
  36.           console.log(“Drag enter”);
  37.           // Show some visual feedback
  38.           event.target.classList.add(‘draggedOver’);
  39.        }
  41.        function dragOverHandler(event) {
  42.           //console.log(“Drag over a droppable zone”);
  43.           // Do not propagate the event
  44.           event.stopPropagation();
  45.           // Prevent default behavior, in particular when we drop images or links
  46.           event.preventDefault();
  47.        }
  49.        function dropHandler(event) {
  50.           console.log(‘drop event’);
  52.           // Do not propagate the event
  53.           event.stopPropagation();
  54.           // Prevent default behavior, in particular when we drop images or links
  55.           event.preventDefault();
  57.           // reset the visual look of the drop zone to default
  58.           event.target.classList.remove(‘draggedOver’);
  61.           // get the files from the clipboard
  62.           var files = event.dataTransfer.files;
  63.           var filesLen = files.length;
  64.           var filenames = “”;
  66.           // iterate on the files, get details using the file API
  67.           // Display file names in a list.
  68.           for(var i = 0 ; i  filesLen ; i++) {
  69.              filenames += ‘\n’ + files[i].name;
  70.              // Create a li, set its value to a file name, add it to the ol
  71.              var li = document.createElement(‘li’);
  72.              li.textContent = files[i].name;
  73.              document.querySelector(“#droppedFiles”).appendChild(li);
  74.           }
  75.           console.log(files.length + ‘ file(s) have been dropped:\n’ + filenames);
  77.           readFilesAndDisplayPreview(files);
  78.        }
  80.        function readFilesAndDisplayPreview(files) {
  81.           // Loop through the FileList and render image files as thumbnails.
  82.           for (var i = 0, f; f = files[i]; i++) {
  84.           // Only process image files.
  85.           if (!f.type.match(‘image.*’)) {
  86.              continue;
  87.           }
  89.           var reader = new FileReader();
  91.           //capture the file information.
  92.           reader.onload = function(e) {
  93.              // Render thumbnail.
  94.              var span = document.createElement(‘span’);
  95.              span.innerHTML = “ + e.target.result + “‘/>”;
  96.              document.getElementById(‘list’).insertBefore(span, null);
  97.           };
  99.           // Read the image file as a data URL. Will trigger the call to the above callback when
  100.           // the image file is completely loaded
  101.           reader.readAsDataURL(f);
  102.        }
  103.     }
  104.   
  105. </head>
  106. <body>
  107. <h2>Drop your files here!</h2>
  108.  id=“droppableZone” ondragenter=“dragEnterHandler(event)“ ondrop=“dropHandler(event)“
  109.                          ondragover=“dragOverHandler(event)“   ondragleave=“dragLeaveHandler(event)“>
  110.     Drop zone
  111.     
       id=“droppedFiles”>
  • <br/>
  • <output id=“list”></output>
  • <body>
  • <html>

    • Above, we added the readFilesAndDisplayPreview() method detailed earlier. We called it at the end of the drop handler (line 77), and we added the <output> element as a container for the <img> elements (constructed by the JavaScript code lines 94-96) which will display the thumbnails (line 114).