Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

フロント→バックエンド画像アップロードリファクタリング #61

Merged
merged 3 commits into from
Nov 15, 2024

Conversation

Kubosaka
Copy link
Collaborator

@Kubosaka Kubosaka commented Nov 15, 2024

User description

概要

  • フロントからの画像取得にformidableを使っていたが要らなそうなので削除した
  • これで画像がアップロードできるようになるかも

変更内容

  • どのような変更を行ったのか具体的に記述してください。

動作確認

  • どのような手順で動作確認を行ったのか記述してください。

関連するIssue

  • 関連するIssue番号を記載してください。例: #123

備考

  • その他、レビュワーに伝えたいことがあれば記述してください。

PR Type

enhancement


Description

  • フロントエンドからバックエンドへの画像アップロード処理をリファクタリングし、formidableを削除してformDataを使用するように変更しました。
  • ファイルが存在しない場合のエラーハンドリングを追加しました。
  • ファイルをBufferに変換してMinIOにアップロードする処理を追加しました。
  • フロントエンドのフォームデータキーをimageからfileに変更しました。

Changes walkthrough 📝

Relevant files
Enhancement
route.ts
Refactor file upload handling using formData                         

app/src/app/api/minio/route.ts

  • Removed formidable for form parsing.
  • Switched to using formData for file handling.
  • Added error handling for missing file uploads.
  • Converted file to Buffer for MinIO upload.
  • +31/-29 
    page.tsx
    Update form data key for file upload                                         

    app/src/app/camera/page.tsx

    • Changed form data key from image to file.
    +1/-1     
    Additional files (token-limit)
    package-lock.json
    ...                                                                                                           

    app/package-lock.json

    ...

    +11647/-11732

    💡 PR-Agent usage: Comment /help "your question" on any pull request to receive relevant information

    @Kubosaka Kubosaka changed the title Feat/kubosaka/new form refactor フロント→バックエンド画像アップロードリファクタリング Nov 15, 2024
    Copy link

    PR Reviewer Guide 🔍

    Here are some key observations to aid the review process:

    ⏱️ Estimated effort to review: 3 🔵🔵🔵⚪⚪
    🧪 No relevant tests
    🔒 No security concerns identified
    ⚡ Recommended focus areas for review

    Error Handling
    ファイルが存在しない場合のエラーハンドリングが追加されましたが、エラーメッセージが日本語で統一されていない可能性があります。また、エラー発生時のログ記録が不足している可能性があります。

    Performance Concern
    ファイルをBufferに変換する処理が追加されましたが、大きなファイルの取り扱いにおいてパフォーマンスへの影響を検討する必要があります。

    Copy link

    PR Code Suggestions ✨

    Explore these optional code suggestions:

    CategorySuggestion                                                                                                                                    Score
    Possible bug
    file オブジェクトが File インスタンスであることを確認するための型チェックを追加します。

    file オブジェクトの型チェックを追加してください。formData.get("file")File
    インスタンスであることを確認するための型ガードを実装することをお勧めします。

    app/src/app/api/minio/route.ts [50]

     const file = formData.get("file");
    +if (!(file instanceof File)) {
    +  return new Response(JSON.stringify({ message: "ファイル形式が正しくありません" }), {
    +    status: 400,
    +    headers: { "Content-Type": "application/json" },
    +  });
    +}
    Suggestion importance[1-10]: 8

    Why: This suggestion correctly identifies a potential bug where the type of file is not validated, which could lead to runtime errors. Adding a type check enhances the robustness of the code.

    8
    無効なファイル名でのアップロードを防ぐために、fileName のチェックを追加します。

    fileName が空文字列の場合に対応するエラーハンドリングを追加してください。これにより、無効なファイル名でのアップロードを防ぎます。

    app/src/app/api/minio/route.ts [53]

     const fileName = searchParams.get("file") || "";
    +if (!fileName) {
    +  return new Response(JSON.stringify({ message: "ファイル名が指定されていません" }), {
    +    status: 400,
    +    headers: { "Content-Type": "application/json" },
    +  });
    +}
    Suggestion importance[1-10]: 8

    Why: This suggestion addresses a potential issue where an empty fileName could lead to undefined behavior or errors in file handling. It's a crucial check for the robustness of file uploading functionality.

    8
    Enhancement
    minioClient.putObject のエラーをログに記録して、エラーハンドリングを強化します。

    エラーハンドリングを強化するために、minioClient.putObjectcatch ブロック内でエラーオブジェクトをログに記録することを検討してください。

    app/src/app/api/minio/route.ts [82-85]

     catch (err) {
    +  console.error("MinIO upload error:", err);
       return new Response(JSON.stringify({ message: "失敗" }), {
         status: 400,
         headers: { "Content-Type": "application/json" },
       });
     }
    Suggestion importance[1-10]: 7

    Why: Adding error logging for the minioClient.putObject method is a good practice for debugging and monitoring, making the suggestion valuable for maintaining the system.

    7
    ファイルのメタデータに追加情報を含めて、より詳細な追跡を可能にします。

    metaData
    オブジェクトの作成時に、追加のメタデータを考慮することを検討してください。例えば、ファイルの作成日時やアップロード者の情報など、追跡に役立つ情報を含めることができます。

    app/src/app/api/minio/route.ts [67-68]

     const metaData = {
       "Content-Type": mimetype,
    +  "uploaded-by": uid,
    +  "upload-date": new Date().toISOString(),
     };
    Suggestion importance[1-10]: 6

    Why: Enhancing metadata with additional information like uploader ID and upload date is beneficial for tracking and auditing purposes, making this a useful enhancement.

    6

    @Kubosaka Kubosaka self-assigned this Nov 15, 2024
    Copy link
    Collaborator

    @TkymHrt TkymHrt left a comment

    Choose a reason for hiding this comment

    The reason will be displayed to describe this comment to others. Learn more.

    LGTM

    @TkymHrt TkymHrt merged commit 2145690 into main Nov 15, 2024
    2 checks passed
    Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
    Projects
    None yet
    Development

    Successfully merging this pull request may close these issues.

    2 participants