File Trigger
File Triggers are your go-to for grabbing files from the file system, acting like a digital fishing rod to hook up goodies from local or cloud storage.
Basic
Basic usage of a FileTrigger.
Installation
If you hit any issues, make sure you check out the installation guide here for more information.
npx @intentui/cli@latest add file-triggerComposed Components
When you install this component via the CLI, it automatically loads all composed components, so you don’t need to add them individually.
The File Trigger comes packed with several components to enhance functionality and provide a seamless experience.
Manual Installation
Make sure you also install the composed components and the required packages for the component to function properly.
npm i react-aria-components @intentui/iconsYou can copy the code below and paste it into your component folder.
"use client"
import { IconCamera, IconFolder, IconPaperclip45 } from "@intentui/icons"
import {
FileTrigger as FileTriggerPrimitive,
type FileTriggerProps as FileTriggerPrimitiveProps,
} from "react-aria-components"
import type { VariantProps } from "tailwind-variants"
import { Button, type buttonStyles } from "./button"
interface FileTriggerProps extends FileTriggerPrimitiveProps, VariantProps<typeof buttonStyles> {
withIcon?: boolean
isDisabled?: boolean
ref?: React.RefObject<HTMLInputElement>
className?: string
}
const FileTrigger = ({
intent = "outline",
size = "medium",
shape = "square",
withIcon = true,
ref,
className,
...props
}: FileTriggerProps) => {
return (
<FileTriggerPrimitive ref={ref} {...props}>
<Button
className={className}
isDisabled={props.isDisabled}
intent={intent}
size={size}
shape={shape}
>
{withIcon &&
(props.defaultCamera ? (
<IconCamera />
) : props.acceptDirectory ? (
<IconFolder />
) : (
<IconPaperclip45 />
))}
{props.children ? (
props.children
) : (
<>
{props.allowsMultiple
? "Browse a files"
: props.acceptDirectory
? "Browse"
: "Browse a file"}
...
</>
)}
</Button>
</FileTriggerPrimitive>
)
}
export type { FileTriggerProps }
export { FileTrigger }
Anatomy
Import the components and use them as shown below, adapting the structure to fit each component.
import { FileTrigger } from "@/components/ui/file-trigger"
<FileTrigger />Folder
A FileTrigger that allows users to select a folder from the file system.
Multiple
A FileTrigger that enables users to select multiple files.
Camera
A FileTrigger that lets users capture images using their device's camera.
Avatar
A FileTrigger that allows users to select an avatar from their file system. It integrates components like avatar and drop-zone, enabling users to either drag and drop or manually select a file.
When you install this component via the CLI, it automatically loads all composed components, so you don’t need to add them individually.
The File Trigger comes packed with several components to enhance functionality and provide a seamless experience.
Controlled
You can use the onSelect prop to snag the selected files.
Disabled
A FileTrigger that is disabled.