Dropzone
A file upload dropzone with drag-and-drop support, file validation, and preview.
Install
Run the following command to install the dropzone component:
npx acc-nuxt add DropzoneExamples
Default
Upload a file
Drag and drop or click to upload
Trigger slot
value:
External dropzone
Drop images here
Drag state: { "isOverDropZone": false, "hasInvalidDragTypes": false }
Value:
Multiple files
Upload a file
Drag and drop or click to upload
Max 5 files
Accept specific types
Upload a file
Drag and drop or click to upload
Images only
Max file size
Upload a file
Drag and drop or click to upload
Max 1 MB
Disabled
Upload a file
Drag and drop or click to upload
Disabled errors
When disabled-errors is set, no error messages are shown in the dropzone for file type or file size errors. The error event is still emitted.
Upload a file
Drag and drop or click to upload
image/*Max 1 MB
Max files
Upload a file
Drag and drop or click to upload
Max 3 files
Hidden files section
Upload a file
Drag and drop or click to upload
Hide accept hint
Upload a file
Drag and drop or click to upload
Max 1 MB
Hide size hint
Upload a file
Drag and drop or click to upload
image/*
Hide max files hint
Upload a file
Drag and drop or click to upload
Hide preview
Hide image previews in the files section by setting hide-preview to true.
Upload a file
Drag and drop or click to upload
image/*
Custom remove button
Use the file-remove-button slot to customize the remove button for each file. This slot is only relevant when showFilesSection is true.
Upload a file
Drag and drop or click to upload
Slots
The dropzone component provides the following slots for customization.
#trigger="{ openDialog: () => void, disabled: boolean, isOverDropZone: boolean, hasInvalidDragTypes: boolean }"
Custom trigger element that opens the system file picker. When provided, only this trigger is rendered (no dropzone UI).
#content="{ hasFiles: boolean, texts: AccDropzoneTexts }"
Custom content inside the dropzone area.
#file-remove-button="{ removeFile: () => void }"
Custom remove button for each file in the files section. Only relevant when showFilesSection is true. Receives removeFile function to trigger file removal.
#overlay-valid="{ isOverDropZone: boolean }"
Custom overlay shown when dragging valid files over the dropzone.
#overlay-invalid="{ isOverDropZone: boolean }"
Custom overlay shown when dragging invalid files over the dropzone.
Props
The dropzone component accepts the following props to customize its behavior.
modelValue:AccDropzoneFileInfo | AccDropzoneFileInfo[] | null— optional
default:undefined
The selected file(s). Use v-model to bind.
disabled:boolean— optional
default:false
When true, the dropzone is disabled and cannot accept files.
disabledErrors:boolean— optional
default:false
When true, no error messages are displayed in the dropzone for file type or file size errors. The error event is still emitted.
multiple:boolean— optional
default:false
When true, allows selecting multiple files.
accept:string— optional
default:'*'
Accepted file types (MIME types or extensions, comma-separated). E.g. "image/*" or ".jpg,.png".
acceptHint:string— optional
default:undefined
A human-readable hint displayed instead of the raw accept string. E.g. "Images only" instead of "image/*".
maxFiles:number— optional
default:undefined
Maximum number of files allowed (only applies when multiple is true).
maxFileSize:number— optional
default:undefined
Maximum file size in bytes.
hideAcceptHint:boolean— optional
default:false
When true, hides the accept type hint badge.
hideSizeHint:boolean— optional
default:false
When true, hides the max file size hint badge.
hideMaxFilesHint:boolean— optional
default:false
When true, hides the max files hint badge.
hidePreview:boolean— optional
default:false
When true, hides image previews in the files section.
showFilesSection:boolean— optional
default:true
When true, displays the selected files below the dropzone.
errorDuration:number— optional
default:5000
Duration in milliseconds before the error message auto-resets.
texts:AccDropzoneTexts— optional
default:undefined
Custom text overrides for all dropzone labels and messages.
Emits
The dropzone component emits the following events.
@drag-state-change
Emitted whenever drag state changes. Use this to style external drop areas (green/red hover states).
@error
Emitted when a file validation error occurs. Payload contains reason ("file-type" | "file-size"), message, and optional fileName.
@update:modelValue
Emitted when the selected file(s) change.
CSS Variables
The dropzone component can be customized using the following CSS variables.
--lev-dropzone-wrapper-gap
default:8px
Gap between the dropzone and the files section.
--lev-dropzone-padding
default:24px 16px
Padding inside the dropzone.
--lev-dropzone-border
default:1px dashed #aaacad
Default border of the dropzone.
--lev-dropzone-border-radius
default:8px
Border radius of the dropzone and overlays.
--lev-dropzone-bg
default:#c3c6c7
Default background of the dropzone.
--lev-dropzone-min-height
default:128px
Minimum height of the dropzone.
--lev-dropzone-border-hover
default:#aaacad
Border (color) on hover.
--lev-dropzone-bg-hover
default:#e1e4e5
Background on hover.
--lev-dropzone-border-active
default:#aaacad
Border (color) on active (click).
--lev-dropzone-bg-active
default:#787a7a
Background on active (click).
--lev-dropzone-disabled-opacity
default:0.5
Opacity when the dropzone is disabled.
--lev-dropzone-border-valid
default:transparent
Border (color) when dragging valid files over.
--lev-dropzone-bg-valid
default:#1d66bf
Background when dragging valid files over.
--lev-dropzone-color-valid
default:#ffffff
The font color when dragging valid files over.
--lev-dropzone-border-invalid
default:1px solid #ef4444
Border when dragging invalid files over.
--lev-dropzone-bg-invalid
default:#c3c6c7
Background when dragging invalid files over.
--lev-dropzone-border-error
default:1px solid #ef4444
Border when an error is shown.
--lev-dropzone-error-padding
default:1px 12px
Padding of the error message.
--lev-dropzone-error-bg
default:#fdecec
Background of the error message.
--lev-dropzone-error-color
default:#bf3636
Text color of the error message.
--lev-dropzone-error-border-radius
default:8px
Border radius of the error message.
--lev-dropzone-error-font-size
default:12px
Font size of the error message.
--lev-dropzone-hint-padding
default:2px 6px
Padding of the hint badge.
--lev-dropzone-hint-bg
default:#d2e0f2
Background of the hint badge.
--lev-dropzone-hint-border-radius
default:4px
Border radius of the hint badge.
--lev-dropzone-hint-font-size
default:12px
Font size of the hint badge.
--lev-dropzone-hint-color
default:#113d73
Text color of the hint badge.
--lev-dropzone-files-gap
default:8px
Gap between file items in the files section.
--lev-dropzone-file-gap
default:12px
Gap between elements inside a file item.
--lev-dropzone-file-padding
default:12px
Padding of a file item.
--lev-dropzone-file-border
default:1px solid #e1e4e5
Border of a file item.
--lev-dropzone-file-border-radius
default:8px
Border radius of a file item.
--lev-dropzone-file-bg
default:#ffffff
Background of a file item.
--lev-dropzone-preview-size
default:36px
Width and height of the image preview thumbnail.
--lev-dropzone-preview-border-radius
default:6px
Border radius of the image preview thumbnail.
--lev-dropzone-file-name-font-size
default:14px
Font size of the file name.
--lev-dropzone-file-size-font-size
default:12px
Font size of the file size text.
--lev-dropzone-muted-color
default:#858787
Color for muted text (file size).
--lev-dropzone-remove-padding
default:8px
Padding of the remove file button.
--lev-dropzone-remove-border-radius
default:4px
Border radius of the remove file button.
--lev-dropzone-remove-color
default:#141414
Icon color of the remove file button.
--lev-dropzone-remove-hover-bg
default:#f7f9fa
Background of the remove button on hover.
--lev-dropzone-remove-active-bg
default:#e1e4e5
Background of the remove button on active.
--lev-dropzone-remove-focus-border-color
default:#1d66bf
Border color of the remove button on focus.
--lev-dropzone-remove-icon-size
default:16px
Size of the remove button icon.