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>