# CSV Import
URL: https://pro.rv-grid.com/guides/excel-export/csv-import/
Source: src/content/docs/guides/excel-export/csv-import.mdx
Description: Import CSV files with ExportExcelPlugin drag/drop, events, and explicit import options.
`ExportExcelPlugin` imports CSV files by default. `.xlsx` and `.xls` parsing is app-owned; use a parser such as SheetJS, ExcelJS, or read-excel-file and assign normalized rows to the grid yourself.

For app-owned XLSX parsing choices, see [Excel Import and Export Libraries](/guides/excel-export/excel-import-export-libraries/).

## Drag And Drop

By default, users can drop a `.csv` file onto the grid:

Control drag/drop import with `grid.exportExcel`:

```ts
grid.exportExcel = {
  allowDrag: true,
  allowedExtensions: ['.csv'],
};
```

The same options are still accepted through legacy `additionalData.excel`, but new code should prefer `grid.exportExcel`.

## Import Options

| Option | Default | Description |
| --- | --- | --- |
| `allowDrag` | `true` | Enables CSV drag/drop import unless the grid is readonly |
| `allowedExtensions` | `['.csv']` | File extensions accepted by drag/drop, `importFile()`, `isCsv()`, and deprecated `isExcel()` |
| `skipColumnGeneration` | `false` | Keeps current grid columns and maps CSV cells by current column order |

When `skipColumnGeneration` is `false`, the first CSV row becomes generated grid columns:

```csv
Name,Status
Ada,Open
Grace,Closed
```

The imported grid receives columns similar to:

```ts
[
  { prop: 0, name: 'Name' },
  { prop: 1, name: 'Status' },
]
```

When `skipColumnGeneration` is `true`, all CSV rows are imported as data and mapped to the existing export column order:

```ts
grid.columns = [
  { prop: 'name', name: 'Name' },
  { prop: 'status', name: 'Status' },
];

await excel.importFile(file, {
  skipColumnGeneration: true,
});
```

## Plugin Methods

Use `importFile()` when import is triggered by an app-owned upload control:

```ts
const plugins = await grid.getPlugins();
const excel = plugins.find((plugin) => plugin instanceof ExportExcelPlugin);

await excel?.importFile(file, {
  allowedExtensions: ['.csv', '.txt'],
  skipColumnGeneration: true,
});
```

Use `isCsv()` to validate a file before import:

```ts
if (excel?.isCsv(file, ['.csv'])) {
  await excel.importFile(file);
}
```

`isExcel()` remains as a deprecated compatibility alias. It is CSV-only and returns `false` for `.xlsx` files unless the caller explicitly allows that extension. It does not parse workbook files.

## Import Events

Before applying imported rows, the plugin dispatches CSV-oriented events:

| Event | Detail |
| --- | --- |
| `excel-before-import` | `file`, `sheetName`, `csv`, and parsed `rows` |
| `excel-before-set` | All import detail plus mapped `jsonData` |

`sheetName` is a compatibility label and contains the filename.

Prevent either event to cancel replacing the grid source:

```ts
grid.addEventListener('excel-before-set', (event) => {
  const { jsonData } = event.detail;

  if (!jsonData.length) {
    event.preventDefault();
  }
});
```

## Parser Behavior

The default importer reads files with `FileReader.readAsText` and parses CSV values. It handles BOMs, CRLF/LF line endings, quoted values, escaped quotes, empty cells, and trailing blank lines.

Invalid file extensions are rejected before parsing. If the grid is readonly or `allowDrag` is `false`, drag/drop import does not activate.

For `.xlsx` uploads, parse the workbook outside the plugin and assign normalized data:

```ts
const { columns, rows } = await parseWorkbook(file);

grid.columns = columns;
grid.source = rows;
```
