/ Miscellaneous

Vue.js component to handle CSV uploads with field mapping

Vue.js component to handle CSV uploads with field mapping

vue-csv-import

Vue.js component to select a CSV file, map the columns to fields, and post it somewhere.

Installation

You can install the package via yarn:

yarn add vue-csv-import

or npm:

npm install vue-csv-import --save

Usage

Import component:

import { VueCsvImport } from '../src';

new Vue({
    components: { VueCsvImport },

    el: '#app',
});

Include in template:

<vue-csv-import url="/url/to/post" :map-fields="['array', 'of', 'field', 'names']"></vue-csv-import>

or with labels:

<vue-csv-import url="/url/to/post" :map-fields="[field1: 'Label 1', field2: 'Label 2']"></vue-csv-import>

or with v-model:

<vue-csv-import v-model="parseCsv" :map-fields="[field1: 'Label 1', field2: 'Label 2']"></vue-csv-import>

Options:

Option Default Description
mapFields N/A (required) These are the field names that the CSV will be mapped to
url null If present, the component will post the mapped values to this url. Otherwise, the component will only emit the value to be used as a normal input
callback null The callback to be called on successful upload. (url required)
catch null The function to be called on an error in posting (url required)
finally null The function to be called no matter what on posting (url required)
tableClass "table" The class to be added to table element
checkboxClass "form-check-input" The class to be added to the checkbox
buttonClass "btn btn-default" The class to be added to buttons
inputClass "form-control-file" The class to be added to the file input
submitBtnText "Submit" The value of the final submit button
loadBtnText "Submit" The value of the initial load file button

Testing

yarn test

GitHub