FileUpload

Capture file input from users with drag and drop.

This component is only for capturing file input from users and does not handle actual uploading of files or making HTTP requests.

#
Documentation

#
Usage

Drag and drop files here

SVG, PNG, JPG or GIF (max. 2MB)


"use client";
 
import { toaster } from "@optiaxiom/react";
import { FileUpload, FileUploadDropzone } from "@optiaxiom/react/unstable";
 
export function App() {
  return (
    <FileUpload
      accept={["image/*"]}
      onFilesDrop={(files) => {
        toaster.create(`${files.length} files added!`);
      }}
      w="384"
    >
      <FileUploadDropzone description="SVG, PNG, JPG or GIF (max. 2MB)" />
    </FileUpload>
  );
}

#
Props

#
FileUpload

Supports all Box props in addition to its own. Renders a <div> element.

Prop
`accept` File types to accept for upload. An array of strings of the MIME type and/or file extensions to accept. `["image/*"] [".png", ".jpg"]` `string[]`
`asChild` Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. `false \| true`
`className` `string`
`disabled` Whether the file uploader is disabled. `false \| true`
`onFilesDrop` Callback function called when files are dropped or selected `(files: File[]) => void`

#
FileUploadDropzone

Supports all Box props in addition to its own. Renders a <div> element.

Prop
`asChild` Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. `false \| true`
`className` `string`
`description` Add secondary text after the primary label. `string`
`label` The label of the dropzone. `string` Default: `Drag and drop files here`
`overlay` Whether to place the dropzone as an overlay fully covering the parent container and only visible when user is dragging a file into the browser. `false \| true` Default: `false`

#
FileUploadTrigger

Supports all Button props in addition to its own. Renders a <button> element.

Prop
`addonAfter` Display content inside the button after `children`. `ReactNode`
`addonBefore` Display content inside the button before `children`. `ReactNode`
`appearance` Control the appearance by selecting between the different button types. `"default" \| "danger" \| "primary" \| "subtle" \| "danger-outline" \| "default-opal" \| "inverse" \| "primary-opal"`
`asChild` Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. `false \| true`
`className` `string`
`disabled` Whether the button is disabled. `false \| true`
`icon` Display an icon before or after the button content or omit `children` to only show the icon. `ReactNode`
`iconPosition` Control whether to show the icon before or after the button content. `"end" \| "start"`
`loading` Whether to show loading spinner inside the button. `false \| true`
`size` Control the size of the button. `"sm" \| "md" \| "lg"`
`square` Whether button should have square shape. `false \| true`

#
Changelog

#
1.6.0

Added component