vad
vue-auto-dropzone
npm i vue-auto-dropzone
vad

vue-auto-dropzone

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

by Karl Tarvas

0.2.0 (see all)TypeScript:Built-In
npm i vue-auto-dropzone
Readme

vue-auto-dropzone

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

NameTypeDefaultDescriptionRequired
optionsObjectundefinedan object containing Dropzone configuration optionstrue
includeStylingBooleantruewhether to include default Dropzone styles on the componentfalse
destroyDropzoneBooleantruewhether to destroy the Dropzone instance on component unmountfalse

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

NameDescription
filesArray of all files
acceptedFilesArray of all accepted files
rejectedFilesArray of all rejected files
queuedFilesArray of all files queued for upload
uploadingFilesArray of all files currently uploading
addedFilesArray of all added files
activeFilesArray of all queued or currently uploading files
defaultOptionsObject containing default Dropzone configuration values
eventsArray of all event names the instance supports
hiddenFileInputA reference to the input element used by Dropzone
listenersArray of all elements with relevant listeners used by Dropzone
versionBundled 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

MethodDescription
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

Currently, this repo is iterating reasonably fast and the style is subject to change over time.
Pull requests are discouraged, but issue reports and feature requests are very welcome.

Downloads/wk

291

GitHub Stars

23

LAST COMMIT

2yrs ago

MAINTAINERS

1

CONTRIBUTORS

3

OPEN ISSUES

3

OPEN PRs

0
VersionTagPublished
0.2.0
latest
3yrs ago
0.1.3
beta
3yrs ago
No alternatives found
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

100
No reviews found
Be the first to rate