File Upload

The FileUpload component allows users to upload multiple files, file preview, validation (max size & max files), and integration with form libraries like React Hook Form. It supports custom labels, placeholders, error states, and localized messages.

import { FileUpload } from "tawuniya/components";

👉 View in Storybook

---

Props

Prop	Type	Default	Description
label	string	—	Label text displayed in the upload area.
placeholder	string	—	Placeholder text shown under the label.
id	string	"file-upload"	Unique identifier for the input.
error	string	—	Error message displayed below the uploader.
maxSize	number	10	Maximum file size in MB.
maxFiles	number	5	Maximum number of files allowed.
className	string	—	Additional Tailwind classes for the wrapper.
value	FileData[]	—	Current list of files (controlled).
defaultValue	FileData[]	[]	Default list of files (uncontrolled).
onChange	(files: FileData[]) => void	—	Callback triggered when the file list changes.
form	{ controller: any; control: any; name: string }	—	React Hook Form integration using Controller.
render	ReactNode	—	Render prop for customizing the file upload component.
accept	string	—	MIME types of files that are accepted.
disabled	boolean	false	Disables the file upload component.

Usage

With Controlled Form

import { useState } from "react";
import { FileUpload } from "tawuniya/components";

export default function BasicExample() {
  const [files, setFiles] = useState([]);

  return (
    <FileUpload
      label="Upload Documents"
      placeholder="Max file size"
      value={files}
      onChange={setFiles}
    />
  );
}

With Error State

<FileUpload label="Resume" error="File is required" />

Custom Limits (Max Size & Max Files)

<FileUpload label="Upload Images" maxSize={2} maxFiles={3} />

With React Hook Form

import { useForm, Controller } from "react-hook-form";
import { FileUpload } from "tawuniya/components";

export default function FormExample() {
  const { control, handleSubmit } = useForm({
    defaultValues: { attachments: [] },
  });

  const onSubmit = (data: any) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <FileUpload
        label="Attachments"
        form={{ controller: Controller, control, name: "attachments" }}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

With Custom Component

<FileUpload
  label="Upload Documents"
  render={<Button size="md">Upload</Button>}
/>

With Accept Props

<FileUpload label="Upload Documents" accept="application/pdf, .png, .docx" />

Notes

• Works as a controlled component with value + onChange, or with React Hook Form via the form prop.
• Supports multiple file types: images, audio, video, documents, archives.
• Automatically displays file icon, name, and formatted size.
• Provides remove button for each uploaded file.