VueJS import and parse CSV (frontend only)

Question

can you please share a working example of parsing CSV file from client?

I can't seem to find any working example at all ...

I have been playing around with vue-papa-parser and vue-csv-import but can make it work :(

Here is my component file (using the latter package):

    <template lang="html">
     <div class="container">
       <h1 class="h2">CSV Upload</h1>
       <div class="dragndrop text-muted d-flex flex-column justify-content-center align-items-center border border-secondary">
    
          <vue-csv-import
              v-model="csv"
              :fields="{name: {required: false, label: 'Name'}, age: {required: true, label: 'Age'}}"
          >
              <vue-csv-toggle-headers></vue-csv-toggle-headers>
              <vue-csv-errors></vue-csv-errors>
              <vue-csv-input></vue-csv-input>
              <vue-csv-map :auto-match="false"></vue-csv-map>
          </vue-csv-import>
       </div>
     </div>
    </template>
    
    <script>
      import { VueCsvImport } from 'vue-csv-import';
    
      export default {
        name: "CSVUpload",
        components: {
          VueCsvImport
        },
        data() {
          return {
            csv: null
          }
        },
        methods: {
        }
      }
    </script>
    
    <style lang="css" scoped>
    .dragndrop {
      background-color: #f5f5f5;
      height: 50vh;
      width: 80%;
      margin: 2.5em auto;
    }
    </style>

but on the console I am getting this:

[Vue warn]: Error in render: "TypeError: Cannot read property 'VueCsvImportData' of undefined"

found in

---> <VueCsvImport>
       <CallRecordUpload> at src/components/admin/Upload/Upload.vue
         <Home> at src/components/Home.vue
           <App> at src/App.vue
             <Root>

and thus I cannot even see any INPUT TYPE="FILE" to try to upload ... there is something wrong with the vue-csv-import :(

any thoughts?

EDIT: SOLVED

I had to install lower version (v4 is for vue3 only!)

npm install [email protected] --save

works for me great!

thx @marsnebulasoup for the tip !!

I actually did something similar here. You can check out the code if you want for ideas. — marsnebulasoup
– marsnebulasoup, Commented Dec 18, 2020 at 19:58
I found a demo that uses vue-csv-import if you want to take a look: codesandbox.io/s/62x8plrwnk — marsnebulasoup
– marsnebulasoup, Commented Dec 18, 2020 at 20:26
Yeah. I saw that, and tried to create a sandbox with that version but it doesn't work for some reason for me...they must be using some dark magic to get to work properly 😑 — marsnebulasoup
– marsnebulasoup, Commented Dec 19, 2020 at 18:57

Mr.P · Accepted Answer · 2020-12-19 19:12:41Z

8

bad version .. it automatically uses the latest version 4 (which is for vue3 only .. for vue2 I had to use 2.3.4 and it worked great :) )

see the changelog

edited Dec 19, 2020 at 19:12

answered Dec 19, 2020 at 19:06

Mr.P

1,2674 gold badges26 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

aswzen Over a year ago

yarn add [email protected]

john graham Over a year ago

It seems this version isnt able to autoMatch fields

Collectives™ on Stack Overflow

VueJS import and parse CSV (frontend only)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related