How to upload a file in registration form?

I have a registration form in which a user should also upload his image, I want to send this form with axios to my server

<form @submit.prevent="register">
                      <div class="from-group">
                          <label>role_id</label>
                          <input v-model="form.role_id" type="text" class="from-control">
                      </div>
                      <div class="from-group">
                          <label>firstname</label>
                          <input v-model="form.firstname" type="text" class="from-control">
                      </div>
                      <div class="from-group">
                          <label>lastname</label>
                          <input v-model="form.lastname" type="text" class="from-control">
                      </div>
                      <div class="from-group">
                          <label>email</label>
                          <input v-model="form.email" type="text" class="from-control">
                      </div>
                      <div class="from-group">
                          <label>password</label>
                          <input v-model="form.password" type="text" class="from-control">
                      </div>
                      <div class="from-group">
                          <label>phone</label>
                          <input v-model="form.phone" type="text" class="from-control">
                      </div>
                      <div class="from-group">
                          <label>skype</label>
                          <input v-model="form.skype" type="text" class="from-control">
                      </div>
                      <div class="from-group">
                          <label>birthdate</label>
                          <input v-model="form.birthdate" type="text" class="from-control">
                      </div>
                      <div class="from-group">
                          <label>address</label>
                          <input v-model="form.address" type="text" class="from-control">
                      </div>
                      <div class="from-group">
                          <label>postalcode</label>
                          <input v-model="form.postalcode" type="text" class="from-control">
                      </div>
                      <div class="from-group">
                          <label>city</label>
                          <input v-model="form.city" type="text" class="from-control">
                      </div>
                      <div class="from-group">
                          <label>country</label>
                          <input v-model="form.country" type="text" class="from-control">
                      </div>
                      <div class="from-group">
                          <label>status</label>
                          <input v-model="form.status" type="text" class="from-control">
                      </div>
                      <div class="from-group">
                          <label>image</label>
                          <input type="file" @change="onFileSelected" > 
                       </div>
                       <div class="form-group">
                          <input type="submit" value="Register" class="btn btn-default w-100" >
                      </div>
         </form>


<script>
export default {
    data() {
        return {
            form: {
                role_id: '',
                firstname: '',
                lastname: '',
                email: '',
                password: '',
                phone: '',
                skype: '',
                birthdate: '',
                address: '',
                postalcode: '',
                city: '',
                country: '',
                status: '',
                image: '',
                description: '',
                geo_lat: '',
                geo_lng: '',

            }
        }
    },
    methods: {
  
      async register() {
         
           await this.$axios.post('/register', this.form);
           
           
        }
    }

}
</script>

however when I send the register request the image field shows always empty

Robstar

4 years ago

Best Answer

Level 50

With Axios I believe you need to manually set the content type header and pass up form data.

To set the content type header:

axiospost(`/api/contact`, form, {
   headers: {
     'Content-Type': 'multipart/form-data'
   }
})

To set the data (i.e. the formvaribale from the above snippet)

let form = new FormData()

// all your flat form fields, could use Object.keys(data).forEach here to clean this up 
form.append('role_id', data.role_id)
form.append('firstname', data.firstname)
// etc.

// "form" is what you send to your Axios request

EDIT: to use your example with Vue:

async register() {
   let form = new FormData()
   Object.keys(this.form).forEach(k => form.append(k, data[k]))

   await this.$axios.post('/register', form, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
   })
}

1 like

sirch

4 years ago

Level 27

Where is the method onFileSelected which you call on the change event of the file input.

In that method try to set image by

 this.form.image = this.$refs.file.files[0];

also add the refs attribute to the input

<input type="file" ref="file" @change="onFileSelected" >

You can then append this to the FormData object and pass that through your request

1 like

Please or to participate in this conversation.