Csvautofilljs NPM

csvautofilljs

AutoFillJS is a front-end library package that serves one purpose: fill the form without have to re-type the same value over and over again. By using CSV and attach it, people are able to just re-fill same value to different form without spending more time and work.

Goal

User takes less time and work to duplicate the data, for e.g. events, campaigns, etc.
Standardise front-end code to be more uniform.

Installation

To install the library, refer to this link: https://www.npmjs.com/package/csvautofilljs or

npm install --save csvautofilljs

How to use

Import CsvAutoFill from the library

import { CsvAutoFill } from 'csvautofilljs'

Generate File

The generateFile method accepts an object contains optional filename and prefix.

generateFile({ name: '<optional custom filename>', prefix: '<optional custom prefix>' })

The default value:

param	value
name	template
prefix	csv-

The generateFile method returns csv file with this format:

key	label	value
firstName	First Name	Jane

Step to setup

Add attribute name at the input/ textarea/select with prefix + the state. E.g if the state is firstName and the prefix is csv-, then the input name is csv-firstName.
If you want to put label to help the user to fill the input/textarea/select, add a label with attribute htmlFor(if you use React) that refer to the input name.

Example:

<label htmlFor="csv-firstName">First Name</label>
<input type="text" name="csv-firstName" value="..."/>

Example of custom filename and prefix:

<button onClick={() => CsvAutoFill.generateFile({ name: 'csv-template', prefix: 'csv' })}>
  Generate File
</button>

Upload File

The uploadFile method accepts an object contains file and optional custom prefix.

The default value:

param	value
prefix	csv-

The uploadFile method returns an object contains data and status code. If the file is wrong, the return will be:

{
    data: {
        message: "Please choose a csv file"
    },
    statusCode: 0
}

If the file is csv and the element is exist, the return will be:

{
    data: [
        {
            disabled: <false or true>,
            key: "<the key>",
            label: "<the label>",
            value: "<the value>"
        }
    ],
    statusCode: 1
}

Step to setup

Example of how to use the method:

...
constructor() {
    this.state = {
        file: null,
        fileName: ""
    }

    this.handleUpload = this.handleUpload.bind(this);
    this.handleChooseFile = this.handleChooseFile.bind(this);
}

handleUpload(e) {
    e.preventDefault();

    CsvAutoFill.uploadFile({ file: this.state.file }).then(
      result => {
          // the setState process
      }
    );
}

handleChooseFile(e) {
    const file = e.target.files[0];
    let state = file
      ? {
          fileName: file.name,
          file
        }
      : {
          fileName: null,
          file: null
        };

    this.setState(state);
    e.target.value = null;
}

render() {
    return (
        <input type="file" onChange={this.handleChooseFile} />
        <button onClick={this.handleUpload}>Upload</button>
...

Examples

This is the example of csvautofilljs: https://github.com/angelamelinda/sample-csvautofill

Contributing

Please refer to each project's style guidelines and guidelines for submitting patches and additions. In general, we follow the "fork-and-pull" Git workflow.

Fork the repo on GitHub
Clone the project to your own machine
Commit changes to your own branch
Push your work back up to your fork
Submit a Pull request so that we can review your changes NOTE: Be sure to merge the latest from "upstream" before making a pull request.