jpskill.com
💼 ビジネス コミュニティ

file-upload-processor

Webアプリケーションでファイルアップロード機能が必要な際に、ファイルの種類やサイズ確認、クラウドストレージ連携、アップロード状況の追跡などをスムーズに行えるように支援するSkill。

📜 元の英語説明(参考)

When the user needs to build file upload functionality for a web application. Use when the user mentions "file upload," "image upload," "upload endpoint," "multipart upload," "presigned URL," "S3 upload," "file validation," "upload to cloud storage," or "accept user files." Handles upload endpoints, file validation (type, size, magic bytes), cloud storage integration, and upload status tracking. For image/video processing after upload, see media-transcoder.

🇯🇵 日本人クリエイター向け解説

一言でいうと

Webアプリケーションでファイルアップロード機能が必要な際に、ファイルの種類やサイズ確認、クラウドストレージ連携、アップロード状況の追跡などをスムーズに行えるように支援するSkill。

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o file-upload-processor.zip https://jpskill.com/download/14901.zip && unzip -o file-upload-processor.zip && rm file-upload-processor.zip
🪟 Windows (PowerShell)
$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/14901.zip -OutFile "$d\file-upload-processor.zip"; Expand-Archive "$d\file-upload-processor.zip" -DestinationPath $d -Force; ri "$d\file-upload-processor.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)
  1. 1. 下の青いボタンを押して file-upload-processor.zip をダウンロード
  2. 2. ZIPファイルをダブルクリックで解凍 → file-upload-processor フォルダができる
  3. 3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
  4. 4. Claude Code を再起動

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

  1. 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
  2. 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
  3. 3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
    • · macOS / Linux: ~/.claude/skills/
    • · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →
最終更新
2026-05-18
取得日時
2026-05-18
同梱ファイル
1

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

ファイルアップロードプロセッサ

概要

Webアプリケーション向けのセキュアなファイルアップロードエンドポイントを構築します。multipart フォームアップロード、大規模ファイル向けの presigned URL 生成、magic byte によるファイルタイプ検証(拡張子だけでなく)、サイズ制限、クラウドストレージ統合(S3、GCS、R2)、およびアップロードステータス追跡を処理します。ストリーミング(小規模ファイルの場合、ディスク上の一時ファイルは不要)で、本番環境に対応できるコードを生成します。

手順

1. アップロード戦略の選択

ファイルサイズに基づいて:

  • 小規模ファイル(< 10MB): サーバー経由でストレージにストリームします。シンプルで、1つのリクエストです。
  • 中規模ファイル(10-100MB): 進捗状況追跡付きのサーバーサイドストリーミング。
  • 大規模ファイル(> 100MB): Presigned multipart アップロード — クライアントは直接 S3 にアップロードします。

2. ファイルの検証

常に magic byte で検証し、ファイル拡張子を信頼しないでください。

const MAGIC_BYTES = {
  'image/jpeg': [0xFF, 0xD8, 0xFF],
  'image/png': [0x89, 0x50, 0x4E, 0x47],
  'image/webp': [0x52, 0x49, 0x46, 0x46], // + "WEBP" at offset 8
  'application/pdf': [0x25, 0x50, 0x44, 0x46],
  'video/mp4': null, // Check for "ftyp" at offset 4
  'video/webm': [0x1A, 0x45, 0xDF, 0xA3],
};

function detectFileType(buffer: Buffer): string | null {
  // Read first 12 bytes
  // Match against known signatures
  // Return MIME type or null if unknown
}

追加の検証:

  • ファイル全体を読み込む前にファイルサイズを確認する(Content-Length ヘッダー)
  • サイズ超過のアップロードを中断するために、multer/busboy にハードリミットを設定する
  • 二重拡張子をスキャンする:image.jpg.exe
  • ファイル名に null バイトが含まれるファイルを拒否する

3. ストレージ統合

// S3-compatible storage client
class StorageService {
  async upload(key: string, stream: Readable, contentType: string): Promise<string>
  async getPresignedUploadUrl(key: string, contentType: string, expiresIn: number): Promise<string>
  async getPresignedDownloadUrl(key: string, expiresIn: number): Promise<string>
  async initiateMultipartUpload(key: string): Promise<{ uploadId: string, parts: PresignedPart[] }>
  async completeMultipartUpload(key: string, uploadId: string, parts: CompletedPart[]): Promise<void>
  async delete(key: string): Promise<void>
}

キーの命名規則:{type}/{userId}/{fileId}/{filename}

4. アップロードステータスの追跡

データベースモデル:

files:
  id: UUID
  user_id: UUID
  original_name: string
  storage_key: string
  mime_type: string
  size_bytes: bigint
  status: enum(uploading, uploaded, processing, processed, failed)
  variants: jsonb (null until processed)
  error: text (null unless failed)
  created_at: timestamp
  updated_at: timestamp

5. API エンドポイント

POST   /api/files/upload          — Multipart フォームアップロード(< 100MB)
POST   /api/files/presign         — 大規模ファイルアップロード用の presigned URL を取得
POST   /api/files/multipart/init  — Multipart アップロードを開始(> 100MB)
POST   /api/files/multipart/complete — Multipart アップロードを完了
GET    /api/files/:id/status      — アップロード/処理ステータスを取得
GET    /api/files/:id/download    — Presigned ダウンロード URL を取得
DELETE /api/files/:id             — ファイルをソフトデリート

例 1: Express アップロードエンドポイント

プロンプト: 「Express アプリケーション用のファイルアップロードエンドポイントを作成してください。画像と PDF を受け入れ、S3 に保存します。」

出力: multer ストリーミング、magic-byte 検証、S3 アップロード、データベースレコード作成、およびエラー処理を備えたアップロードルート。ステータス確認用のファイル ID を返します。

例 2: 大規模ビデオ用の Presigned アップロード

プロンプト: 「ユーザーは最大 2GB のビデオをアップロードします。サーバーを経由させたくありません。」

出力: Presigned URL 生成エンドポイント、進捗状況追跡付きのクライアントサイドアップロードコード、100MB を超えるファイル用の multipart アップロード、およびアップロード完了を確認して処理をトリガーする webhook エンドポイント。

ガイドライン

  • ストリーム、バッファリングしない — ファイル全体をメモリにロードしないでください
  • Magic byte を検証する — ファイル拡張子は嘘をつきますが、magic byte は嘘をつきません
  • すべてのレイヤーでアップロード制限を設定する — nginx、リバースプロキシ、およびアプリケーション
  • 一意のストレージキーを生成する — ユーザー ID とファイル ID を含め、元のファイル名をキーとして使用しないでください
  • すぐに返す — アップロードの確認応答は即座に行われる必要があり、処理は非同期的に行われます
  • 失敗時にクリーンアップする — DB 書き込みが失敗した場合は、S3 オブジェクトを削除します。S3 が失敗した場合は、DB レコードを作成しないでください
  • アップロードをレート制限する — ユーザーごと、時間枠ごと(例:1時間あたり20回のアップロード)
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

File Upload Processor

Overview

Builds secure file upload endpoints for web applications. Handles multipart form uploads, presigned URL generation for large files, file type validation via magic bytes (not just extensions), size limits, cloud storage integration (S3, GCS, R2), and upload status tracking. Produces production-ready code with streaming (no temp files on disk for small files).

Instructions

1. Choose Upload Strategy

Based on file size:

  • Small files (< 10MB): Stream through server to storage. Simple, one request.
  • Medium files (10-100MB): Server-side streaming with progress tracking.
  • Large files (> 100MB): Presigned multipart upload — client uploads directly to S3.

2. File Validation

Always validate by magic bytes, never trust file extensions:

const MAGIC_BYTES = {
  'image/jpeg': [0xFF, 0xD8, 0xFF],
  'image/png': [0x89, 0x50, 0x4E, 0x47],
  'image/webp': [0x52, 0x49, 0x46, 0x46], // + "WEBP" at offset 8
  'application/pdf': [0x25, 0x50, 0x44, 0x46],
  'video/mp4': null, // Check for "ftyp" at offset 4
  'video/webm': [0x1A, 0x45, 0xDF, 0xA3],
};

function detectFileType(buffer: Buffer): string | null {
  // Read first 12 bytes
  // Match against known signatures
  // Return MIME type or null if unknown
}

Additional validation:

  • Check file size BEFORE reading the full body (Content-Length header)
  • Set hard limits on multer/busboy to abort oversized uploads
  • Scan for double extensions: image.jpg.exe
  • Reject files with null bytes in filename

3. Storage Integration

// S3-compatible storage client
class StorageService {
  async upload(key: string, stream: Readable, contentType: string): Promise<string>
  async getPresignedUploadUrl(key: string, contentType: string, expiresIn: number): Promise<string>
  async getPresignedDownloadUrl(key: string, expiresIn: number): Promise<string>
  async initiateMultipartUpload(key: string): Promise<{ uploadId: string, parts: PresignedPart[] }>
  async completeMultipartUpload(key: string, uploadId: string, parts: CompletedPart[]): Promise<void>
  async delete(key: string): Promise<void>
}

Key naming convention: {type}/{userId}/{fileId}/{filename}

4. Upload Status Tracking

Database model:

files:
  id: UUID
  user_id: UUID
  original_name: string
  storage_key: string
  mime_type: string
  size_bytes: bigint
  status: enum(uploading, uploaded, processing, processed, failed)
  variants: jsonb (null until processed)
  error: text (null unless failed)
  created_at: timestamp
  updated_at: timestamp

5. API Endpoints

POST   /api/files/upload          — Multipart form upload (< 100MB)
POST   /api/files/presign         — Get presigned URL for large file upload
POST   /api/files/multipart/init  — Start multipart upload (> 100MB)
POST   /api/files/multipart/complete — Complete multipart upload
GET    /api/files/:id/status      — Get upload/processing status
GET    /api/files/:id/download    — Get presigned download URL
DELETE /api/files/:id             — Soft delete file

Examples

Example 1: Express Upload Endpoint

Prompt: "Create a file upload endpoint for my Express app. Accept images and PDFs, store in S3."

Output: Upload route with multer streaming, magic-byte validation, S3 upload, database record creation, and error handling. Returns file ID for status polling.

Example 2: Presigned Upload for Large Videos

Prompt: "Users upload videos up to 2GB. I don't want them going through my server."

Output: Presigned URL generation endpoint, client-side upload code with progress tracking, multipart upload for files > 100MB, and a webhook endpoint to confirm upload completion and trigger processing.

Guidelines

  • Stream, don't buffer — never load entire files into memory
  • Validate magic bytes — file extensions lie, magic bytes don't
  • Set upload limits at every layer — nginx, reverse proxy, and application
  • Generate unique storage keys — include user ID and file ID, never use original filename as key
  • Return immediately — upload ack should be instant, processing happens async
  • Clean up on failure — if DB write fails, delete the S3 object; if S3 fails, don't create DB record
  • Rate limit uploads — per user, per time window (e.g., 20 uploads per hour)