Upload File with BootstrapVue in Laravel - laravel

Question

anyone knows how to submit file with bootstrapVue file input?
I am getting null from request->all()
array:13 [
...
"calibration_cert" => array:1 [
"$path" => null
]
]
Below is what I tried
<b-form-group label="Calibration Cert:">
<b-form-file
v-model="form.calibration_cert"
:state="Boolean(form.calibration_cert)"
placeholder="Choose a file or drop it here..."
drop-placeholder="Drop file here..."
></b-form-file>
</b-form-group>
.....
methods:{
onSubmit(event) {
event.preventDefault();
axios
.post("/equipments/create", this.form, {
headers: {
"Content-Type": "multipart/form-data"
}
})
.then(response => {
console.log(response);
})
};
},
Appreciate if anyone can help

Answer 1

Your lucky day, I'm just working on this.
You have to use formData() object for submitting files from Axios.
If your Laravel route uses a patch method, you have to use axios.post() instead of axios.patch() and append the _method: PATCH in your formData
Saying that, this is how I do it:
component.vue
<b-form-file
v-model="form.calibration_cert"
:state="Boolean(form.calibration_cert)"
placeholder="Choose a file or drop it here..."
drop-placeholder="Drop file here..."
></b-form-file>
.....
methods:{
onSubmit(event) {
event.preventDefault();
// Set formData
const formData = new FormData()
// Append the method only if you are using a patch route in your server side
formData.append('_method', 'PATCH')
// Append the file
formData.append('calibration_cert', this.form.calibration_cert)
// Append the rest of your form data
formData.append('data1', this.form.data1)
formData.append('data2', this.form.data2)
.....
axios
.post("/equipments/create", formData, {
headers: {
"Content-Type": "multipart/form-data"
}
})
.then(response => {
console.log(response);
})
};
},
Then in your Laravel side, you can do
$path = $request->file('calibration_cert')->store('files');

Answer 2

You need to send the files as a object in axios request, use below example to understand what you should do.
const app = new Vue({
data: () => ({images: null}),
template: `
<div>
<input type="file" #change="uploadFile" ref="file">
<button #click="submitFile">Upload!</button>
</div>
`,
methods: {
uploadFile() {
this.Images = this.$refs.file.files[0];
},
submitFile() {
const formData = new FormData();
formData.append('file', this.Images);
const headers = { 'Content-Type': 'multipart/form-data' };
axios.post('https://httpbin.org/post', formData, { headers }).then((res) => {
res.data.files; // binary representation of the file
res.status; // HTTP status
});
}
}
});
app.$mount("#content");