InputFile.vue component is a Vue.js component designed to work seamlessly with Inertia.js and Laravel forms. It provides an intuitive interface for file uploads, supports drag-and-drop functionality, and integrates with form objects for processing states and progress tracking.
Features
File Upload Support
Allows for file uploads with customizable file type restrictions.
Drag-and-Drop
Enables drag-and-drop functionality for a user-friendly experience.
Form Integration
Works with Inertia.js/Laravel forms to manage processing states and upload progress.
Dynamic File List
Displays a list of uploaded files with the ability to remove files.
Usage
Basic Example
Props
array
default:"undefined"
The list of files from the Inertia.js form object.
number | string
default:"100"
The width of the component as a percentage.
string
default:"null"
Error message to display for validation errors.
string
default:"undefined"
The label displayed on the upload button.
boolean
default:"false"
Enables the selection of multiple files.
object
default:"{}"
The form object for managing processing states and progress tracking.
string
default:"'*'"
The accepted file types (e.g.,
text/csv, image/*, etc.).Example Use Cases
Single File Upload
Multiple File Uploads
Notes
- Drag-and-Drop Support: Files can be dragged into the upload area to simplify the user experience.
- Processing State: The
form.processingproperty disables input and shows a processing message during uploads. - Progress Tracking: The
form.progress.percentageproperty updates the progress bar dynamically.