File Input

Drag-and-drop style file picker for single-file selection with explicit accept rules.

Overview

FileInput is the shared single-file picker used for uploads such as logos, images, and editor attachments.

It is built on react-dropzone and provides:

click-to-upload behavior
drag-active styling
explicit accept rules
optional label and helper text

Use it when the user should choose a single file and the surrounding workflow will handle the upload.

Basic Usage

<FileInput
  label="Group Image"
  placeholder="Upload image"
  accept={{ 'image/*': ['.jpg', '.jpeg', '.png'] }}
  Icon={Upload}
  handleFileChange={(file) => setValue('image', file)}
/>

Brand Settings Pattern

<FileInput
  placeholder="Upload Full Logo"
  className="h-8"
  accept={{ 'image/*': ['.jpg', '.jpeg', '.png'] }}
  Icon={Upload}
  handleFileChange={(file) => updateBrandLogo({ newFile: file, logoType: 'full' })}
/>

This is the production pattern used in BrandAppearanceSettings.tsx.

Props

Prop	Type	Default	Description
`handleFileChange`	`(file: File) => void`	—	Required. Called with the first accepted file.
`className`	`string`	—	Additional button classes.
`accept`	`Accept`	—	Required dropzone accept map.
`isUploadingFile`	`boolean`	—	Disables the input during upload.
`label`	`string`	—	Optional label above the field.
`Icon`	`ComponentType`	—	Required leading icon.
`extraInformation`	`string`	—	Optional helper text below the field.
`placeholder`	`string`	`'Upload'`	Text shown before a file is selected.

Important Behavior

only the first accepted file is used
selection is handled through handleFileChange, not a normal register(...) flow
the field shows the selected file name after selection

With react-hook-form

Use Controller or manual setValue(...), not plain register.

<Controller
  control={control}
  name="image"
  render={({ field }) => (
    <FileInput
      label="Group Image"
      accept={{ 'image/*': ['.jpg', '.jpeg', '.png'] }}
      Icon={Upload}
      handleFileChange={field.onChange}
    />
  )}
/>

Brand Dashboard Usage

Pattern	Path	Notes
Brand logo uploads	`fsai/apps/brand-dashboard/src/pages/BrandWorkspaceSettings/BrandAppearanceSettings/BrandAppearanceSettings.tsx`	Multiple small upload controls for different logo slots.
Organization settings logo	`fsai/apps/brand-dashboard/src/pages/OrganizationSettings/OrganisationSettings.components.tsx`	Compact inline upload control.
Group chat image	`fsai/apps/brand-dashboard/src/pages/Home/ChatOverview/ChatOverview.components.tsx`	Form-controlled image selection.
Helpdesk editor attachment upload	`fsai/apps/brand-dashboard/src/pages/AdminPanel/Helpdesk/ArticleEditor.tsx`	Uses uploading state and larger drop target presentation.

Guidelines

Do use accept to make file expectations explicit
Do wire the selected file into the surrounding upload workflow
Do use Controller or explicit setters in forms
Don't expect FileInput to handle multi-file selection
Don't use plain register(...) as if this were a normal text input

File Input

On this page