Dropzone

The Dropzone component provides a drag-and-drop interface for uploading files. It supports file validation (type, size, count), UI customization (header, footer, buttons), and flexible display options (file name, size, type).

1. Basic Properties

• Name: The unique identifier of the component (e.g., Dropzone1).
• Accept: Restricts file types (e.g., image/*, .pdf).
• Disabled: Makes the dropzone non-interactive.
• Hidden: Hides the component from view but keeps it active in logic.
• Multiple: Allows multiple file uploads.

2. Layout

Defines responsiveness and spacing of the dropzone component.

📘 See Common Properties → Layout.

3. Events

• onChange: Triggered whenever a file is added, removed, or changed.

4. Validations

Validation rules ensure file uploads meet specific conditions:

• Max file size → Largest file size allowed (in bytes).
• Min file size → Smallest file size allowed (in bytes).
• Invalid file size messages → Custom error messages for exceeding limits.
• Invalid file extension message → Custom error message if the extension is not allowed.
• Allowed types → Displays the accepted file extensions or MIME types.
• File count message → Displays the number of uploaded files.

📘 See Common Properties → Validations.

5. Header

• Show: Toggles the header visibility.
• Title: Custom title text for the dropzone.
• Density: Controls dropzone sizing (small, medium, large).

6. Buttons

The dropzone supports customizable action buttons:

• Upload button → Edit label or style.
• Clear button → Remove all uploaded files.
• Delete button → Remove individual files.
• Download button → Download uploaded files.

7. Footer

• Show: Toggles the footer visibility.
• File Action: Enables file-related actions (delete, download, etc.).
• Position: Aligns footer elements (left or right).
• Width: Adjusts the footer width (px).

8. Messages

Customizable messages improve user experience:

• Dropzone message → Instruction text (e.g., “Drag & Drop the desired file or click to browse for a file instead”).
• File name label → Custom label for file name.
• File size label → Custom label for file size.
• File type label → Custom label for file type.
• All file types accepted message → Text shown when all file types are allowed.

9. Display Options

• Show file name → Displays uploaded file names.
• Show file size → Displays the size of uploaded files.
• Show file type → Displays the MIME type or extension of uploaded files.

10. Style

Custom styles can be applied for UI customization.

📘 See Common Properties → Style.

✅ The Dropzone component makes file uploading simple, flexible, and user-friendly, with powerful validation options and customizable UI elements.