Skip to Content
ビューコードエディターフォームFileInput

FileInput

FileInputコンポーネントは、フォームでファイルを入力するためのコンポーネントです。

基本的な使い方

FileInputコンポーネントは、Formコンポーネント内で使用します。 入力したファイルは、useExecuteActionLazyでアクションを呼び出してサーバーへの送信やストレージへの保存ができます。

初期値はFormコンポーネントのinitialValuesでFileかstringが設定できます。

import {
  Form,
  Button,
  FileInput,
  useExecuteAction,
  useExecuteActionLazy,
  LoadingIndicator,
} from "@basemachina/view";
 
const App = () => {
  const { data, loading } = useExecuteAction("get-user", { id: 123 });
  const [updateUserIcon] = useExecuteActionLazy("update-user-icon");
  const [uploadUserIcon] = useExecuteActionLazy("upload-user-icon");
 
  if (loading) return <LoadingIndicator />;
 
  const user = data.results[0].success;
 
  const handleSubmit = async ({ values }) => {
    // ファイルをストレージにアップロード
    const { data } = await uploadUserIcon({ id: user.id, icon: values.icon });
    // アップロードしたファイルのURLをDBに保存
    await updateUserIcon({
      id: user.id,
      icon: data.results[0].success,
    });
  };
 
  return (
    <Form initialValues={{ icon: user.icon }} onSubmit={handleSubmit}>
      <FileInput name="icon" label="アイコン" />
      <Button type="submit" title="保存" />
    </Form>
  );
};
 
export default App;
使用例

詳細なインターフェース

名前説明デフォルト値
nameフィールドの名前を指定します。必須
labelラベルを指定します。なし
disabledフィールドを無効にするかどうかを指定します。false
maxHeightファイルのプレビューの高さの最大値を指定します。'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', 'full' のいずれかを指定できます。'md'
onChangeファイルが選択・削除されたときに呼び出される関数を指定します。引数として、選択したファイル（File インスタンス）か、削除の場合はundefinedが渡されます。なし

セキュリティの都合上、FileInputにはvalueを設定できません。

onChangeの使い方

フォーム#value, onChange propsの使い方をご覧ください。

CheckboxInput