<input type='file' id='avatar' name='avatar' accept='image/png, image/jpeg' />

import React, { useState } from 'react';
 
const PostLoading = () => {
  const [imageUrl, setImageUrl] = useState<string | null>(null);
 
  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (file) {
      const reader = new FileReader();
      reader.onloadend = () => {
        setImageUrl(reader.result as string);
      };
      reader.readAsDataURL(file);
    }
  };
 
  return (
    <div className='mt-24'>
      <input type='file' accept='image/*' onChange={handleFileChange} />
      {imageUrl && <img src={imageUrl} alt='Uploaded' />}
    </div>
  );
};

const PostLoading = () => {
  const [imageUrl, setImageUrl] = useState<string | null>(null);
  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (file) {
      const reader = new FileReader();
      reader.onloadend = () => {
        setImageUrl(reader.result as string);
      };
      reader.readAsDataURL(file); // 1. 비동기적으로 파일을 URL 형태로 읽는다.
    }
  };
 
  return (
    ...
      {imageUrl && <img src={imageUrl} alt='Uploaded' />} // 2. 읽은 파일의 메모리상 주소를 이용해 렌더링 한다.
  );
};

  const handleChange = async ({
    target,
  }: React.ChangeEvent<HTMLInputElement>) => {
    const { files: newFiles } = target;
    ...
    const _newFiles = [...newFiles]
    setImages([
      ...images,
      ..._newFiles.map((file) => ({
        name: file.name,
        url: URL.createObjectURL(file),
        file,
      })),
    ]);
   ...

interface compressFileImageOptions {
  maxSize: number;
  compactSize: number;
  quality: number;
  extension: 'jpeg' | 'webp' | 'png';
}
type compressFileImage = (
  file: File,
  options?: compressFileImageOptions,
) => Promise<File>;
 
const defaultCompressOptions: compressFileImageOptions = {
  maxSize: 2 ** 20, // 최대 파일 크기 1MB
  compactSize: 2 ** 10 * 100, // 압축 후 최대 파일 크기 100KB
  quality: 0.7,
  extension: 'webp',
};
 
/**
 * compressFileImage 은 File 객체를 options 에 설정된 maxSize 보다 작은 크기로 압축하고 extension 확장자로 변환하여 저장합니다.
 * canvas 를 이용해 이미지를 압축하며 , 파일의 너비와 높이를 원 사이즈 / compactSize 만큼의 비율로 크기를 줄입니다.
 *
 * 2024/10/11 업데이트
 * 파일이 너무 크거나 손상된 경우엔 이미지 업로드를 거부하도록 합니다.
 * 만약 파일은 문제 없으나 canvas 를 사용하지 못하는 경우엔 원본 파일을 반환합니다.
 * @param file 압축할 파일
 * @param options maxSize: 압축할 파일의 최대 크기, compactSize: 압축된 파일의 최소 크기 , quality: 압축 품질, extension: 압축할 파일의 확장자
 */
export const compressFileImage: compressFileImage = async (file, options) => {
  const { maxSize, compactSize, quality, extension } = {
    ...defaultCompressOptions,
    ...options,
  };
 
  if (file.size <= maxSize) {
    return file;
  }
  const image = new Image();
  const reader = new FileReader();
  /**
   * FileReader 는 비동기적으로 load 되고 비동기적으로 데이터를 읽습니다.
   * result 는 reader 가 읽은 데이터를 base64 로 인코딩한 문자열 입니다.
   * 2024/10/11 에러 시 reject 처리 추가
   */
  const result = await new Promise<string>((resolve, reject) => {
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result as string);
    reader.onerror = (error) => reject(error);
  });
 
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');
 
  /* 만약 canvas 를 사용 못하는 환경이라면 원본 파일을 반환 합니다. */
  if (!context) {
    return file;
  }
 
  /**
   * 이미지의 src 를 base64 로 인코딩된 문자열로 설정합니다.
   * 이로 인해 canvas 에 해당 이미지를 그릴 수 있습니다.
   */
  image.src = result;
  /**
   * 이미지가 load 될 때 까지 프로미스 체인을 진행하지 않고 기다립니다.
   */
  await new Promise<void>((resolve) => {
    image.onload = () => resolve();
  });
  /**
   * 원본 이미지를 인수로 선택한 compactSize 만큼의 비율로 줄입니다.
   * compactSize 는 인수로 받은 압축된 파일의 최대 용량 입니다.
   */
  const ratio = Math.sqrt(compactSize / file.size);
  const { width, height } = image;
  canvas.width = width * ratio;
  canvas.height = height * ratio;
  context.drawImage(image, 0, 0, canvas.width, canvas.height);
 
  const compressedFile: Promise<File> = new Promise((resolve) => {
    canvas.toBlob(
      (blob) => {
        /* blob 생성에 실패하면 원본 데이터를 resolve 합니다. */
        if (!blob) {
          resolve(file);
          return;
        }
        resolve(
          new File([blob], file.name, {
            type: `image/${extension}`,
            lastModified: Date.now(),
          }),
        );
      },
      `image/${extension}`,
      quality,
    );
  });
 
  return compressedFile;
};

export interface FileInfo {
  name: string;
  url: string;
  file: File;
}

 
setImages: async (images) => {
    /**
     * 사진이 추가되지 않고  사진이 삭제 된 경우엔 압축을 시작하지 않고 종료합니다.
     */
    if (images.length < get().images.length) {
      set({ images, isCompressing: false, inputKey: get().inputKey + 1 });
      return;
    }

/* 동기적으로 압축 예정인 이미지 파일을 업데이트 합니다. */
set({ images, isCompressing: true, inputKey: get().inputKey + 1 });
 
const compressedFiles = await Promise.allSettled(
  images.map(({ file }) => compressFileImage(file)),
);

/* 이미지 압축 실패 했던 내역에 대한 로그 남기기 */
compressedFiles
  .filter((result) => result.status === 'rejected')
  .forEach((result, index) => {
    console.error(
      `${images[index].name}을 압축하는데 실패했습니다.`,
      result.reason,
    );
  });
 
const resolvedImages = compressedFiles
  .map((result, index) => ({
    ...images[index],
    file: result.status === 'fulfilled' ? result.value : images[index].file,
  }))
  .filter((_, index) => compressedFiles[index].status === 'fulfilled');

    /**
     * 압축에 실패한 경우엔 input key를 증가 시켜 다시 마운트 합니다.
     * input 이 업데이트 되었을 때의 순간과 압축이 완료된 순간이 다를 수 있기 때문입니다.
     */
    if (resolvedImages.length < images.length) {
      set({
        images: resolvedImages,
        isCompressing: false,
        inputKey: get().inputKey + 1,
      });
      return;
    }
    set({
      images: resolvedImages,
      isCompressing: false,
    });
  },