Skip to main content

Overview

A modern file upload component featuring a 3D card effect, drag-and-drop functionality, and a responsive grid background pattern. Perfect for creating engaging file upload experiences.

Usage

<template>
  <FileUpload @onChange="handleFileChange">
    <FileUploadGrid />
    <div class="upload-content">
      <p>Drag and drop files here or click to browse</p>
    </div>
  </FileUpload>
</template>

<script setup>
const handleFileChange = (files) => {
  console.log('Uploaded files:', files)
}
</script>

Components

FileUpload

The FileUpload component serves as a wrapper for the file upload effect. It manages mouse events to create a 3D perspective.

Props

Prop NameTypeDefaultDescription
classString-Additional classes for styling the container element.

Events

Event NameTypeDescription
onChange(files: File[]) => voidCallback function triggered when files are added/uploaded.

FileUploadGrid

The FileUploadGrid component provides the background grid pattern for the file upload area. It is intended to be used within a FileUpload component to create the visual grid effect behind the upload interface.

Props

Prop NameTypeDefaultDescription
classString-Additional classes for custom styling.

Credits

Build docs developers (and LLMs) love