# 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
<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.
# Props
name | default | description | required | type |
---|---|---|---|---|
browseFilesOnClick | false | If set to true browse files window will be opened when clicking on dropzone. | false | Boolean |