vue3 file upload get value undefined

Question

I am trying to upload a file with vue, but the issue I am stuck with is this, I can't access this.imageFile.value after selecting the photo. The data I returned from setup but undefined.

Under normal conditions, imageFile.value works in setup.

<template>
  <img v-show="imageUrl" :src="imageUrl" alt="">
  <input @change="handleImageSelected,getdata" ref="fileInput" type="file" accept="image/*">
</template>
<script>
import {UseImageUpload} from "./use/UseImageUpload";

export default {
  data() {
    return {
      Hello: null
    }
  },
  methods: {
    getdata() {
      this.Hello = this.imageFile.value
    }
  },
  setup() {
    let {imageFile, imageUrl, handleImageSelected} = UseImageUpload();

    return {
      imageFile,
      handleImageSelected,
      imageUrl,
    }
  }
}
</script>

UseImageUpload.js

import {ref, watch} from "vue";

export function UseImageUpload() {
//image
    let imageFile = ref("");
    let imageUrl = ref("");

    function handleImageSelected(event) {
        if (event.target.files.length === 0) {
            imageFile.value = "";
            imageUrl.value = "";
            return;
        }

        imageFile.value = event.target.files[0];
    }

    watch(imageFile, (imageFile) => {
        if (!(imageFile instanceof File)) {
            return;
        }

        let fileReader = new FileReader();

        fileReader.readAsDataURL(imageFile);

        fileReader.addEventListener("load", () => {
            imageUrl.value = fileReader.result;
        });
    });

    return {
        imageFile,
        imageUrl,
        handleImageSelected,
    };
}

why are you mixing up Options and Composition API and what exactly is this.Hello? — h0p3zZ
– h0p3zZ, Commented Apr 26, 2022 at 8:12
like this, when input file is uploaded. Use Image Upload data is being entered and I will create data for the user with the incoming data. — Liza
– Liza, Commented Apr 26, 2022 at 8:15
try my answer if it does not work just leave a comment and I will take a further look — h0p3zZ
– h0p3zZ, Commented Apr 26, 2022 at 8:18

h0p3zZ · Accepted Answer · 2022-04-26 08:42:40Z

1

First of all please try not to mix Options and Composition API - I know it might work but it is not necessary and in the most cases just an anti-pattern.
Composition API is there to replace the Options API or rather to give an alternative. They are just not supposed to work together or to be used together.

So this would improve your code:

setup() {
    const Hello = ref(null);
    const {imageFile, imageUrl, handleImageSelected} = UseImageUpload();

    function getdata() {
      Hello = imageFile.value
    }

    return {
      imageFile,
      handleImageSelected,
      imageUrl,
      getdata,
}

This should also fix your issue.

edited Apr 26, 2022 at 8:42

answered Apr 26, 2022 at 8:18

h0p3zZ

7374 silver badges21 bronze badges

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

4 Comments

Liza Over a year ago

What problems can there be when mixed?

h0p3zZ Over a year ago

There might be no problems at all but the code looks better, is easier to read and the chance of getting an error increases because you might mix the two up. For example .value is only needed in setup and therefore you might use .value in Options API and this is just an error you could prevent with only using Composition API (or only using Options API)

Liza Over a year ago

You may be right, but I have a situation like this. in the options api in data ` categories: { title: '', slug: '', seo: { title: '', dec: '' }, language: 'en', }, ` There is a yield like this, how can I access it in the composition api.

h0p3zZ Over a year ago

the same as in my answer. You would just write: const categories = ref({ title: '', slug: '', seo: { title: '', dec: '' }, language: 'en', }). And to access it in setup you would just need to write categories.value and to use it in the template you just have to return it at the end of setup and access it in the template just as categories. Fort further information just look at the documentation vuejs.org/guide/introduction.html and set the left switch to "Composition"

Collectives™ on Stack Overflow

vue3 file upload get value undefined

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related