CODEWITHSUNDEEP
javascriptvue.jsgoaxiosgomail
ArrowHeadDev
ArrowHeadDev

Reputation: 31

How to send mail with multiple file attachements

I have a ContactForm on my Vue.js app that is used to send emails to my Go backend, everything seems to be working fine except the file uploading.

This is the function that pushes the files to the form.

onFileChanged (e) {
  this.files = new FormData()
  for (let i in e.target.files) {
    if (e.target.files[i].type) {
      let file = e.target.files[i]
      this.form.files.push(file)
    }
  }
},

And this is the function that sends the data to my Backend

async sendMail () {
          try {
            await axios.post(process.env.API_URL + '/api/email',this.form, this.to)
            this.$awn.success(this.$t('message_sent'))
            this.error = false
            this.processed = false
            this.response = true
          } catch (e) {
            this.$awn.alert(e.response.data.message)
            this.error = true
            this.processed = false
          }
},

If I send the form without file attachments everything works fine.

When i attach one or multiple files and console.log the form, the files are present in the form data as an array but the files array in the request is empty.

Console logs of the form i'm sending to the API with axios.

enter image description here

Request payload :

{"busy":false,"successful":false,"errors":{"errors":{}},"originalData":{"subject":null,"to":null,"email":null,"message":null,"files":[],"allowedmedia":"gif,png,jpg,jpeg,ogg,mp3,flac,avi,mpg,mpeg,mkv,webm,pdf,txt,odt,ott,ods,ots,odp,otp,odg,otg","human":"test"},"subject":"test","to":"[email protected]","email":"[email protected]","message":"test","files":[{},{}],"allowedmedia":"gif,png,jpg,jpeg,ogg,mp3,flac,avi,mpg,mpeg,mkv,webm,pdf,txt,odt,ott,ods,ots,odp,otp,odg,otg","human":""}

As you can see the files array in the request contains two empty objects [{},{}].

I don't understand what i did wrong here so any help will be greatly appreciated , thank you. If you need to see the GO code of the backend just let me know but i'm pretty sure i did something wrong on the frontend.

Upvotes: 0

Views: 509

Answers (1)

CimChd
CimChd

Reputation: 241

You add content to FormData with the append method.

So your code should be something like this:

onFileChanged (e) {
  this.form = new FormData(); // maybe it's better to initialize your form outside of this function
  for (const file of e.target.files) {
    if (file.type) {
      this.form.append('files[]', file)
    }
  }
},

See also this answer.

Upvotes: 0

Related Questions