Dropzone

You can use Dropzone for drag and drop file uploading. It is highly customizable and flexible.

Usage

The simplest way to use Dropzone component is to bind a variable to @change event and set that variable to received $event value. Whenever files are changed or updated in the dropzone, the component will emit change event with added files as event's payload.

Try to drag and drop any files to dropzone below. Note that dragged files will not be uploaded anywhere.

Drag and Drop files or click here to browse

These are the files you have added:

<div class="my-4">
    <Dropzone @change="files = $event" />
    <div class="mt-3">These are the files you have added:</div>
    <div v-for="file in files">
        {{file.name}}
    </div> 
</div>
<script>
export default {
    data(){
        return {
            files:[],        
        }
    },
}
</script>

WARNING

When submitting a form you must make sure to include the files in the form data and upload them manually as this component does not handle file upload for you. You can do that by storing the @change event payload on a variable in your form component.

Slot props

You can customize the default look of dropzone by using the slot props which component provides. These are currently available default slot properties:

• files is array of files that are currently added to dropzone. By default it is an array of File (opens new window) instances.

• removeFileByIndex is a function which can remove a file from dropzone. It accepts index as a property from the files array.

• active is a boolean which will be set to true whenever files are dragged over the dropzone. This can de used to change styles or content of dropzone when user drags files over it.

• browse is a function which invokes a click event on underlying <input type="file"/> and shows browse files popup.

By using all these slot properties you can achieve required customization.

Hi there, please click on this text To browse files. Or drag and drop them

Props

name	default	description	required	type
browseFilesOnClick	false	If set to true browse files window will be opened when clicking on dropzone.	false	Boolean