Import Excel Files in React Without Building an XLSX Workflow

CSV is neat.

Customers use Excel.

If your SaaS accepts customer data, somebody will eventually drag an .xlsx file into whatever upload box you built and reasonably expect it to work.

Supporting Excel is not just changing the accepted file extension.

XLSX adds another layer of weirdness

Excel workbooks introduce decisions that CSV files do not:

• Which sheet should be imported?
• Where is the actual header row?
• How should blank rows behave?
• Is that cell a number or a number formatted as text?
• Is the date a string, a serial value, or formatted output?
• What happens when the workbook is malformed?
• What happens when the file is password protected?
• What happens when a customer uploads something absurdly large?

None of this is unsolvable.

It is exactly the kind of work an AI coding agent can help you build.

It is also exactly the kind of work that remains yours after the agent has moved on to the next prompt.

Current Bootstrapware behavior: the component reads .xlsx / .xls in the browser (SheetJS, cellDates: true), defaults to the first sheet, and shows a sheet picker when the workbook has more than one worksheet. Mapping and validation then match the CSV path. Password-protected workbooks are not supported. There is no hard-coded max file size (browser memory is the practical limit). Prefer asking customers for .xlsx.

Treat Excel as an input format, not a separate product

A customer importing an Excel workbook usually wants the same outcome as a customer importing a CSV:

upload → map columns → validate rows → preview problems → normalized objects

Bootstrapware Importer treats CSV, XLSX, and TSV as different ways to enter the same import workflow.

Your application should not need three different customer experiences because somebody clicked Save As in Excel.

The data still stays local

Excel files are parsed in the customer's browser.

Bootstrapware does not need the workbook contents in order to provide mapping, validation, configuration, or session metadata.

That is especially useful when spreadsheets contain customer lists, internal exports, or other data your users would rather not send through another company's servers.

When not to use a browser-side importer

If you need to ingest huge workbooks server-side, transform millions of records, connect directly to data warehouses, or run complex enterprise migration jobs, Bootstrapware Importer is intentionally not that product.

There are larger data-onboarding platforms for that.

If your requirement is “let my SaaS customers upload Excel files without me owning an Excel import subsystem,” you are much closer to what Bootstrapware is for.

<Importer
  title="Import workbook"
  fields={[
    { key: "sku", label: "SKU", type: "string", required: true },
    { key: "qty", label: "Qty", type: "number", required: true },
    { key: "shipBy", label: "Ship by", type: "date" },
  ]}
  onComplete={async (rows) => {
    await fetch("/api/inventory/import", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ rows }),
    });
  }}
/>

Related: Importer · Excel · File formats · CSV vs XLSX · React guide