Getting Started

Welcome to Vue3 Dropzone! This guide will help you get up and running with the component in your Vue 3 application.

Installation

Install the package using your preferred package manager:

npm install @jaxtheprime/vue3-dropzone
# or
yarn add @jaxtheprime/vue3-dropzone

Basic Setup

Global Registration

Import and register the component in your main application file:

// In your main.js or main.ts
import { createApp } from 'vue'
import Vue3Dropzone from '@jaxtheprime/vue3-dropzone'
import "@jaxtheprime/vue3-dropzone/dist/style.css" // Don't forget the styles!

const app = createApp(App)
app.component('Vue3Dropzone', Vue3Dropzone)
app.mount('#app')

Local Registration

You can also register the component locally in your Vue components:

import Vue3Dropzone from '@jaxtheprime/vue3-dropzone'
import "@jaxtheprime/vue3-dropzone/dist/style.css"

export default {
  components: {
    Vue3Dropzone
  }
}

Basic Usage

Minimal Example

Here's the simplest way to use Vue3 Dropzone:

<template>
  <div>
    <h2>File Upload</h2>
    <Vue3Dropzone v-model="files" />
  </div>
</template>

<script setup>
import { ref } from 'vue'

const files = ref([])
</script>

Complete Example

For a more advanced setup with additional options:

<template>
  <div class="p-6">
    <Vue3Dropzone
      v-model="files"
      multiple
      width="100%"
      height="400px"
      imgWidth="45%"
      imgHeight="300px"
      :maxFileSize="10"
      :maxFiles="2"
      :state="state"
    />
    <div class="mt-4">
      <p>Selected files: {{ files.length }}</p>
      <button @click="clearFiles" class="px-4 py-2 bg-red-500 text-white rounded">
        Clear Files
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const files = ref([])
const state = ref('indeterminate') // Can be 'indeterminate', 'success', or 'error'

// Clear all files
const clearFiles = () => {
  files.value = []
  state.value = 'indeterminate'
}
</script>

Version Support

• Vue.js: 3.x
• Browsers: Modern browsers with ES6 support

Three Flexible Modes

Vue3 Dropzone offers three different modes to fit your needs:

Drop Mode (Default)

Standard file upload dropzone for selecting new files.

<Vue3Dropzone v-model="files" />

Preview Mode

Display existing files with optional interaction.

<Vue3Dropzone
  v-model="files"
  v-model:previews="existingFiles"
  mode="preview"
  :allowSelectOnPreview="true"
/>

Edit Mode

Combined functionality for managing both new and existing files.

<Vue3Dropzone
  v-model="files"
  v-model:previews="existingFiles"
  mode="edit"
  multiple
/>

Basic Customization

You can customize the component with common props:

<template>
  <Vue3Dropzone
    v-model="files"
    multiple
    :maxFiles="5"
    :maxFileSize="10"
    accept="image/*,application/pdf"
    width="100%"
    height="300px"
  />
</template>

Next Steps

Now that you're set up, explore the API Reference for complete prop, event, and styling documentation, or check out the demo to see the component in action!