CSV Import

ExpressCSV provides a comprehensive solution for handling CSV import in your web applications. This page explains the core CSV import features.

File Upload

ExpressCSV supports CSV file uploads through:

• Drag & Drop - Users can drag and drop files directly onto the uploader
• File Browser - Users can browse their computer to select files
• URL Import - Users can import CSV files from a URL
• Paste Data - Users can paste CSV data directly from their clipboard

File Parsing

Once a file is uploaded, ExpressCSV handles the parsing:

• Automatic Delimiter Detection - ExpressCSV automatically detects if the file uses commas, tabs, or semicolons as delimiters
• Header Detection - ExpressCSV automatically detects if the first row is a header
• Character Encoding - ExpressCSV handles various character encodings
• Large File Support - ExpressCSV can handle large CSV files by streaming the data

Data Preview

Before proceeding with the import, users can preview their data:

• Column Preview - Users can see what's in each column
• Data Sample - Users can see sample rows from their file
• File Information - Users can see file size, number of rows, and columns

Example

Here's how to configure the file upload options:

const importer = new ExpressCSV({
  element: '#csv-importer',
  uploadOptions: {
    allowDragDrop: true,
    allowFileBrowser: true,
    allowUrl: true,
    allowPaste: true,
    maxFileSize: 10 * 1024 * 1024, // 10MB
    acceptedFileTypes: ['.csv', '.tsv', '.txt'],
  }
});

Next Steps

After the file is uploaded and parsed, the next step is to map the columns to your data model. Learn more about Data Mapping.