Validating using vform in Vue Js

Question

am using Vue Js and Laravel in my application. My code has products and images. I am able to upload images using axios but when I add vform to validate all my images , no image is passed to the controller. When I interchange axios.post('/senddata', formData, config) to this.form.post('/senddata', formData, config) the other data is passed but images are null. Here is my code;

             saveImageData(){
              var self=this;
              const config = {
                    headers: { 'content-type': 'multipart/form-data' }
                }
                document.getElementById('upload-file').value=[];
                let formData = new FormData();
                formData.append('title', this.form.title);
                formData.append('description', this.form.description);
                formData.append('location', this.form.location);
                formData.append('price', this.form.price);
                 for(let i=0;i<this.form.images.length;i++){
                formData.append('images[]', this.form.images[i]);
                 }
 
              axios.post('/senddata', formData, config)
                .then(function (response) {
                })
                .catch(function (error) {
                });

Pejman Zeynalkheyri · Accepted Answer · 2021-02-10 11:14:40Z

0

Look at this documentation for vform examples in GitHub that guides you to upload images with other input fields:

https://github.com/cretueusebiu/vform/blob/master/example/upload.html

I think this example method solve your problem:

    selectFile (e) {
          const file = e.target.files[0]

          // Do some client side validation...

          this.form.file = file

          this.form.submit('post', '/upload', {
              // Transform form data to FormData
              transformRequest: [function (data, headers) {
                return objectToFormData(data)
              }],

              onUploadProgress: e => {
                // Do whatever you want with the progress event
                // console.log(e)
              }
            })
            .then(({ data }) => {
              // ...
            })
        }

answered Feb 10, 2021 at 11:14

Pejman Zeynalkheyri

4,93810 gold badges35 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Hotdot Cyber Over a year ago

Thanks Pejman, I had seen that but not sure how to place the data inside this.form.submit('post'....

Collectives™ on Stack Overflow

Validating using vform in Vue Js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related