Multiple Drop Zones

Multiple independent drop zones on one page, each with its own uploader instance and configuration.

Images Only

Drop images here

Documents Only

Drop documents here

// Images uploader
new MultipleUpload(document.getElementById('demo-zone-images'), {
 uploadUrl: '/api/upload',
 multiple: true,
 dropZoneMode: true,
 allowedExtensions: '.jpg,.jpeg,.png,.gif,.webp'
});

// Documents uploader
new MultipleUpload(document.getElementById('demo-zone-docs'), {
 uploadUrl: '/api/upload',
 multiple: true,
 dropZoneMode: true,
 allowedExtensions: '.pdf,.doc,.docx,.txt,.xls,.xlsx'
});

Separate drop areas, separate rules

Each uploader instance has its own container, its own validation and its own queue, 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 accepts everything and sorts it afterwards.

Label every zone

The rules are invisible until something is rejected, so put them in the zone: “Images only, max 5 MB” next to the target prevents the error rather than explaining it. Wire onValidationError per zone as well, so a rejection says which rule it broke.