tomasosho's avatar

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];
      }
    }
0 likes
0 replies

Please or to participate in this conversation.