supabase 画像投稿

参考

input fileに画像プレビューを追加する

  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
  
  const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
      const imageUrl = URL.createObjectURL(file); // 選択した画像のURLを作成
      setPreviewUrl(imageUrl);
    }
  };

  const fileInputRef = useRef<HTMLInputElement>(null);

  const handleButtonClick = () => {
    // ファイル入力のクリックを発火
    fileInputRef.current?.click();
  };

 <button
        onClick={handleButtonClick}
        className="bg-gray-400 h-60 w-full flex justify-center items-center border"
      >
        {previewUrl ? (
          <Image
            src={previewUrl}
            width={50}
            height={50}
            alt="Preview"
            className="object-cover w-full h-full pointer-events-none"
          />
        ) : (
          <p>画像を選択してください</p>
        )}
      </button>

ワッキー

投稿完了時と失敗時にトーストを表示したい
トーストはクライアントサイドでしか使えない
form actionの返り値を受け取れればstateで何とかなりそうな予感
useActionStateという機能があるらしい

試して見たがエラーがでる
エラー: (0、react__WEBPACK_IMPORTED_MODULE_1__.useActionState) は関数ではないか、その戻り値が反復可能ではありません
下記記述を見ると今はまだ後継前のフックuseFormStateを使った方が良さそう