vue-auto-dropzone

NB! This repository is archived and will receive no further updates. I recommend using Filepond via vue-filepond for new projects.

A Dropzone.js component for Vue.
Typescript support, native slots, and more.

Installation

yarn install vue-auto-dropzone

Basic usage

<template>
    <vue-auto-dropzone ref="dz" :options="options" />
</template>
<script lang="ts">
    import Vue from 'vue';

    import VueAutoDropzone from 'vue-auto-dropzone';

    export default Vue.extend({
        components: {
            VueAutoDropzone,
        },
        data() {
            return {
                options: {
                    url: 'https://httpbin.org/anything',
                },
            };
        },
        mounted() {
            // The Dropzone instance is available after mounting
            const dz = this.$refs.dz;
        }
    });
</script>

Slots

All content is configurable by slots.
Slots receive the instance itself as their scope, meaning all relevant fields are directly accessible.
To omit default styling on the slot, also specify :include-styling="false".

<vue-auto-dropzone :options="options" :include-styling="false" v-slot="{ files, removeFile }">
    <p v-if="!files.length">Give me fuel, give me files</p>

    <figure v-for="file in files" :key="file.upload.uuid" @click="removeFile(file)">
        <img v-if="file.dataURL" :src="file.dataURL" :alt="file.name" />
        <figcaption>
            {{file.name}}
            <span v-if="file.upload.progress !== 100">{{ file.upload.progress.toFixed(0) }}%</span>
        </figcaption>
    </figure>
</vue-auto-dropzone>

Props

Name	Type	Default	Description	Required
`options`	`Object`	`undefined`	an object containing Dropzone configuration options	`true`
`includeStyling`	`Boolean`	`true`	whether to include default Dropzone styles on the component	`false`
`destroyDropzone`	`Boolean`	`true`	whether to destroy the Dropzone instance on component unmount	`false`

Events

All Dropzone events are emitted on the component with identical names and parameters.
Use standard Vue event handling to listen for events and respond to them.

<vue-auto-dropzone
    :options="options"
    @drop="onDrop"
    @success="onSuccess"
/>

Properties

Properties are exposed directly on the component.

mounted() {
    const dz = this.$refs.dz;
    const files = dz.files;
}

Property list

Name	Description
`files`	Array of all files
`acceptedFiles`	Array of all accepted files
`rejectedFiles`	Array of all rejected files
`queuedFiles`	Array of all files queued for upload
`uploadingFiles`	Array of all files currently uploading
`addedFiles`	Array of all added files
`activeFiles`	Array of all queued or currently uploading files
`defaultOptions`	Object containing default Dropzone configuration values
`events`	Array of all event names the instance supports
`hiddenFileInput`	A reference to the input element used by Dropzone
`listeners`	Array of all elements with relevant listeners used by Dropzone
`version`	Bundled Dropzone version

Methods

Methods are exposed directly on the component.
The instance is available once the component is mounted.

mounted() {
    const dz = this.$refs.dz;
    // Manually add a file
    dz.addFile('data:image/png;...', 'image.png');
}

Method list

Method	Description
`getOptions()`	Get all currently set Dropzone configuration values
`setOptions(value: Partial<IDropzoneOptions>)`	Set multiple configuration options at a time
`getOption(key: keyof IDropzoneOptions)`	Get the value of a single configuration option by key
`setOption(key: keyof IDropzoneOptions, value: any)`	Set a single configuration option
`addFile(file: File \| string, fileName?: string, mimeType?: string)`	Manually add a new file without triggering upload hooks. Input is either a `File` or a data string (`"data:image/..."`) with a file name and optional mime type
`addAndUploadFile(file: File \| string, fileName?: string, mimeType?: string)`	Manually add a new file and trigger all regular upload hooks. Input is either a `File` or a data string (`"data:image/..."`) with a file name and optional mime type
`removeFile(file: File)`	Remove the given file
`removeAllFiles(includeUploading = false)`	Remove all currently not uploading files, call `removeAllFiles(true)` to also remove actively uploading files
`processQueue()`	Process the upload queue when `autoProcessQueue` is disabled
`disable()`	Disable the instance, also removes event listeners etc
`enable()`	Reenable the instance
`createThumbnailFromUrl(file: File, sourceUrl: string, callback?: () => any, crossOrigin?: boolean)`	Create a thumbnail to display files already stored on the server
`setParams()`	Override the `params()` function
`setAccept()`	Override the `accept()` function
`setChunksUploaded()`	Override the `chunksUploaded()` function
`setFallback()`	Override the `fallback()` function
`setResize()`	Override the `resize()` function
`setTransformFile()`	Override the `transformFile()` function

Additional methods on the instance expose the internal Dropzone instance, but those are officially unsupported as they may change with a new Dropzone release.
All exposed internals come with corresponding setters similar to those shown above.

Contributing

Pull requests are welcome, same for issue reports and feature requests.
For issues, please include a clear repro sample.

For development, most of the logic resides in src/component/ComponentBase.vue.
VueAutoDropzone.vue is a generated file, do not make your modifications there.

To run the dev build, run yarn build:component:watch and yarn serve in separate sessions.
Before making a PR, be sure to run yarn test and yarn build.

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Etheryte / vue-auto-dropzone

Programming Languages

Labels

Projects that are alternatives of or similar to vue-auto-dropzone