2024/2/12 画像置き場を作る①:画像のアップロード・プレビュー

発端

当ブログで画像を貼り付ける際、next.jsプロジェクトのpublicディレクトリ配置しているので外部に置けるようにしたい

計画

1. 画像のアップロード、及びページ内でのプレビュー
2. Cloudflare R2へのアップロード

本記事では1までやる

画像のアップロード、及びページ内でのプレビュー

サンプルプロジェクト

GitHub: プロジェクト

デプロイしたもの

本編

next.jsでプロジェクト作成/daisyuiの導入(割愛)

app/page.tsxに実装していく

  const [uploadImage, setImage] = useState("/remove.svg");
  const onInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (!e.target.files) return;
    const file = e.target.files[0];
    setImage(window.URL.createObjectURL(file));
  };

• [uploadImage, setImage]で状態管理、デフォルトの画像を指定(もっとしっくりくる画像がありそう)

• onInputChangeにアップロード時に呼ばれるイベントを定義 中身ある場合のみURL取得

<input type="file"
          id="r2" name="r2"
          accept="image/png, image/jpeg"
          className="file-input w-full max-w-xs"
          onChange={onInputChange} />

inputタグで受け付けるファイル種別は.jpg, .pngのみにしておく

 <div className="divider lg:divider-horizontal h-full"></div>
      <Image src={uploadImage} width={500} height={500} alt="upload image" className="flex-1"></Image>

分割して右側にuploadImageをプレビュー表示

アップロード用のボタンを仮設置