Vue.js component to handle CSV uploads with field mapping.

Demo

Go to the "demo" folder for a working example.

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 'vue-csv-import';

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>

With all available slots:

<vue-csv-import
    v-model="csv"
    url="/hello"
    :map-fields="['name', 'age']">

    <template slot="hasHeaders" slot-scope="{headers, toggle}">
        <label>
            <input type="checkbox" id="hasHeaders" :value="headers" @change="toggle">
            Headers?
        </label>
    </template>

    <template slot="input" slot-scope="{change}">
        <input type="file" @change.prevent="change">
    </template>

    <template slot="error">
        File type is invalid
    </template>

    <template slot="thead">
        <tr>
            <th>My Fields</th>
            <th>Column</th>
        </tr>
    </template>

    <template slot="next" slot-scope="{load}">
        <button @click.prevent="load">load!</button>
    </template>

    <template slot="submit" slot-scope="{submit}">
        <button @click.prevent="submit">send!</button>
    </template>
</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
autoLoad	false	Auto load csv to field mapping table after changed input
autoMatchFields	false	If field names match csv headers, automatically match them. Leading and trailing white space is trimmed before comparison.
autoMatchIgnoreCase	false	Ignore case when automatically matching fields (autoMatchFields required)
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
tableSelectClass	"form-control"	The class to be added to the table element selects
submitBtnText	"Submit"	The value of the final submit button
loadBtnText	"Submit"	The value of the initial load file button
headers	null	Define whether csv has headers by default. Removes checkbox.
fileMimeTypes	["text/csv"]	Array of valid mime types
canIgnore	false	Can fields be ignored (Boolean)

Slots:

Slot	Description
thead	The content of "thead" in the field mapping table
input	The content of "input" file
next	The next button. Use slot-scope "next" to load csv.
submit	The submit button. Use slot-scope "submit" to submit form.
hasHeaders	The "has headers" checkbox. Use slot-scope "toggle" and "headers".

Testing

npm run test:unit

Changelog

Please see CHANGELOG for more information what has changed recently.

Security

If you discover any security related issues, please contact John Gile.

License

The MIT License (MIT). Please see License File for more information.

nghitran/vue-csv-import