File Trigger
File Triggers let you fetch files from your system, working like a digital hook to pull in content from local drives or cloud storage.
Example
Features
A file input can be created with an <input type=“file”> element, but this supports limited styling options and may not integrate well with the overall design of a website or application. To overcome this, FileTrigger extends the functionality of the standard file input element by working with a pressable child such as a Button to create accessible file inputs that can be styled as needed.
- Customizable – Works with any pressable React Aria or React Spectrum component, and custom components built with usePress.
Installation
Button. Make sure you have installed and configured it before using this component.Install following dependencies:
npm install react-aria-components tw-animate-css tailwindcss-react-aria-components class-variance-authority lucide-react clsx tailwind-merge motionAdd cn helper using clsx and twMerge for conditional class merging in Tailwind components.
Copy and paste the following code into your project.
npx @libravelui@latest add file-triggerAnatomy
import { FileTrigger } from "@/components/ui/core/file-trigger";<FileTrigger />Another Examples
Accepted Type
Allows only specific file types to be selected, ensuring uploads meet the required format.
Media Capture
To specify the media capture mechanism to capture media on the spot, pass user for the user-facing camera or environment for the outward-facing camera via the defaultCamera prop.
This behavior only works on mobile devices. On desktop devices, it will open the file system like normal. Read more about capture.
Multiple Files
Lets users upload several files simultaneously for easier batch submission.
Loading
Shows a loading indicator while files are being uploaded, providing clear feedback during the process.
With Drop Zone
Uses the Drag and Drop, which contains the FileTrigger component inside it. This allows users to upload files by either dragging them into the drop zone or selecting them manually. For more details, see:
Props
Loading types…