Works with any backend npm install Zero dependencies

Drop Zone with Preview

A drop zone that shows image thumbnails for dropped files using showThumbnails: true.

Drop images here to see previews
new MultipleUpload(document.getElementById('demo-drop-preview'), {
 uploadUrl: '/api/upload',
 multiple: true,
 dropZoneMode: true,
 showThumbnails: true,
 thumbnailSize: 80,
 allowedExtensions: '.jpg,.jpeg,.png,.gif,.webp'
});

Thumbnails inside the drop zone

Combining dropZoneMode with showThumbnails gives a drop target that fills with previews as files arrive, so the same region is both the invitation and the result. thumbnailSize sets the longest edge in pixels and defaults to 64.

Previews are also a check

The point is not decoration: it is that the user can see they dropped the right files before anything is committed. That matters most in exactly the case drag-and-drop is used for — several files at once, selected quickly, where a wrong one is easy to include and expensive to notice later.