본문 바로가기

A.개발관련자료

[0]특정파일의 크기가 너무 커서 submit시 전송이 안되는 경우 : file의 사이즈에 문제가 있을 경우

Files 배열안의 .size를 활용하여 15mb이상 일경우의 파일크기를 측정할수 있는 예시.

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;