Cannot read property 'length' of undefined"` for v-file-input Vuetify

Question

I'm creating a reusable component for v-file-input of Vuetify.

Form.vue

<BaseFile v-model="image" label="Upload Image"/>

<script>
  export default {
    name: 'Form',
    data() {
      return {
        image: []
      }
    }
  }
</script>

BaseFile.vue

<v-file-input
  :value="value"
  :label="label"
  solo
  show-size
  @change="updateValue">
</v-file-input>

<script>
 export default {
   name: 'BaseFile',
   props: {
     label: { type: String },
     value: { type: Array }
   },
   methods: {
     updateValue(file) {
       if (file.name) {
          const reader = new FileReader();
          reader.onload = e => {
            const base64Data = e.target.result;
            const uploadFile = [{ fileName: file.name, base64: base64Data }];

            this.$emit('input', uploadFile);
          }
          reader.readAsDataURL(file);
       }
     }
   }
 }
</script>

The image value becomes

[ 
  { fileName: 'hello.png', base64: '.....'}
]

But I'm getting a

TypeError: Cannot read property 'length' of undefined"

The problem that your version calls change event 3 times. v-file-input have truncateText function, which accepts str. Your component provides it only for first call, and for second 2 it raise error, coz try to get length of undefined. — bonusrk
How come it calls change event 3 times? I can see that the image becomes the array of object — AllenC
if extend inner v-file-input methods, you'll see that your BaseFile tries to truncateText multiply times, but provides string for it only once/ — bonusrk

Michal Levý Michal Levý · Accepted Answer · 2020-01-08T15:03:46

Problem is v-file-input expects value prop to be "A single or array of File objects." so as soon as you pick one file, content of image data (and consequently value prop) will become something different than Vuetify expects...

Cannot read property 'length' of undefined"` for v-file-input Vuetify

1 Answers