DataImport.js Demo

Simple CSV import with Hands author(s): Anton Burnashev

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/burnash/dataimport@master/vendor_modules/handsontable.full.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/burnash/dataimport@master/src/css/dataimport.css">
<script src="https://cdn.jsdelivr.net/gh/burnash/dataimport@master/vendor_modules/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/burnash/dataimport@master/vendor_modules/handsontable.full.js"></script>
<script src="https://cdn.jsdelivr.net/gh/burnash/dataimport@master/vendor_modules/papaparse.js"></script>
<script src="https://cdn.jsdelivr.net/gh/burnash/dataimport@master/vendor_modules/fuse.js"></script>
<script src="https://cdn.jsdelivr.net/gh/burnash/dataimport@master/src/scripts/sheet.js"></script>
<script src="https://cdn.jsdelivr.net/gh/burnash/dataimport@master/src/scripts/dataimport.js"></script>
<script src="https://cdn.jsdelivr.net/gh/burnash/dataimport@master/src/scripts/validators.js"></script>
<script src="https://cdn.jsdelivr.net/gh/burnash/dataimport@master/src/scripts/dropfile.js"></script>
<div style="display: flex;">
    <div id="left">
        <div id="drop">Drag a file here</div>

        <div class="use-example-csv">
            <a href="https://raw.githubusercontent.com/burnash/dataimport/master/demo/demo.csv">Use an example CSV</a>
        </div>

        <button class="btn btn-default btn-submit">Validate</button>
    </div>
    <div id="right">
        <div class="validation-errors" style="color: #a94442; display: none;">
            Errors:
            <ul class="errors">

            </ul>
        </div>

        <div id="hot" style="overflow: scroll" class="handsontable"></div>
        <div class="result">
            <pre></pre>
        </div>
    </div>
</div>

<script type="text/javascript">
window._dataimportExampleCSV = `name,birthday,contact type,email
Eleanor Blackburn,"November 25, 1964",home,[email protected]
John A. Davis,"June 6, 1953",work,[email protected]
Fai Chen,"March 31,...

CSS

body {
    font-family:"Helvetica Neue",Helvetica,Arial,sans-serif
}

#drop {
    border:2px dashed #bbb;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    padding:25px;
    text-align:center;
    width:128px;
    font:20pt bold,Sans-Serif;
    color:#bbb
}

#left {
    width: 188px;
    height: 400px;
    margin: 40px;
    float: left;
}

#right {
    margin-top: 40px;
}

#header {
    height:168px
}

.use-example-csv {
    text-align: center;
    padding: 30px 0 0;
}

.validation-errors {
    margin-bottom: 20px;
}

.handsontable {
    margin-bottom:10px;
    color:#000;
    z-index:2;
    font-size:12px
}


.btn {
  display: inline-block;
  padding: 5px 12px;
  margin-bottom: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
}

.btn-default {
  color: #333;
  background-color: #fff;
  border-color: #ccc;
}

.btn-default.active, .btn-default.focus, .btn-default:active, .btn-default:focus, .btn-default:hover, .open>.dropdown-toggle.btn-default {
  color: #333;
  background-color: #e6e6e6;
  border-color: #adadad;
}

.btn-submit {
    margin: 34px 32px;
    font-size: 20px;
    padding: 10px 24px;
}


.caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-top: 4px solid;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}

ul.errors {
    line-height: 160%;
}

.result {
  font-size: 16px;
  max-height: 270px;
  overflow: scroll;
  border: 2px solid gray;
  margin-top: 10px;
  margin-right: 40px;
  padding: 20px;
  display: none;
}

JavaScript

/*global document, jQuery, DataImport, dropFile, Papa, Fuse */

(function ($) {
  "use strict";

  var is = DataImport.is;

  $(document).ready(function () {
    var containerEl = document.getElementById("hot");
    var dataimport;

    var 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"),
        ],
      },
    ];

    var matchFields = function (fields, data) {
      var fuse = new Fuse(data[0]),
        mapping = [],
        obj = {},
        result,
        len,
        i;

      for (i = 0, len = fields.length; i < len; i += 1) {
        result = fuse.search(fields[i].id);
        if (result.length && !obj.hasOwnProperty(result[0])) {
          obj[result[0]] = fields[i].id;
        }
      }

      for (i = 0, len = data[0].length; i < len; i += 1) {
        mapping.push(obj[i] || null);
      }

      return mapping;
    };

    function complete(results) {
      if (results.errors) {
        console.log(results.errors);
      }

      if (dataimport) {
        dataimport.destroy();
      }

      dataimport = new DataImport(containerEl, {
        fields: fields,
        data: results.data,
        sheetHeight: 200,
        matchFields: matchFields,
      });
    }

    function parse(file) {
      Papa.parse(file, {
        complete: complete,
      });
    }

    function displayErrors(errors) {
      var $errors = $(".errors"),
        len = errors.length,
        i;
      for (i = 0; i < len; i += 1) {
       ...