Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jgile/vue-csv-import
Vue.js component to select a CSV file, map the columns to fields, and post it somewhere.
https://github.com/jgile/vue-csv-import
csv-import node npm npm-package vue vuejs vuejs2
Last synced: 7 days ago
JSON representation
Vue.js component to select a CSV file, map the columns to fields, and post it somewhere.
- Host: GitHub
- URL: https://github.com/jgile/vue-csv-import
- Owner: jgile
- License: mit
- Created: 2018-04-12T20:52:04.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-01-27T13:44:35.000Z (10 months ago)
- Last Synced: 2024-10-30T06:58:35.598Z (21 days ago)
- Topics: csv-import, node, npm, npm-package, vue, vuejs, vuejs2
- Language: Vue
- Size: 9.26 MB
- Stars: 172
- Watchers: 6
- Forks: 75
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Vue.js component to handle CSV uploads with field mapping.
[](https://npmjs.com/package/vue-csv-import)
[](LICENSE.md)
[](https://scrutinizer-ci.com/g/jgile/vue-csv-import/?branch=master)
This version is for Vue 3. [Click here for Vue 2](https://github.com/jgile/vue-csv-import/tree/vue2).
VueCsvImport is completely un-styled and customizable. All markup can be replaced and all text can be customized.
[Demo](https://jgile.github.io/vue-csv-import/)
---
## 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](#VueCsvImport) - The primary component wrapper. All other components should be used within this component.
- [VueCsvToggleHeaders](#VueCsvToggleHeaders) - Toggles whether CSV should be read as having headers or not.
- [VueCsvInput](#VueCsvInput) - The file input field to upload your CSV
- [VueCsvMap](#VueCsvMap) - Used to map CSV columns to your fields
- [VueCsvSubmit](#VueCsvSubmit) - Used to POST the mapped CSV.
- [VueCsvErrors](#VueCsvErrors) - Used to display errors.
### VueCsvImport
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 |
---
### VueCsvToggleHeaders
Allows user to toggle whether the CSV has headers or not.
```vue
...
...
```
Or with custom markup:
```vue
...
Has Headers
...
```
#### 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. |
---
### VueCsvInput
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 |
---
### VueCsvMap
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. |
---
### VueCsvSubmit
Displays a button to post the CSV to specified URL.
```vue
...
...
```
Or use slot for custom markup:
```vue
Submit!!
```
#### Props:
| Prop | Default | Description |
| ------ | ------- | ----------- |
| url | N/A | (required) Where to post the CSV. |
| config | {} | (optional) Axios config object. |
#### Slot Props:
| Prop | Description |
| ------ | ----------- |
| submit | Submit the CSV (POST) |
| mappedCsv | The mapped CSV object |
---
### VueCsvErrors
Displays any error messages.
```vue
...
...
```
Or use slot for custom markup:
```vue
...
...
...
```
#### Slot Props:
| Prop | Description |
| ------ | ----------- |
| errors | Object containing errors |
---
### Testing
```bash
npm run test
```
### Changelog
Please see [CHANGELOG](CHANGELOG.md) 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](LICENSE.md) for more information.
## Credits
- [John Gile](https://github.com/jgile)
- [All Contributors](../../contributors)