Jan 20, 2022
0
Level 4
how to submit different files from different inputs
I want to upload different form fields that file. I'm not sure what to do since it's not multiple files in a single field.
<form action="" method="post">
<div class="row">
<div class="row">
<div class="col mx-4 centered space">
<div class="dot">
<i class="far fa-file-alt" style="font-size:30px;"></i>
<p class="small my-3">
Drag and drop to attach file or choose from finder
</p>
<input type="file" ref="identity" id="identity" v-on:change="handleFileUpload(), submitFile()" style="display: none">
<b-button @click="$refs.identity.click()" class="outline small">Open Finder</b-button>
</div>
<p class="small">proof of identity <span class="red">*</span></p>
<span class="small">(driver's license, international passport)</span>
</div>
<div class="col mx-4 centered space">
<div class="dot">
<i class="far fa-file-alt" style="font-size:30px;"></i>
<p class="small my-3">
Drag and drop to attach file or choose from finder
</p>
<input type="file" ref="md_school" id="md_school" v-on:change="handleFileUpload(), submitFile()" style="display: none">
<b-button @click="$refs.md_school.click()" class="outline small">Open Finder</b-button>
</div>
<p class="small">Medical school certificate <span class="red">*</span></p>
</div>
<div class="col mx-4 centered space">
<div class="dot">
<i class="far fa-file-alt" style="font-size:30px;"></i>
<p class="small my-3">
Drag and drop to attach file or choose from finder
</p>
<input type="file" ref="md_license" id="md_license" v-on:change="handleFileUpload(), submitFile()" style="display: none">
<b-button @click="$refs.md_license.click()" class="outline small">Open Finder</b-button>
</div>
<p class="small">Medical license <span class="red">*</span></p>
</div>
</div>
</div>
</form>
````
````
export default {
/*
Defines the data used by the component
*/
data(){
return {
identity: '',
md_school: '',
md_license: '',
md_association: '',
recommendation_1: '',
recommendation_2: '',
degree: '',
}
},
methods: {
/*
Submits the file to the server
*/
submitFile(){
/*
Initialize the form data
*/
let formData = new FormData();
/*
Add the form data we need to submit
*/
formData.append[
('recommendation_1', this.recommendation_1),
('md_school', this.md_school),
('identity', this.identity),
('md_license', this.md_license),
('md_association', this.md_association),
('recommendation_2', this.recommendation_2),
('degree', this.degree)
];
/*
Make the request to the POST /single-file URL
*/
Vue.axios.put('https://url/api/document_update',
formData,
{
headers: {
'Content-Type': 'multipart/form-data'
}
}
).then((res) =>
{
})
.catch(err =>
{
console.log(err)
})
},
/*
Handles a change on the file upload
*/
handleFileUpload(){
this.identity = this.$refs.identity.files[0];
this.md_school = this.$refs.md_school.files[0];
this.md_license = this.$refs.md_license.files[0];
this.md_association = this.$refs.md_association.files[0];
this.recommendation_1 = this.$refs.recommendation_1.files[0];
this.recommendation_2 = this.$refs.recommendation_2.files[0];
this.degree = this.$refs.degree.files[0];
}
}
Please or to participate in this conversation.