Multiple Drop Zones

Create separate drop zones for different file categories on the same page. Each zone has its own configuration.

What you should see: two independent drop zones on one page, each with its own queue and its own destination — dropping on one does not affect the other.

Images

Documents

<div id="images-zone"></div>
<div id="documents-zone"></div>

<script>
// Images zone
CoreUpload.create('#images-zone', {
    uploadUrl: '/api/upload/upload',
    multiple: true,
    allowedExtensions: '.jpg,.png,.gif,.webp',
    maxFileSize: 10 * 1024 * 1024,
    autoUpload: true,
    showProgress: true,
    showThumbnails: true,
    dropZoneMode: true,
    dropTarget: '#images-zone'
});

// Documents zone
CoreUpload.create('#documents-zone', {
    uploadUrl: '/api/upload/upload',
    multiple: true,
    allowedExtensions: '.pdf,.doc,.docx,.xls,.xlsx',
    maxFileSize: 50 * 1024 * 1024,
    autoUpload: true,
    showProgress: true,
    dropZoneMode: true,
    dropTarget: '#documents-zone'
});
</script>

Separate uploaders, separate rules

Each tag helper instance has its own queue, its own validation and its own endpoint, so one zone can accept images while another beside it accepts PDFs. The user learns the distinction from where they drop, which is more legible than one target that takes everything and sorts it afterwards.

Label each zone with its rule

The constraints are invisible until something is rejected. “Images only, max 5 MB” printed next to the target prevents the error rather than explaining it after the fact.