API Methods

ExpressCSV provides a variety of methods to control the import process programmatically. This page documents the available methods.

Core Methods

These methods control the main importer lifecycle:

show()

Opens the importer modal dialog.

const importer = new ExpressCSV({...});
importer.show();

hide()

Closes the importer modal dialog.

importer.hide();

reset()

Resets the importer to its initial state, clearing all data.

importer.reset();

destroy()

Destroys the importer instance and removes all DOM elements.

importer.destroy();

Stage Control Methods

These methods allow you to control the import flow:

goToUpload()

Takes the user to the file upload step.

importer.goToUpload();

goToMapping()

Takes the user to the column mapping step.

importer.goToMapping();

goToValidation()

Takes the user to the data validation step.

importer.goToValidation();

goToReview()

Takes the user to the data review step.

importer.goToReview();

goToComplete()

Takes the user to the completion step.

importer.goToComplete();

Data Methods

These methods allow you to work with the imported data:

getData()

Returns the current imported data.

const data = importer.getData();
console.log(`Imported ${data.length} rows`);

setData(data)

Sets data manually, bypassing the file upload step.

const manualData = [
  { firstName: 'John', lastName: 'Doe', email: 'john@example.com' },
  { firstName: 'Jane', lastName: 'Smith', email: 'jane@example.com' },
];

importer.setData(manualData);

getColumns()

Returns the column definitions.

const columns = importer.getColumns();

setColumns(columns)

Updates the column definitions after initialization.

importer.setColumns([
  { name: 'email', label: 'Email Address', required: true },
  { name: 'name', label: 'Full Name', required: true },
]);

Configuration Methods

These methods allow you to update configuration at runtime:

updateConfig(config)

Updates the configuration options.

importer.updateConfig({
  theme: {
    primaryColor: '#0077cc',
  },
  uploadOptions: {
    maxFileSize: 10 * 1024 * 1024, // 10MB
  }
});

on(event, callback)

Adds an event listener.

importer.on('complete', (data) => {
  console.log('Import completed with', data.length, 'rows');
});

importer.on('error', (error) => {
  console.error('Import error:', error);
});

off(event, callback)

Removes an event listener.

const handleComplete = (data) => {
  console.log('Import completed');
};

importer.on('complete', handleComplete);

// Later, when you want to remove the listener:
importer.off('complete', handleComplete);

Example: Complete Import Flow

Here's how to programmatically control the complete import flow:

const importer = new ExpressCSV({
  element: '#csv-importer',
  columns: [
    { name: 'email', label: 'Email Address', required: true },
    { name: 'name', label: 'Full Name', required: true },
  ]
});

// Open the importer
importer.show();

// Set data manually instead of file upload
const data = [
  { email: 'john@example.com', name: 'John Doe' },
  { email: 'jane@example.com', name: 'Jane Smith' },
];

importer.setData(data);

// Skip mapping and go directly to validation
importer.goToValidation();

// Later, get the final data
const finalData = importer.getData();

// Clean up when done
importer.destroy();

For more information about configuration options, see the Configuration page.