Skip to content

[FE] 파일 업로드 에러 처리를 추가하세요. #159

@junglesub

Description

@junglesub

🛠️ Refactor suggestion

파일 업로드 에러 처리를 추가하세요.

FileReader 사용 시 에러 상황에 대한 처리가 없어 예상치 못한 오류가 발생할 수 있습니다.

 const handleBannerChange = (e: React.ChangeEvent<HTMLInputElement>) => {
   const file = e.target.files?.[0];
   if (file) {
+    // 파일 크기 검증 (예: 5MB 제한)
+    if (file.size > 5 * 1024 * 1024) {
+      alert("파일 크기는 5MB 이하여야 합니다.");
+      return;
+    }
+    
     setBannerFile(file);
     const reader = new FileReader();
+    reader.onerror = () => {
+      alert("파일을 읽는 중 오류가 발생했습니다.");
+      setBannerFile(null);
+    };
     reader.onload = (ev) => {
       setBannerPreview(ev.target?.result as string);
     };
     reader.readAsDataURL(file);
   }
 };
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

  const handleBannerChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
      // 파일 크기 검증 (예: 5MB 제한)
      if (file.size > 5 * 1024 * 1024) {
        alert("파일 크기는 5MB 이하여야 합니다.");
        return;
      }

      setBannerFile(file);
      const reader = new FileReader();
      reader.onerror = () => {
        alert("파일을 읽는 중 오류가 발생했습니다.");
        setBannerFile(null);
      };
      reader.onload = (ev) => {
        setBannerPreview(ev.target?.result as string);
      };
      reader.readAsDataURL(file);
    }
  };
🤖 Prompt for AI Agents
In src/main/front/src/admin-club/pages/AdminClubSettingPage.tsx around lines 46
to 56, the handleBannerChange function uses FileReader without handling possible
errors. Add an error event listener to the FileReader instance to catch and
handle file reading errors gracefully, such as by logging the error or showing a
user-friendly message, ensuring the app does not crash on file read failures.

Originally posted by @coderabbitai[bot] in #157 (comment)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    Status

    Backlog

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions