Vue3 - Get input file from other component

Question

I'm working on a complex app so I simplify my question.

I have a input component located in the InputFile.vue and a FormFile.vue. I import the InputFile into the Form and after the user uploads a file to the inputfield and send the post request, I want to send the file with axios to the backend.

<!--INPUTFILE-->
<template>
  <input
    :id="props.name"
    :name="props.name"
    type="file"
    :ref="props.name"
  />
</template>
// ...

<script setup>
import { defineProps, ref } from "vue";
const props = defineProps({
  name: String,
});
let fileName = ref("");

<!-- FORMFILE -->

<template>
<div>
  <InputFile name="file" />
</div>
</template>

// ...
<script setup>
import InputFile from "@/components/InputFile";
import { ref } from "vue";

const input_file = InputFile.fileName;

  axios.post('post/file', {
    input_file: input_file
  }).then((res) => console.log(res));

The input_file is not getting the value of the file input (from component InputFile.vue). How can I access the input.value from FormFile ?

Shaun · Accepted Answer · 2022-09-07 11:52:27Z

0

You need to handle the file upload via a method.

A Vue method is an object associated with the Vue instance. Functions are defined inside the methods object. Methods are useful when you need to perform some action with v-on directive on an element to handle events.

    <template>
        <input
            v-on:change="handleFileUpload($event)"
            :id="props.name"
            :name="props.name"
            type="file"
            :ref="props.name"
        />
    </template>
    <script>
    export default {
...
        methods: {
            handleFileUpload(e) {
                e.preventDefault();
                const formData = new FormData();
                formData.append('file', e.target.files[0]);
                axios.post('post/file',
                    formData,
                    {
                        headers: {
                            'Content-Type': 'multipart/form-data'
                        },
                    }
                ).then((res) => console.log(res));
            }
        }
    }
    </script>

answered Sep 7, 2022 at 11:52

Shaun

8111 gold badge11 silver badges38 bronze badges

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

2 Comments

Vic Wild Over a year ago

Ok and then I can trigger the handleFileUpload method from InputFile.vue in the FormFile.vue?

Shaun Over a year ago

This answer should help you: stackoverflow.com/questions/40957008/…

Collectives™ on Stack Overflow

Vue3 - Get input file from other component

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related