Skip to content

burnash/dataimport

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

DataImport.js

Simple JavaScript browser-based CSV importer.

Inspired by Patrick McKenzie's Design and Implementation of CSV/Excel Upload for SaaS. DataImport is built on top of Handsontable and lets you do CSV input data pre-validation in the browser.

Demo on JSFiddle (Click Run or Cmd/Ctrl + Enter to launch it)

Example

var is = DataImport.is;

var containerElement = document.getElementById("handsontable-element");

var dataimport = new DataImport(containerElement, {
  fields: [{
    id: "fullName",
    name: "Full Name",
    required: true
  }, {
    id: "birthday",
    name: "Birthday",
    required: false,
  }, {
    id: "contactType",
    name: "Contact Type",
    required: true,
    choices: ["work", "home"],
    validate: [
      is.anyOf(["work", "home"], "Wrong value")
    ]
  }, {
    id: "email",
    name: "Email",
    required: true,
    validate: [
      is.unique(),
      is.matchingRegex(["[^@]+@[^\.]+\..+"], "Incorrect Email Address")
    ]
  }],
  // ...
});

dataimport.validate({
  complete: function (result) {
    console.log(result);
  },
  fail: function (errors) {
    console.log(errors);
  }
});

How it works

Here's what happens in the demo.

  1. When the user adds a CSV file the fields in the file are matched to the fields described in DataImport. This example uses Papa Parse to load the data from CSV and Fuse.js to do fuzzy matching of fields.

alt text

  1. If needed the user can fix automatic matching by selecting a proper field from the dropdown.

alt text

  1. When the user clicks Validate, DataImport checks the data and displays the errors.

alt text

  1. When there are no errors DataImport.validate calls complete callback with resulting data (array of arrays). This is your parced CSV data.

Check Demo on JSFiddle (Click Run or Cmd/Ctrl + Enter to launch it)