Skip to main content
The 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

import { InputFile } from '@robojuice/velure-ui';

<InputFile
  label="Select File For Import"
  v-model="form.files"
  :form="form"
  accept="text/csv"
/>

​
Props

​
v-model
array
default:"undefined"
The list of files from the Inertia.js form object.
​
width
number | string
default:"100"
The width of the component as a percentage.
​
errors
string
default:"null"
Error message to display for validation errors.
​
label
string
default:"undefined"
The label displayed on the upload button.
​
multiple
boolean
default:"false"
Enables the selection of multiple files.
​
form
object
default:"{}"
The form object for managing processing states and progress tracking.
​
accept
string
default:"'*'"
The accepted file types (e.g., text/csv, image/*, etc.).

​
Example Use Cases

​
Single File Upload

<InputFile
  label="Upload a CSV"
  v-model="form.file"
  :form="form"
  accept="text/csv"
/>

​
Multiple File Uploads

<InputFile
  label="Upload Images"
  v-model="form.files"
  :form="form"
  multiple
  accept="image/*"
/>

​
Notes

  • Drag-and-Drop Support: Files can be dragged into the upload area to simplify the user experience.
  • Processing State: The form.processing property disables input and shows a processing message during uploads.
  • Progress Tracking: The form.progress.percentage property updates the progress bar dynamically.
For further customization, refer to the component’s source code.