見出し画像

filepond 作業メモ

mocotech

まあチュートリアルというよりは個人的にやってみたメモ

とりあえずの雛形からスタート

import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout'
import { Head } from '@inertiajs/react'

export default function FilepondDemoIndex({ auth }) {
  return (
    <AuthenticatedLayout
      user={auth.user}
      header={
        <h2 className="font-semibold text-xl text-gray-800 leading-tight">
          Filepond Demo
        </h2>
      }
    >
      <Head title="Filepond Demo" />

      <div className="py-12">
        <div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
          <div className="bg-white overflow-hidden shadow-sm sm:rounded-lg">
            <div className="p-6 text-gray-900">

              Contents here

            </div>
          </div>
        </div>
      </div>
    </AuthenticatedLayout>
  )
}

install

npm install react-filepond filepond-plugin-file-validate-type filepond-plugin-image-preview

コンポーネント読み込みとプラグイン登録

// Filepond
import { FilePond, registerPlugin } from 'react-filepond';
import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';
import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
// プラグインを登録
registerPlugin(FilePondPluginFileValidateType, FilePondPluginImagePreview);

            <div className="p-6 text-gray-900">

              <FilePond />

            </div>

とすると

CSSが当たってない

こうなる。まあこれは厳しいということで

// Import FilePond styles and plugins
import 'filepond/dist/filepond.min.css';
import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css';

これを読み込めば

なるほど、それっぽい。

送信してみる


import { Head, useForm } from '@inertiajs/react';

// Filepond
import { FilePond, registerPlugin } from 'react-filepond';
import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';
import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';

// Import FilePond styles and plugins
import 'filepond/dist/filepond.min.css';
import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css';

import PrimaryButton from '@/Components/PrimaryButton';
// プラグインを登録
registerPlugin(FilePondPluginFileValidateType, FilePondPluginImagePreview);

export default function FilepondDemoIndex({ auth }) {
  const { data, setData, processing, reset, post } = useForm({
    files: [],
  });

  const handleFilePondUpdate = (fileItems) => {
    // FilePondからファイルの情報を取得して、Inertia.jsのフォームデータを更新
    setData('files', fileItems.map(fileItem => fileItem.file));
  };

  const submit = (e) => {
    e.preventDefault();
    post(route('fileponds.store'), { onSuccess: () => reset() });
  };

  return (
    <AuthenticatedLayout
      user={auth.user}
      header={(
        <h2 className="font-semibold text-xl text-gray-800 leading-tight">
          Filepond Demo
        </h2>
      )}
    >
      <Head title="Filepond Demo" />

      <div className="py-12">
        <div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
          <div className="bg-white overflow-hidden shadow-sm sm:rounded-lg">
            <div className="p-6 text-gray-900">

              <form onSubmit={submit}>

                <FilePond
                name="files"
                files={data.files}
                onupdatefiles={handleFilePondUpdate}
                />

                <PrimaryButton disabled={processing}>Send</PrimaryButton>
              </form>

            </div>
          </div>
        </div>
      </div>
    </AuthenticatedLayout>
  );
}

おー。取れてますわな。

オプション


                <FilePond
                  name="files"
                  files={data.files}
                  allowMultiple={true}
                  onupdatefiles={handleFilePondUpdate}
                />

複数選択可能にすると


ふーむ、なるほどね。

さらに強力にもできる、が、

npm install react-filepond filepond-plugin-file-validate-type filepond-plugin-image-preview filepond-plugin-image-exif-orientation filepond-plugin-image-edit

最終的にプラグインを追加する事もできる。ただしこれは有償のpluginと連携する事が前提でそれ以外は自分でまあまあ何とかしないといけないので、大変かもしれないね。


この記事が気に入ったらサポートをしてみませんか？