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
title	String	null	Allows you to change the default title of the component: "Select or drag the file to upload"
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
signedUrl	String	null	If provided, the signed URL will be requested from this endpoint instead of the default: "storage/signed_url"

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,
  }
}