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


This version is for Vue 3. Click here for Vue 2.

VueCsvImport is completely un-styled and customizable. All markup can be replaced and all text can be customized.

Demo

---

Installation

You can install the package via npm or yarn:

``bash


npm

npm install vue-csv-import

Yarn

yarn add vue-csv-import
`

You can import components individually.

`js
import {VueCsvToggleHeaders, VueCsvSubmit, VueCsvMap, VueCsvInput, VueCsvErrors, VueCsvImport} from 'vue-csv-import';
`

Or import all as a plugin.

`js
import {createApp} from "vue";
import App from "./App.vue";
import {VueCsvImportPlugin} from "vue-csv-import";

createApp(App)
.use(VueCsvImportPlugin)
.mount("#app");
`

A minimal working example with all components will look something like this:

`vue


`

---

Components

- VueCsvImport - The primary component wrapper. All other components should be used within this component.
- VueCsvToggleHeaders - Toggles whether CSV should be read as having headers or not.
- VueCsvInput - The file input field to upload your CSV
- VueCsvMap - Used to map CSV columns to your fields
- VueCsvSubmit - Used to POST the mapped CSV.
- VueCsvErrors - Used to display errors.

$3

Primary wrapper component.

`vue

`

#### Props:

| Prop | Default | Description |
| ------ | ------- | ----------- |
| fields | null | (required) The field names used to map the CSV. |
| text | see below | (optional) Override the default text used in the component. |
| modelValue | N/A | (optional) Binds to the mapped CSV object. |

#### Default text

`json
{
errors: {
fileRequired: 'A file is required',
invalidMimeType: "Invalid file type"
},
toggleHeaders: 'File has headers',
submitBtn: 'Submit',
fieldColumn: 'Field',
csvColumn: 'Column'
}
`

#### Slot Props:

| Prop | Description |
| ------ | ----------- |
| file | The selected file |
| errors | Current errors |
| fields | The fields object |

---

$3

Allows user to toggle whether the CSV has headers or not.

`vue


`

Or with custom markup:

`vue


`

#### Props:

| Prop | Default | Description |
| ------ | ------- | ----------- |
| checkboxAttributes | {} | (optional) Attributes to bind to the checkbox. |
| labelAttributes | {} | (optional) Attributes to bind to the label. |

#### Slot Props:

| Prop | Description |
| ------ | ----------- |
| hasHeaders | Whether CSV is marked as having headers. |
| toggle | Toggle the 'hasHeaders' value. |

---

$3

The file field for importing CSV.

`vue


`

Or with custom markup:

`vue


`

#### Props:

| Prop | Default | Description |
| ------ | ------- | ----------- |
| name | N/A | (required) The field names used to map the CSV.
| headers | true | (optional) Override the default text used in the component. |
| parseConfig | N/A | (optional) Papaparse config object. |
| validation | true | (optional) Use validation or not |
| fileMimeTypes | ["text/csv", "text/x-csv", "application/vnd.ms-excel", "text/plain"] | (optional) Accepted CSV file mime types. |

#### Slot Props:

| Prop | Description |
| ------ | ----------- |
| file | The current file object |
| change | Change the file |

---

$3

Component to map the CSV to the specified fields.

`vue


`

Or use slot for custom markup:

`vue


`

#### Props:

| Prop | Default | Description |
| ------ | ------- | ----------- |
| noThead | false | (optional) Attributes to bind to the checkbox. |
| selectAttributes | {} | (optional) Attributes to bind to the select fields. |
| autoMatch | true | (optional) Auto-match fields to columns when they share the same name |
| autoMatchIgnoreCase | true | (optional) Ignore case when auto-matching |

#### Slot Props:

| Prop | Description |
| ------ | ----------- |
| sample | The first row of the CSV. |
| map | The currently mapped fields. |
| fields | The fields. |

---

$3

Displays a button to post the CSV to specified URL.

`vue


`

Or use slot for custom markup:

`vue


`

#### Props:

| Prop | Default | Description |
| ------ | ------- | ----------- |
| url | N/A | (required) Where to post the CSV. |

#### Slot Props:

| Prop | Description |
| ------ | ----------- |
| submit | Submit the CSV (POST) |
| mappedCsv | The mapped CSV object |

---

$3

Displays any error messages.

`vue


`

Or use slot for custom markup:

`vue


`

#### Slot Props:

| Prop | Description |
| ------ | ----------- |
| errors | Object containing errors |

---

$3

`bash
npm run test
``

$3

Please see CHANGELOG for more information what has changed recently.

$3

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