WeS3Dropzone

A highly interactive and flexible component for uploading files to S3. It supports drag & drop, previews, validations, and fully customizable interactions.

Examples

Basic Usage

By default, the component allows uploading one file of any type

<we-s-3-dropzone />

Multiple

If true enable possibility to add more than 1 file

<we-s-3-dropzone multiple />

Accepted Files

List of accepted files

<we-s-3-dropzone accepted-files=".csv,.xls,.xlsx'" />

Max files

Max files possible to upload

<we-s-3-dropzone :max-files="5" />

Hide remove all

Hide remove files button

<we-s-3-dropzone hide-remove-all />

Existing attachments

Binding through which separate management of existing attachments is achieved

<we-s-3-dropzone
  v-model="model"
  v-model:existing-attachments="existingAttachments"
/>

Events

Possible events that can be handled by the component

  <we-s3-dropzone
    @progressing="handleProgressing"
    @reset="onReset"
  />

Features

• Drag & drop support with visual feedback
• File validation (extensions, duplicates, max count)
• Custom file type icons and colors with image preview dialog
• Automatic S3 upload integration
• Duplicate prevention
• Emits progressing and reset events

Props

Prop	Type	Default	Description
multiple	Boolean	false	Allows multiple file uploads
acceptedFiles	String	null	Accepted file extensions, comma-separated
maxFiles	Number/String	null	Maximum number of files allowed
hideRemoveAll	Boolean	false	Hides the "Remove files" button

v-model Bindings

The component provides several v-model bindings for controlling its state:

Binding	Type	Description
v-model:existing-attachments	Array	List of existing documents, loaded without uploading on S3

Events

Event	Payload	Description
update:modelValue	Array<File>	Emitted whenever the list of uploaded files changes
progressing	Boolean	Indicates if all files have finished uploading
reset	any	Emitted when the component is cleared

---

Exposed Methods

Method	Description
getFiles()	Returns an array of uploaded file data
clearFile()	Clears all uploaded files

---

File Object Structure

Each uploaded file contains:

{
  name: String,
  size: Number,
  type: String,
  s3: {
    uuid: String,
    key: String,
    url: String,
  }
}