CODEWITHSUNDEEP
javascriptvue.jsaxios
volume one
volume one

Reputation: 7573

How to async/await multiple uploads before final form submit?

I am trying to allow users to upload multiple files. Each file selected will trigger an axios.post() request... so if a user selects three files then there will be three separate axios.post() requests made to the server to upload the files.

There are also other fields in the form such as Name and Description which will be submitted when the user clicks the form submit button. However, I want the form submission to wait until ALL the files are uploaded first.

Here is a shortened version of the code for brevity:

<form @submit.prevent="sendForm" enctype="multipart/form-data">
  <input multiple ref="PostFiles" name="PostFiles" type="file" @change="selectFile">
  ... // other fields here
  <button type="submit" name="Send" value="Send"></button>
</form>


methods: {


     selectFile() {
               const this.Form.UploadFiles = this.$refs.PostFiles.files; // all files selected by user to upload

               Array.from(this.Form.UploadFiles).forEach(file => {
               this.uploadFile(file) // each file gets sent to uploadFile() individually
               });
     },

     async uploadFile(File) {
                const FormFile = new FormData();
                FormFile.append("PostFile", File);

                await this.$axios.post('/api', FormFile).then(response => {
                    console.log("Successfully uploaded")
                }).catch(err => {
                    console.log(err.response.data.error)
                })
                return true;
      },

      async sendForm() {
            const FormBody = new FormData();
            FormBody.append("Name", this.Form.Name);
            FormBody.append("Description", this.Form.Description);
            // Here I need to wait for all files to upload first!
            await this.uploadFile();
            // If all files uploaded then post the form
            await this.$axios.post('/api', FormBody)
      }

Because uploadFile() returns true after each individual upload, the sendForm() will submit after the first file is uploaded. But I need to await until ALL files in this.Form.UploadFiles array are uploaded. How could I do that?

Upvotes: 0

Views: 1980

Answers (2)

Ashish Ranjan
Ashish Ranjan

Reputation: 12960

You can make selectFiles as async and use a for Loop instead of forEach()

async selectFile() {
    const this.Form.UploadFiles = this.$refs.PostFiles.files; // all files selected by user to upload

    for (const eachFile of Array.from(this.Form.UploadFiles)) {
        await this.uploadFile(eachFile); // each file gets sent to uploadFile() individually
    }
}



async sendForm() {
        const FormBody = new FormData();
        FormBody.append("Name", this.Form.Name);
        FormBody.append("Description", this.Form.Description);
        // Here I need to wait for all files to upload first!
        await this.selectFile();   //<--this is the change you need
        // If all files uploaded then post the form
        await this.$axios.post('/api', FormBody)
  }

Upvotes: 1

Ilijanovic
Ilijanovic

Reputation: 14904

Try it with this approach:

 async selectFile() {
           const this.Form.UploadFiles = this.$refs.PostFiles.files; // all files selected by user to upload

           let allFiles = Array.from(this.Form.UploadFiles);
           for(let i = 0; i < allFiles.length; i++){
              console.log("Uploaded File number: " + i + 1);
              await this.uploadFile(allFiles[i])
           }

 },

 uploadFile(File) {
            const FormFile = new FormData();
            FormFile.append("PostFile", File);
            return this.$axios.post('/api', FormFile);
  },

  async sendForm() {
        const FormBody = new FormData();
        FormBody.append("Name", this.Form.Name);
        FormBody.append("Description", this.Form.Description);
        // Here I need to wait for all files to upload first!
        this.selectFile();
        // If all files uploaded then post the form
        await this.$axios.post('/api', FormBody)
  }

Upvotes: 1

Related Questions