file-uploads – skill Thiết kế & UI cho agent AI
Chuyên gia xử lý tải file lên và lưu trữ đám mây. Bao gồm S3, Cloudflare R2, presigned URL, multipart upload và tối ưu hình ảnh. Biết cách xử lý file lớn mà không chặn luồng.
Cài skill file-uploads bằng một lệnh
Chọn công cụ bạn đang dùng, copy lệnh và dán vào terminal. Skill sẽ nằm trong thư mục skills của công cụ đó và sẵn sàng dùng ở phiên làm việc tiếp theo.
Claude Code
mkdir -p ~/.claude/skills && curl -fsSL https://skill.dn1nguoi.com/z/file-uploads-10ffb.tgz | tar xz -C ~/.claude/skills
Gọi trong Claude Code: /file-uploads – rồi mô tả công việc bạn muốn làm.
Codex
mkdir -p ~/.codex/skills && curl -fsSL https://skill.dn1nguoi.com/z/file-uploads-10ffb.tgz | tar xz -C ~/.codex/skills
Gọi trong Codex: $file-uploads – rồi mô tả công việc bạn muốn làm.
Hermes Agent
mkdir -p ~/.hermes/skills && curl -fsSL https://skill.dn1nguoi.com/z/file-uploads-10ffb.tgz | tar xz -C ~/.hermes/skills
Gọi trong Hermes Agent: /file-uploads – rồi mô tả công việc bạn muốn làm.
DeepSeek
mkdir -p ~/.deepcode/skills && curl -fsSL https://skill.dn1nguoi.com/z/file-uploads-10ffb.tgz | tar xz -C ~/.deepcode/skills
Gọi trong DeepSeek: /file-uploads – rồi mô tả công việc bạn muốn làm.
Nội dung SKILL.md
Nội dung SKILL.md gốc bằng tiếng Anh.
File Uploads & Storage
Expert at handling file uploads and cloud storage. Covers S3,
Cloudflare R2, presigned URLs, multipart uploads, and image
optimization. Knows how to handle large files without blocking.
Role: File Upload Specialist
Careful about security and performance. Never trusts file
extensions. Knows that large uploads need special handling.
Prefers presigned URLs over server proxying.
Principles
- Never trust client file type claims
- Use presigned URLs for direct uploads
- Stream large files, never buffer
- Validate on upload, optimize after
Treat code as independent TypeScript fragments requiring actual SDK imports, storage clients and handlers. Magic-byte detection is not malware scanning or proof of a safe image: decode/re-encode approved formats with bounded dimensions/resources, quarantine until validation and serve with safe content headers from a separate origin where appropriate. Authenticate/authorize both presign creation and object access, bind tenant/key/expiry and avoid user-controlled storage paths. For a hard upload range use a provider-supported signed policy such as S3 POST content-length-range or equivalent enforcement; verify actual uploaded size server-side. ContentLength alone is not a cross-provider size limit.
Sharp Edges
Trusting client-provided file type
Severity: CRITICAL
Situation: User uploads malware.exe renamed to image.jpg. You check
extension, looks fine. Store it. Serve it. Another user
downloads and executes it.
Symptoms:
- Malware uploaded as images
- Wrong content-type served
Why this breaks:
File extensions and Content-Type headers can be faked.
Attackers rename executables to bypass filters.
Recommended fix:
CHECK MAGIC BYTES
import { fileTypeFromBuffer } from "file-type";
async function validateImage(buffer: Buffer) {
const type = await fileTypeFromBuffer(buffer);
const allowedTypes = ["image/jpeg", "image/png", "image/webp"];
if (!type || !allowedTypes.includes(type.mime)) {
throw new Error("Invalid file type");
}
return type;
}
// For streams
import { fileTypeFromStream } from "file-type";
const type = await fileTypeFromStream(readableStream);
No upload size restrictions
Severity: HIGH
Situation: No file size limit. Attacker uploads 10GB file. Server runs
out of memory or disk. Denial of service. Or massive
storage bill.
Symptoms:
- Server crashes on large uploads
- Massive storage bills
- Memory exhaustion
Why this breaks:
Without limits, attackers can exhaust resources. Even
legitimate users might accidentally upload huge files.
Recommended fix:
SET SIZE LIMITS
// Formidable
const form = formidable({
maxFileSize: 10 * 1024 * 1024, // 10MB
});
// Multer
const upload = multer({
limits: { fileSize: 10 * 1024 * 1024 },
});
// Client-side early check
if (file.size > 10 * 1024 * 1024) {
alert("File too large (max 10MB)");
return;
}
// Presigned URL with size limit
const command = new PutObjectCommand({
Bucket: BUCKET,
Key: key,
ContentLength: expectedSize, // Declared size; not a universal upload-size policy
});
User-controlled filename allows path traversal
Severity: CRITICAL
Situation: User uploads file named "../../../etc/passwd". You use
filename directly. File saved outside upload directory.
System files overwritten.
Symptoms:
- Files outside upload directory
- System file access
Why this breaks:
User input should never be used directly in file paths.
Path traversal sequences can escape intended directories.
Recommended fix:
SANITIZE FILENAMES
import path from "path";
import crypto from "crypto";
function safeFilename(userFilename: string): string {
// Extract just the base name
const base = path.basename(userFilename);
// Remove any remaining path chars
const sanitized = base.replace(/[^a-zA-Z0-9.-]/g, "_");
// Or better: generate new name entirely
const ext = path.extname(userFilename).toLowerCase();
const allowed = [".jpg", ".png", ".pdf"];
if (!allowed.includes(ext)) {
throw new Error("Invalid extension");
}
return crypto.randomUUID() + ext;
}
// Never do this
const path = "uploads/" + req.body.filename; // DANGER!
// Do this
const path = "uploads/" + safeFilename(req.body.filename);
Presigned URL shared or cached incorrectly
Severity: MEDIUM
Situation: Presigned URL for private file returned in API response.
Response cached by CDN. Anyone with cached URL can access
private file for hours.
Symptoms:
- Private files accessible via cached URLs
- Access after expiry
Why this breaks:
Presigned URLs grant temporary access. If cached or shared,
the bearer URL may be usable by unintended parties during its validity; cached file bytes can persist after URL expiry.
Recommended fix:
CONTROL PRESIGNED URL DISTRIBUTION
// Short expiry for sensitive files
const url = await getSignedUrl(s3, command, {
expiresIn: 300, // 5 minutes
});
// No-cache headers for presigned URL responses
return Response.json({ url }, {
headers: {
"Cache-Control": "no-store, max-age=0",
},
});
// Or use CloudFront signed URLs for more control
Validation Checks
Only checking file extension
Severity: CRITICAL
Message: Check magic bytes, not just extension
Fix action: Use file-type library to verify actual type
User filename used directly in path
Severity: CRITICAL
Message: Sanitize filenames to prevent path traversal
Fix action: Use path.basename() and generate safe name
Collaboration
Delegation Triggers
- image optimization CDN -> performance-optimization (Image delivery)
- storing file metadata -> postgres-wizard (Database schema)
When to Use
- User mentions or implies: file upload
- User mentions or implies: S3
- User mentions or implies: R2
- User mentions or implies: presigned URL
- User mentions or implies: multipart
- User mentions or implies: image upload
- User mentions or implies: cloud storage
Example
User request:
> Use @file-uploads for this task: Expert at handling file uploads and cloud storage.
Limitations
- Use this skill only when the task clearly matches the scope described above.
- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.
Skill liên quan
- fixing-motion-performance – Kiểm tra và sửa lỗi hiệu năng animation gồm layout thrashing, thuộc tính compositor…
- flat-design – Hướng dẫn triển khai phong cách Flat Design cho Web và App. Kích hoạt khi người dùng…
- flat-design-2 – Hướng dẫn triển khai Flat Design 2.0 (Semi-Flat) cho Web và App. Kích hoạt khi người…
- floating-ui – Hướng dẫn triển khai Floating UI cho Web và App. Kích hoạt khi người dùng muốn thẻ tách…
- free-design-resources – Sổ đăng ký tài nguyên thiết kế: tài nguyên và nhà cung cấp, loại giấy phép, quy tắc…
- free-tier-strategy – Thiết kế gói miễn phí chuyển đổi thành trả phí mà không gây phản cảm hay lạm dụng. Cụm…
- frontend-api-integration-patterns – Mẫu sẵn sàng cho production để tích hợp ứng dụng frontend với API backend, gồm xử lý…
- frontend-data-contracts – Kỷ luật độc lập framework về type safety tại ranh giới mạng của mọi ứng dụng React hoặc…