❤ Narcoleptic's Patch Mangler Products Pricing Documentation Community

Search packages Search Sign Up Sign In

Meet npm Pro: unlimited public & private packages + package-based permissions. Learn more »

vue-csv-import
2.3.9 • Public • Published 4 months ago

Readme Explore BETA 5 Dependencies 0 Dependents 25 Versions

Vue.js component to handle CSV uploads with Install

field mapping. npm i vue-csv-import

npm v2.3.9 license MIT Scrutinizer 10.00

Weekly Downloads

750
Demo
Version License
Demo 2.3.9 MIT

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

Unpacked Size Total Files
1.14 MB 33
Installation
Issues Pull Requests
You can install the package via yarn:
4 0

yarn add vue-csv-import
Homepage
github.com/jgile/vue-csv-import#readme
or npm:
Repository
npm install vue-csv-import --save github.com/jgile/vue-csv-import

Usage Last publish

4 months ago
Import component:
Collaborators

import { VueCsvImport } from 'vue-csv-import';
 
new Vue({
    components: { VueCsvImport },
Try on RunKit
    el: '#app',
});
Report a vulnerability
 

Include in template:

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

or with labels:

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

or with v-model:

<vue-csv-import v-model="parseCsv" :map-fields="{field1: 'Label 1', field2
 

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
            Headers?
        </label>
    </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

url null If present, the component will post the mapped values to

callback null The callback to be called on successful upload. (url requi

catch null The function to be called on an error in posting (url requi

finally null The function to be called no matter what on posting (url

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

headers null Define whether csv has headers by default. Removes che

fileMimeTypes ["text/csv"] Array of valid mime types

Slots:

Slot Description

thead The content of "thead" in the field mapping table

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

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.

Credits
John Gile
All Contributors

Keywords

jgile csv map

Help About Terms & Policies

Documentation Company Policies

Community Blog Terms of Use

Resources Careers Code of Conduct

Advisories Webinars

Status Press

Contact Newsletter