Drop Zone with Preview

Drop Zone with Inline Previews

Dropped image files are shown as thumbnail previews inline before and during upload. Non-image files display a generic file icon.

📷 Drop images here or click to browse

onSelect: function(files) {
  files.forEach(function(file) {
    if (file.type.indexOf('image/') === 0) {
      var reader = new FileReader();
      reader.onload = function(e) {
        var img = document.createElement('img');
        img.src = e.target.result;
        grid.appendChild(img);
      };
      reader.readAsDataURL(file);
    }
  });
}