HTML5 Drag and Drop only images

drag-and-drop, html, image, javascript, jquery

Solution

You could use the FileReader and test the file type for an image like this:

// don't try to process non-images
var imageType = /image.*/;
if (file.type.match(imageType)) {
   // it's an image, process it
}

Here's example code and a Demo:

// dropzone event handlers
var dropzone;
dropzone = document.getElementById("dropzone");
dropzone.addEventListener("dragenter", dragenter, false);
dropzone.addEventListener("dragover", dragover, false);
dropzone.addEventListener("drop", drop, false);

//
function dragenter(e) {
    e.stopPropagation();
    e.preventDefault();
  }
  //

function dragover(e) {
  e.stopPropagation();
  e.preventDefault();
}

//
function drop(e) {
  e.stopPropagation();
  e.preventDefault();

  var dt = e.dataTransfer;
  var files = dt.files;

  handleFiles(files);
}

//
function handleFiles(files) {

    for (var i = 0; i < files.length; i++) {

      // get the next file that the user selected
      var file = files[i];
      var imageType = /image.*/;

      // don't try to process non-images
      if (!file.type.match(imageType)) {
        continue;
      }

      // a seed img element for the FileReader
      var img = document.createElement("img");
      img.classList.add("obj");
      img.file = file;

      // get an image file from the user
      // this uses drag/drop, but you could substitute file-browsing
      var reader = new FileReader();
      reader.onload = (function(aImg) {
        return function(e) {
          aImg.onload = function() {

              // draw the aImg onto the canvas
              var canvas = document.createElement("canvas");
              var ctx = canvas.getContext("2d");
              canvas.width = aImg.width;
              canvas.height = aImg.height;
              ctx.drawImage(aImg, 0, 0);

              // make the jpeg image
              var newImg = new Image();
              newImg.onload = function() {
                newImg.id = "newest";
                document.body.appendChild(newImg);
              }
              newImg.src = canvas.toDataURL('image/jpeg');
            }
            // e.target.result is a dataURL for the image
          aImg.src = e.target.result;
        };
      })(img);
      reader.readAsDataURL(file);

    } // end for

  } // end handleFiles

body {
  background-color: ivory;
}
canvas {
  border: 1px solid red;
}
#dropzone {
  border: 1px solid blue;
  width: 300px;
  height: 300px;
}

<h4>Drag file(s) from desktop to blue dropzone.<br>Only image files will be processed.</h4>
<div id="dropzone"></div>
<div id="preview"></div>

Problem

What i'm trying to do is : if all the dragged files was images drop them, but if there was other file exstensions don't drop them, but drop the images only. Here's my try : HTML : ``` <div id="dropzone"></div> ``` Javascript : ``` var dropzone = document.getElementById("dropzone"); dropzone.ondrop = function (e) { e.preventDefault(); e.stopPropagation(); var files = e.dataTransfer.files; for(x = 0; x < files.length; x = x + 1){ if(files[x].type.split("/")[0] == 'image') { console.log(files[x].name + "is image"); }else { console.log(files[x].name + "is not image"); } } } ``` i need to loop through the files that i dragged and if the file was image do something otherwise do something else, for example ``` file.jpeg is image file.txt is not image ``` But using my code if i dragged other file extension with the image it's not dropping the image, it's skipping both files. The point is : Dropping only images.

Original source