Reusable File Component using Vue JS

Question

I have a component called BaseFile

components/BaseFile.vue

<template>
  <div>
    <b-form-group :label="label">
      <b-form-file
        :value="value"
        :placeholder="placeholder"
        :accept="acceptedExtensions"
        @input="updateValue">
      </b-form-file>
    </b-form-group>
  </div>
</template>

<script>
  export default {
    name: 'BaseFile',
    props:   {
      label: { type: String },
      value: { type: Object },
      placeholder: { type: String, default: "Choose a file..." },
      acceptedExtensions: { type: String, default: "image/jpeg, image/png" }
    }, 
    methods: {
      updateValue(value) {
        // console.log(typeof value)
        // console.log(event.target.value)
        this.$emit('input', value);
      }
    }
  }
</script>

then I'm calling this component in my Users/new.vue

<BaseFile label="Primary Image" v-model="primaryImage"/>

<script>
import BaseFile from "~/components/UI/BaseFile";
export default {
  components: {
    BaseFile
  },
  data() {
    return {
      profileImage: {}
    }
  }
</script>

when I try to add a file in BaseFile component, the error I'm getting is

 Invalid prop: type check failed for prop "value". Expected Object, got File.

I checked the documentation of Vue and there's no available props for File. But I need file because I'm uploading it directly to s3.

So the issue is that you're getting different value instead of a File? I actually tested this on my local and did not get this prop check warning. — Yom T.
– Yom T., Commented Jan 16, 2019 at 9:24
I tried to do instanceof the value from updateValue method and I'm getting File. I tried adding File to the type of value and I'm getting File is not defined — AllenC
– AllenC, Commented Jan 17, 2019 at 3:12

mathk · Accepted Answer · 2019-01-16 09:37:09Z

3

Vuejs will use instanceof for type checking.

So you can simply add File if you require both type:

  export default {
    name: 'BaseFile',
    props:   {
      label: { type: String },
      value: { type: [Object, File] },
      placeholder: { type: String, default: "Choose a file..." },
      acceptedExtensions: { type: String, default: "image/jpeg, image/png" }
    },
  }

Also my advise would be to initialize profileImage with undefined or null IIUC you are not using it.

edited Jan 16, 2019 at 9:37

answered Jan 16, 2019 at 9:30

mathk

8,1416 gold badges47 silver badges76 bronze badges

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

4 Comments

AllenC Over a year ago

I'm still getting an error File is undefined when I add the type to [Object, File] and I changed the profileImage to null or undefined.

AllenC Over a year ago

I made it work by not specifying the type for value: {}

mathk Over a year ago

Which browser are you using to have File is undefined ?

AllenC Over a year ago

I'm using Chrome

Okoro Efe Christopher · Accepted Answer · 2019-01-16 10:11:30Z

0

Since the data you're expecting is of type File you can set the type to both File and Object by passing an array like so

<script>
  export default {
    name: 'BaseFile',
    props:   {
      label: { type: String },
      value: { type: [Object, File},
      placeholder: { type: String, default: "Choose a file..." },
      acceptedExtensions: { type: String, default: "image/jpeg, image/png" }
    }, 
    methods: {
      updateValue(value) {
        // console.log(typeof value)
        // console.log(event.target.value)
        this.$emit('input', value);
      }
    }
  }
</script>

answered Jan 16, 2019 at 10:11

Okoro Efe Christopher

523 bronze badges

Collectives™ on Stack Overflow

Reusable File Component using Vue JS

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related