Laravel show required error message when submitting the form with image and data both

Question

About

I am submitting the image with plain text using vue.js and Laravel 5.8.

Error Details

When I submit the data using axios, it gives validation error message that product name is required. I am submitting both name and image. Everything works when I disable the code to submit image.

Request Header - Please click the image to view more details clearly

Payload - Please click the image to view more details clearly

Html

<template>
    <div>
        <input name="Product Name" type="text" v-model="saveForm.product_name">
        <input type="file" accept="image/*" name="product_image" />
        <button type="button" @click="store()">Save</button>        
    </div>
</template>

Script

<script>
    export default {
        data() {
            return {
                saveForm: {
                    product_name: '', product_image: null
                }
            };
        },
        methods: {            
            store() {
                var config = { 
                    headers : {
                        'Content-Type': 'multipart/form-data', 'processData': false
                    }
                };
                var fileData = new FormData();
                fileData.append("product_image", this.saveForm.product_image);
                fileData.append("product_name", this.saveForm.product_name);
                axios.post("my route", this.saveForm, config).then(response => {
                    if(response.data.Status) {}
                })
                .catch(error => { //console.log(error);
                });
            }
        }
    }
</script>

Laravel Controller Action Method

public function Create(CreateProductRequest $request) {
    //Code here
}

Laravel Request class

class CreateProductRequest extends Request
{
    public function wantsJson() {
        return true;
    }

    public function rules() {
        return [
            'product_name'  => 'required',
            'product_image' => "image|mimes:bmp,png,jpg,gif,jpeg"
        ];
    }
}

Answer 1

Ok, let's review your code step by step.

1) You need add "boundary" to header. It's small important, but needed for the server.

headers: {
  "Content-type":
    "multipart/form-data; charset=utf-8; boundary=" +
    Math.random()
      .toString()
      .substr(2),
  processData: false,
  Accept: "application/json"
}

2) Why do you prepare data through "new FormData()", but sending with "this.saveForm"? Correct code:

axios.post("my route", fileData, config)
  .then(response => {
    if (response.data.Status) {}
  })
  .catch(error => { //console.log(error);
  });

3) When you do everything as I said above, you will get an error with the image, because you didn't pass it. I added functionality to send images.

summary:

Html

<div>
  <input
    name="Product Name"
    type="text"
    v-model="saveForm.product_name"
  >
  <input
    type="file"
    accept="image/*"
    name="product_image"
    @change="uploadImage"
  />
  <button
    type="button"
    @click="store()"
  >Save</button>
</div>

Script

export default {
  data() {
    return {
      saveForm: {
        product_name: "",
        product_image: null
      }
    };
  },
  methods: {
    store() {
      var config = {
        headers: {
          "Content-type":
            "multipart/form-data; charset=utf-8; boundary=" +
            Math.random()
              .toString()
              .substr(2),
          processData: false,
          Accept: "application/json"
        }
      };
      var fileData = new FormData();
      fileData.append("product_image", this.saveForm.product_image);
      fileData.append("product_name", this.saveForm.product_name);
      axios
        .post("my route", fileData, config)
        .then(response => {
          if (response.data.Status) {
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    uploadImage(e) {
      this.saveForm.product_image = e.target.files[0];
    }
  }
};