[React] 특정파일의 크기가 너무 커서 submit시 전송이 안되는 경우 : file의 사이즈에 문제가 있을 경우(Can't submit the file using S3, file size problem)

프로젝트 진행중 S3를 사용해야하기도 하는데, 저장공간을 개인이 감당하기 벅차기 때문에 많이 선호되는 듯하다. 때문에 발생하는 이슈가

있는데 그 중 하나를 꺼내 보려한다.

 

file을 submit하는 이벤트 실행시 버튼을 클릭했는데 실행이 안되는 경우가 종종 있다.

개발자도구를 열어봐도 도무지 방법을 알수 없었는데, 첨부되는 파일의 크기 때문에 종종 있다는 이야기를 듣고 해당 내용을 정리해보았다.

해당 이슈는 aws s3에서 파일 업로드를 진행할때 발생하였는데, 구글링하여 찾아본 결과 Amazon s3콘솔은 세션 초과로 인한 대규모 업로드시 제한시간을 초과할수 있다고 명시되어있다.

 

참고로 아마존의 S3 사용시 파일을 업로드 할수 있는 최대 크기는 160mb 이기 때문에 이보다 큰 파일을 업로드하려면 다른 방식을 사용해야 할 수 있다.

하지만 이같은 문제를 간단히 해결하기 위해서 , file 내부에 file 크기를 측정할 수 있는 방법을 찾아보았다.

 

해당 이슈가 진행되는 input type="file" 의 onChange 함수에서 e.target.files로 가져오는 파일들의 사이즈를 내장함수 .size로 

측정할수 있는데, 이를 활용하여 alert을 띄울 수 있다. 

 

I have some chances to use S3 to make a project. It is the most useful tools to store using cloud service. But there was an issue when I using it when I submit the file and I suggestion to solve it.

When you using the submit event sometimes it is hard to excute. In my case this issue appears when I upload file using S3. Amazon said that the S3 console can extend the time limit when running large uploads.

The maximum size when you upload file is 160mb, and you might not be send your file when your upload file is to big.

You can use the built-in-function named .size at the e.target.files. You can note the code down below.

const FilesSize = () => {
  const imageHandleChange = (e) => {
    const activeFiles = Array.from(e.target.files);
    let toastShow = false;
    activeFiles.forEach((el) => {
      console.log(el.size);
      if (el.size / 1000000 > 15) {
        toastShow = true;
      }
    });
    if (toastShow) {
      alert("this file is over 15mb");
    }
  };
  return (
    <div>
      <input
        type="file"
        accept=".jpg, .png, .jpeg"
        multiple
        id="file"
        hidden
        onChange={imageHandleChange}
      />
      <div className="label-holder">
        <label htmlFor="file" className="label">
          <div
            style={{
              width: "88px",
              height: "88px",
              backgroundColor: "red",
              display: "flex",
              justifyContent: "center",
              alignItems: "center",
              position: "relative",
              cursor: "pointer"
            }}
          >
            click
          </div>
        </label>
      </div>
    </div>
  );
};

export default FilesSize;

*결론: AWS S3를 사용하여 파일을 업로드시 submit 이 안되는 경우 : 제한 시간 오류 발생  => file size에 문제가 있었음.