20221024 input type="file" 용량 제한하기

 

1. 프로젝트에  사용자가 동영상 업로드를 하려며 백엔드와 서로 동영상 크기를 200메가로 제한 할 수 있도록 하기로 하였음.

 

2. 폼데이터를 포스트로 보내는데, 등록버튼을 눌렀을때 200메가가 넘으면 알럿으로 알려줄 수 있도록 코드를 짜봄.

 

3. 콘솔찍어봐가며 파일 사이즈가 킬로바이트로 나온다는 걸 확인하고, 200메가를 킬로바이트로 바꾸고 maxFileSize로 선언해준 다음 비디오의 사이즈가 maxFileSize보다 클 경우 알럿창으로 알려줌. (등록불가)

 

 // 동영상 200MB 크기 제한
  const [errorMsg, setErrorMsg] = useState(false);
  const [isSuccess, setIsSuccess] = useState(false);
  const validateSelectedFile = (e) => {
    const maxFileSize = 204800; // 200MB
    const fileSizeKiloBytes = videos.size / 1024;

    if (fileSizeKiloBytes > maxFileSize) {
      setErrorMsg(
      //200메가 넘을 알럿띄우기 난 스알2로 띄우기해둠
        Swal.fire({
          icon: "error",
          text: "업로드 가능한 용량(200MB)을 초과하였습니다. 다시 선택해 주세요.",
          confirmButtonColor: "#47AFDB",
          confirmButtonText: "확인",
        }).then((result) => {
          if (result.isConfirmed) {
            window.location.reload();
          }
        })
      );
      setIsSuccess(false);
      return;
    }

    setErrorMsg("");
    setIsSuccess(true);
  };

 

 

            <form onSubmit={onSubmitHandler}>
              <div className="AddVideo">
                <div className="btn-container">
                  <input
                    accept="video/*"
                    name="videos"
                    type="file"
                  />
                  <div className="btn">
                    <img src={video} alt="영상을 업로드 해주세요." />
                  </div>
                </div>
                <div className="error-message">{errorMsg}</div>
              </div>
              <div className="videoAddbuttons">
              //버튼클릭시 온클릭이벤트로 확인해주기~
                <button
                  className="videoAdd"
                  type="submit"
                  onClick={validateSelectedFile}>
                  <img src={addVideo} alt="영상등록" />
                </button>
              </div>
            </form>