File Upload

A modern file upload component with a 3D card effect, drag-and-drop functionality, and a responsive grid background pattern.

API

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.

Emits

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

Usage

MyComponent.vue 
<FileUpload class="additional-class">
  <!-- Your content here -->
</FileUpload>

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.

Usage

MyComponent.vue 
<FileUploadGrid class="custom-class" />

Component Code

You can copy and paste the following code to create these components:

FileUpload.vue
FileUploadGrid.vue
Credits
File Tree
A component used to showcase the folder and file structure of a directory.
Flickering Grid
A flickering grid background made with Canvas, fully customizable using Tailwind CSS.