How to let users upload CSV files to batch import data


Hey guys,

I am trying to implement a “batch import” feature on my app that allows users to import data through a .csv file that automatically adds them to a Mongo Collection. I am using the clinical:csv package.

However, I can’t figure out how to get the part that comes before the Mongo insertion done…

How do I create an “import your file here” button that opens the user’s file explorer and gets the file?
How do I check if the uploaded file is truly .csv and in the right format?

Any ideas? Thanks!

#2 is the best library to handle CSV.

Others links:


Hi @patrickcneuhaus,

I use papaparse to parse the csv into json, Ill post a code example of how I do it using react. I havent tested this I just extracted parts of my code for this example.

To validate the data I do it on the method using simpleschema, bubt you can also do it with simple schema on the _importUsersBatch function.

class MyView extends Component {
  _importUsersBatch = async (event) => {

    this.setState({ errors: [], loading: true });

    const file =[0];
    const results = await parseCSV(file);, 1);

    let contacts =;

    // TODO: Validate before upload
    contacts = contacts.filter((contact) => !!contact[0]).map((contact) => {
      return {
        unitCode: contact[0].toString(),
        firstName: contact[1] || undefined,
        lastName: contact[2] || undefined,
        email: contact[3] || undefined,
        phone: contact[4] ? contact[4].toString() : undefined,
        gender: contact[5] || undefined,
        birthdate: contact[6] || undefined,
        contactType: contact[7] || undefined

    const params = {
      objects: contacts

    try {
      await asyncCall('importBatch', params);
    } catch (error) {
      this.setState({ error });
    } finally {
      this.setState({ loading: false });

  return (
      <label htmlFor="input">
          color={ this.state[] ? 'green' : undefined }
          <Icon name={ this.state[] ? 'checkmark' : 'upload' }/>

        disabled={ loading }
        onChange={ this._importUsersBatch }/>

function parseCSV(file) {
  return new Promise(function(resolve, reject) {
    parse(file, {
      dynamicTyping: true,
      skipEmptyLines: true,
      error(error) {

      complete(results) {

Hope this helps