v0 prompt to build a CSV import/export feature
CSV features fail on real files, not happy-path ones, so this prompt specifies the wizard around the mess: header mapping with auto-match, per-cell validation preview, batched upserts, and a failed-rows download for retry. v0 builds it as a stepped Dialog over your existing table, with export streaming from a route handler.
Last updated
Add CSV import and export for {{resource}} records to an existing table view. Import: a Dialog opened from an Import button with three steps. Step one, a drop zone accepting only .csv with the size cap stated in the UI before parsing begins. Step two, a column mapping table where each CSV header maps to a known field through a shadcn/ui Select, with an auto-match by lowercase header name preselected. Step three, a validation preview showing the first rows with per-cell problems highlighted, bad email format, missing required name, duplicate id, plus a count of rows that will import versus be skipped. Parsing runs client side with papaparse in streaming mode so a large file never locks the UI, then rows post in batches to a server action that upserts and returns per-batch failure counts. Result screen: imported, skipped, and failed totals, with a downloadable CSV containing only the failed rows plus a reason column so users fix and retry exactly those. Export: an Export button hitting app/api/{{resource}}/export/route.ts, a route handler that streams rows with a proper Content-Disposition attachment header so the browser downloads instead of rendering, honoring the table's current filters and sort by reading them from query params. Edge cases handled with named messages rather than a generic parse error: quoted fields containing commas, a UTF-8 BOM from spreadsheet exports, an empty file, and a header-only file with zero data rows. Acceptance: importing the exported file back in produces zero failed rows in the v0 preview.Customize it
Runs in your browser. Nothing you type here is sent anywhere.
Add CSV import and export for users records to an existing table view. Import: a Dialog opened from an Import button with three steps. Step one, a drop zone accepting only .csv with the size cap stated in the UI before parsing begins. Step two, a column mapping table where each CSV header maps to a known field through a shadcn/ui Select, with an auto-match by lowercase header name preselected. Step three, a validation preview showing the first rows with per-cell problems highlighted, bad email format, missing required name, duplicate id, plus a count of rows that will import versus be skipped. Parsing runs client side with papaparse in streaming mode so a large file never locks the UI, then rows post in batches to a server action that upserts and returns per-batch failure counts. Result screen: imported, skipped, and failed totals, with a downloadable CSV containing only the failed rows plus a reason column so users fix and retry exactly those. Export: an Export button hitting app/api/users/export/route.ts, a route handler that streams rows with a proper Content-Disposition attachment header so the browser downloads instead of rendering, honoring the table's current filters and sort by reading them from query params. Edge cases handled with named messages rather than a generic parse error: quoted fields containing commas, a UTF-8 BOM from spreadsheet exports, an empty file, and a header-only file with zero data rows. Acceptance: importing the exported file back in produces zero failed rows in the v0 preview.
Same task in other tools
Questions about this prompt
Will this survive files exported from Excel or Sheets?
The prompt names the traps those tools create: a UTF-8 BOM, quoted fields with embedded commas, and header-only files. If a specific file still fails, paste its first few lines into the v0 chat and ask for the parser config to be extended for that shape.
How do I change which fields are importable?
The mapping step should read from one field definition list that carries the name, whether it is required, and its validator. Add a field there and the Select options, validation preview, and upsert all follow. If v0 scattered field lists across steps, ask it to consolidate them first.
Export downloads an HTML page instead of a CSV file. What is the fix?
The route handler lost its headers in an iteration. It must set a text/csv content type and a Content-Disposition attachment header in app/api/{{resource}}/export/route.ts, so ask v0 to restore both and re-test the download from the preview.