File input

A FileInput styles a native file picker. It renders a <label> around an <input type="file">.

Usage#

import { FileInput } from "@clawscale/react";

<FileInput text="Choose a CSV export" onInputChange={(event) => setFile(event.currentTarget.files?.[0])} />

Examples#

Basic#

text fills the field. Pass <input> attributes such as accept through inputProps.

Choose a CSV export

core/file-input/basic.tsx

import { FileInput } from "@clawscale/react";

export default function FileInputBasic() {
  return <FileInput inputProps={{ accept: ".csv" }} text="Choose a CSV export" />;
}

Button text#

buttonText replaces the default Browse label.

Choose a schema file

core/file-input/button-text.tsx

import { FileInput } from "@clawscale/react";

export default function FileInputButtonText() {
  return <FileInput buttonText="Upload" inputProps={{ accept: ".json" }} text="Choose a schema file" />;
}

Selected file#

FileInput does not show the chosen file by itself. Read it in onInputChange, then pass its name as text and set hasSelection.

Choose a CSV export

core/file-input/selected-file.tsx

import { FileInput } from "@clawscale/react";
import { useState } from "react";

export default function FileInputSelectedFile() {
  const [fileName, setFileName] = useState<string>();
  return (
    <FileInput
      hasSelection={fileName !== undefined}
      inputProps={{ accept: ".csv" }}
      text={fileName ?? "Choose a CSV export"}
      onInputChange={(event) => setFileName(event.currentTarget.files?.[0]?.name)}
    />
  );
}

Fill#

fill stretches the field to the width of its container.

Choose a Parquet file to backfill orders_daily

core/file-input/fill.tsx

import { FileInput } from "@clawscale/react";

export default function FileInputFill() {
  return <FileInput fill inputProps={{ accept: ".parquet" }} text="Choose a Parquet file to backfill orders_daily" />;
}

Size#

size accepts small, medium (default) and large.

SmallMediumLarge

core/file-input/size.tsx

import { FileInput } from "@clawscale/react";

export default function FileInputSize() {
  return (
    <>
      <FileInput size="small" text="Small" />
      <FileInput size="medium" text="Medium" />
      <FileInput size="large" text="Large" />
    </>
  );
}

Props interface#

FileInput also accepts the HTML attributes of a <label>. Its onChange goes to the label, so listen with onInputChange.

interface FileInputProps extends React.LabelHTMLAttributes<HTMLLabelElement>, Props@clawscale/react

Props	Description
`buttonText`	`string` = `"Browse"` The button text to display on the right side of the input.
`disabled`	`boolean` Whether the file input is non-interactive. Setting this to `true` will automatically disable the child input too.
`fill`	`boolean` Whether the file input should take up the full width of its container.
`hasSelection`	`boolean` = `false` Whether the user has made a selection in the input. This will affect the component's text styling. Make sure to set a non-empty value for the text prop as well.
`inputProps`	`React.HTMLProps<HTMLInputElement>` The props to pass to the child input. `disabled` will be ignored in favor of the top-level prop. `type` will be ignored, because the input _must_ be `type="file"`. Pass `onChange` here to be notified when the user selects a file.
`large`deprecated	`boolean` = `false` Whether the file input should appear with large styling. use `size="large"` instead.
`onInputChange`	`React.ChangeEventHandler<HTMLInputElement>` Callback invoked on `<input>` `change` events.
`size`	`Size` The size of the file input.
`small`deprecated	`boolean` = `false` Whether the file input should appear with small styling. use `size="small"` instead.
`text`	`React.ReactNode` = `"Choose file..."` The text to display inside the input.