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'

Checkbox Input