submit the data both from parent and child component - laravel

Question

I am using Laravel 5.7 with vue.js and mysql
When I hit the submit button in parent component, Is there any way to submit the selected file from child component (Images) also?
Parent Component - This component has one textbox, a button to save and declared a component to render the html for selecting the image.
<template>
<div>
<label class="control-label">Name</label>
<input name="Name" type="text" v-model="saveForm.Name">
<images></images> //Child Component declaration
<button type="button" #click="store()">
Save
</button>
</div>
</template>
<script>
export default {
data() {
return {
saveForm: {
Name: ''
}
};
},
methods: {
store() {
axios.post("my route", this.saveForm).then(response => {
if(response.data.Status) {}
});
}
}
}
</script>
Image component(child component), Actually, this component has many images around 58.
<template>
<div>
<input type="file" id="Image">
</div>
</template>
<script>
export default {
data() {
},
methods: {
}
}
</script>

Answer 1

You can use $refs to access the files from the parent component:
https://v2.vuejs.org/v2/guide/components-edge-cases.html#Accessing-Child-Component-Instances-amp-Child-Elements
And a FormData object to upload the files through ajax:
https://blog.teamtreehouse.com/uploading-files-ajax
Parent component:
<template>
...
<!-- Declare a 'ref' attribute on the child component -->
<images ref="imageComponent"></images>
...
</template>
<script>
export default {
data() {
return {
saveForm: {
Name: ''
}
};
},
methods: {
store() {
// get the child attribute's files through the $refs properties
let files = this.$refs.imageComponent.$refs.fileInput.files;
// Create a new FormData object.
let formData = new FormData();
// Loop through each of the selected files.
for (let i = 0; i < files.length; i++) {
let file = files[i];
// Check the file type.
if (!file.type.match('image.*')) {
continue;
}
// Add the file to the request.
formData.append('files[]', file, file.name);
}
// Add the Name
formData.append('Name', this.saveForm.Name);
// Ajax request
axios.post("my route", formData).then(response => {
if(response.data.Status) {}
});
}
}
}
</script>
Child component:
<template>
...
<!-- Declare a 'ref' attribute on the file input -->
<input ref="fileInput" type="file" id="Image">
...
</template>
<script>
export default {
data() {
},
methods: {
}
}
</script>