# Handle Files Frontend

> 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.

- **Type:** Skill
- **Install:** `agentstack add skill-kennguyen887-agent-foundation-handle-files-frontend`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [kennguyen887](https://agentstack.voostack.com/s/kennguyen887)
- **Installs:** 0
- **Category:** [Data & Analytics](https://agentstack.voostack.com/c/data-and-analytics)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [kennguyen887](https://github.com/kennguyen887)
- **Source:** https://github.com/kennguyen887/agent-foundation/tree/main/skills/handle-files-frontend

## Install

```sh
agentstack add skill-kennguyen887-agent-foundation-handle-files-frontend
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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`.
```ts
export const downloadCsvFromJson = (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.
```ts
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):
  ```ts
  async function detectMimeFromContent(file: File): Promise {
    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:
  ```ts
  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.

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

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [kennguyen887](https://github.com/kennguyen887)
- **Source:** [kennguyen887/agent-foundation](https://github.com/kennguyen887/agent-foundation)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** yes
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-kennguyen887-agent-foundation-handle-files-frontend
- Seller: https://agentstack.voostack.com/s/kennguyen887
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.