📑

【Web Library】Nextjs13で覚える便利なライブラリ【#１５image preview】

2023/03/14に公開

Next.js

tech

【#１５image preview】

YouTube: https://youtu.be/GyylDvlGHXA

https://youtu.be/GyylDvlGHXA

今回はフォームにセットした画像のプレビューを表示します。
やり方はいくつかあるのですが、

今回は「URL.createObjectURL」ではなく、
「FileReader」を使用して実装します。

app/upload/page.tsx

'use client';
import Image from 'next/image';
import React, { ChangeEvent, useState } from 'react';

const Page = () => {
  const [images, setImages] = useState([]);

  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    // objectURL = URL.createObjectURL(object);
    const files = Array.from(e.target.files as FileList);

    files.forEach((file) => {
      const reader = new FileReader();
      reader.onload = () => {
        if (reader.readyState === 2) {
          setImages([...images, reader.result] as any);
        }
      };
      reader.readAsDataURL(file);
    });
  };

  return (
    <div className="text-white">
      <form
        encType="multipart/form-data"
        className="flex flex-col items-center gap-2"
      >
        <input
          type="file"
          name="upload_image"
          onChange={handleChange}
          multiple
          accept="image/*"
        />
        <div className="flex flex-wrap gap-2">
          {images.map((img) => (
            <Image
              src={img}
              key={img}
              alt="preview image"
              width="100"
              height="100"
            />
          ))}
        </div>
        <button type="submit">Submit</button>
      </form>
    </div>
  );
};

export default Page;

【#１５image preview】

Discussion