Drop with Preview

Drop image files to see instant thumbnails before uploading. Combine drag-and-drop with image preview.

<div id="previewDropZone"></div>

<script>
CoreUpload.create('#previewDropZone', {
    uploadUrl: '/api/upload/upload',
    multiple: true,
    allowedExtensions: '.jpg,.png,.gif,.webp',
    autoUpload: true,
    showProgress: true,
    showThumbnails: true,
    thumbnailSize: 96,
    dropZoneMode: true,
    dropTarget: '#previewDropZone'
});
</script>

A drop target that fills with previews

Combining the drop zone with thumbnails gives a region that is both the invitation and the result — files land where the user dropped them and immediately show what they are. asp-thumbnails is true by default, so this is mostly a layout choice.

Previews are a check, not decoration

The value is that the user can see they dropped the right files before anything is committed, which matters most in exactly the case drag-and-drop is used for: several files at once, chosen quickly, where a wrong one is easy to include and hard to spot in a list of names.