【Web Library】Nextjs13で覚える便利なライブラリ【#１４Form type file】

【#１４Form type file】

YouTube: https://youtu.be/E_qf9PSpAuE

https://youtu.be/E_qf9PSpAuE

今回から画像のアップロード処理について解説します。
使用する画像につきましては、こちらのサイトから
ファイル容量が軽めでお好きなものを選んでください。

https://pixabay.com/ja/

https://unsplash.com/ja

まずはフォームを作成します。

「app」->「upload」フォルダを作成して、
「page.tsx」を作成します。

formタグには「encType="multipart/form-data"」
inputタグには「multiple accept="image/*"」
の設定をすることができます。

app/upload/page.tsx

import React from 'react';

const Page = () => {
  return (
    <div className="text-white">
      <form
        encType="multipart/form-data"
        className="flex flex-col items-center gap-2"
      >
        <input type="file" name="upload_image" multiple accept="image/*" />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
};

export default Page;