2024.01.30 TIL

이미지 용량제한 로직 추가와 react-hook-form을 사용한 이미지 업로드시 이미지 파일 추가 후 다시 추가 하기 위해 눌렀다가 취소시 이미지가 날라가는 오류가 발생했다.

해당 오류를 해결하기 위해 아래와 같이 로직을 구성했다.

로직

<label htmlFor="preview">
          <Image
            alt="이미지 없음"
            width={300}
            height={300}
            className={styles.previewImg}
            src={previewImg}
          />
          <input
            className={styles.imageInput}
            type="file"
            accept="image/*"
            id="preview"
            {...register('image', {
              onChange: (e: Event) => {
                console.log('aaa');
                const input = e.target as HTMLInputElement;
                if (input!.files!.length === 0) {
                  setValue('image', imageFile);
                } else {
                  if (input.files) {
                    setImageFile(input.files);
                  }
                }
              },
              validate: (value) => {
                console.log('너는 벨류', value);
                if (value.length > 0 && value[0].size >= 2_000_000) {
                  errorTopRight({ message: '파일사이즈는 2MB를 넘지 않아야 합니다.' });
                  return value;
                }
              }
            })}
          />
        </label>