이미지 파일 업로드 코드

const imgUploadRef = useRef<HTMLInputElement>(null);

const handleRegister = (): void => {
    imgUploadRef.current.click();
};

const onImageChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
    const file = event.target.files[0];

    if (file.size > MAX_FILE_SIZE) {
      alert('최대 이미지 용량은 2mb입니다.');
      return;
    }

    if (file) {
      actionImageCompress(file);
    }
};

<Input
      type="file"
      ref={imgUploadRef}
      accept={'image/*'}
      onChange={onImageChange}
/>

<Button type="button" onClick={handleRegister}>
        썸네일 등록
</Button>

Input 태그

type="file" : type file 속성 지정

accept={'image/*'} : "image/*" 유형의 파일만 업로드

ref={imgUploadRef} : input 태그의 display 속성은 none입니다. imgUploadRef로 참조하게 되면

버튼 이벤트 발생시 파일 업로드 창을 띄웁니다. display 속성은 none으로 설정한 이유는 파일 업로드 버튼을 custom하게 사용하기 위해서 입니다.

onChange={onImageChange} : onImageChange 함수가 호출되어 선택한 파일을 처리하고 이미지 미리

보기를 표시하거나 이미지를 서버에 업로드하는 것과 같은 필요한 작업을 수행합니다.

‘browser-image-compression’ 라이브러리를 사용한 함수

업로드 할 파일 크기를 줄여줍니다.

actionImageCompress

const actionImageCompress = async (file) => {
    const options = {
      maxSizeMB: 0.2, // 최대 파일 크기
      maxWidthOrHeight: 1024, // 최대 너비 및 높이
      useWebWorker: true, // webworker 사용 여부
    };
    try {
			// 압축 파일 객체 반환
      const compressedFile = await imageCompression(file, options);

			// 파일의 내용을 읽을 수 있게 해주는 Web API
      const reader = new FileReader();
	     
			// 압축된 이미지 파일을 읽어서 데이터 URL로 변환하여 브라우저에 이미지를 표시하거나 서버에 업로드하는 데 사용
			reader.readAsDataURL(compressedFile);
      reader.onloadend = () => {
        // Base64로 인코딩된 데이터
				const imageData = reader.result;
        dispatch(
          setImageInformation({
						// 화면에 표시될 이미지 URL
            thumbnailImgUrl: URL.createObjectURL(compressedFile),
						// 서버로 보낼 이미지 데이터
            imageData: imageData,
          }),
        );
      };
    } catch (error) {
      alert('잠시 후 다시 시도해주세요');
    }
};