Handle files frontend

Skill kennguyen887/agent-foundation/skills/handle-files-frontend

Claude Code skills marketplace — backend & frontend engineering conventions + step-by-step third-party integration recipes: Stripe, Rapyd, CyberSource, UOB & wallet payments, Singpass/Keycloak OIDC & 3-D Secure, Twilio SMS, Docker & CI/CD. NestJS/TypeScript + React, language-flexible.

Install

npx -y skills add kennguyen887/agent-foundation --skill handle-files-frontend

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Use when importing/exporting CSV, downloading files (single or zipped), viewing/parsing PDFs, or uploading files in a frontend app — one central file-util module covering CSV (papaparse), download (file-saver/jszip), PDF (pdf.js), and upload with magic-number MIME detection + presigned URL + image resize. React/TS reference, framework-flexible.

SKILL.md

3.0 KB, as published. Nobody here has run it

Handle files in a frontend app

Centralize file work in one file.util.ts (+ a media/upload service), not ad-hoc per feature. Examples React/TS; principle → ▸ Example → ▸ Other stacks.

1. CSV import/export

Export JSON → CSV with a CSV lib (e.g. papaparse unparse) + the download helper; import with parse.

export const downloadCsvFromJson = <T>(rows: T[], fileName = 'download') =>
  download({ content: unparse(rows), contentType: 'text/csv', fileName });

2. Download (single + batch zip)

One download({ content, contentType, fileName }) wrapper over file-saver; batch many files into a zip (jszip) for multi-download. "By URL" / "by id" variants resolve the blob, then save.

await saveMultipleFilesAndZip(files, 'export.zip');   // jszip + file-saver

3. PDF

View with a PDF component (e.g. react-pdf) — set up the pdf.js worker once. Read page count via pdf.js for validation/pagination: getPdfPageCountFromUrl(url).

4. Upload — sniff MIME, presign, resize

Detect the real MIME from file CONTENT (magic numbers), not the extension or file.type (both lie / are spoofable):

async function detectMimeFromContent(file: File): Promise<string> {
  const b = new Uint8Array(await file.slice(0, 12).arrayBuffer());
  // match signatures: PNG 89 50 4E 47 · JPEG FF D8 FF · PDF 25 50 44 46 · GIF 47 49 46 · ...
}

Upload via a presigned URL — the server signs, the client POSTs the blob straight to storage, so the app never holds storage credentials. Route image uploads through a resize subfolder when needed:

const contentType = await detectMimeFromContent(file);
const { url, fields } = await mediaService.getPresignedUrl({ contentType, isPrivate, subFolder });
await fetch(url, { method: 'POST', body: toFormData(fields, file) });

Validate type + size before upload; surface failures through the app's error handler (write-frontend-code error-handling section). ▸ Other stacks: same shape — one file module; content-sniff the MIME; presigned-URL upload; swap papaparse/jszip/file-saver/pdf.js for your ecosystem's equivalents.

Verification

File logic lives in one util module (+ an upload service), not scattered per feature.
Uploads detect MIME from content (not file.type) and go through a presigned URL (no storage creds client-side); images route through resize when needed.
CSV export/import and zip-download go through the shared helpers.

write-frontend-code — services + error handling · structure-a-frontend-app.