laravel vuejs/axios put request Formdata is empty

Laravel can not handle multipart-formdata well with PUT method. See Input from PUT requests sent as multipart/form-data is unavailable #13457.

If your code actually uses the PUT method, it seems to be affected by this problem.

There are several workarounds.

Dealing with the client side:

• Instead of PUT method, use POST method with _method parameter value set to PUT (called 'method spoofing')

Dealing with the server side:

• Add a package that performs multipart processing to Laravel. (ex. illuminatech/multipart-middleware)
• Use pecl/apfd extension which provides ability to parse 'multipart/form-data' HTTP requests for any request method.

Well, I had an issue trying to update records using axios & vue.js.

The solution is to set the method value on the formData to putand send the request using the post method. Something like this:

console.log("i am in edit");
    // multiple file uploading
    this.lead = document.getElementById("leadform");
    let formData = new FormData(this.lead);
    if (this.attachments.length > 0) {
      for (var i = 0; i < this.attachments.length; i++) {
        let attachment = this.attachments[i];
        formData.append("attachments[]", attachment);
      }
    }
    formData.append("_method", "put");
    console.log(formData);

I have changed the axioscall into post and set the value _method:put

addLeads() {
      if (this.edit === false) {
        // add new leads
        this.errors = null;
        const constraints = this.getConstraints();
        const errors = validate(this.$data.form, constraints);
        if (errors) {
          this.errors = errors;
          return;
        }
        // multiple file uploading
        this.lead = document.getElementById("leadform");
        const formData = new FormData(this.lead);
        if (this.attachments.length > 0) {
          for (var i = 0; i < this.attachments.length; i++) {
            let attachment = this.attachments[i];
            formData.append("attachments[]", attachment);
          }
        }
        var config = {
          headers: { "Content-Type": "multipart/form-data" },
          onUploadProgress: function(progressEvent) {
            this.percentCompleted = Math.round(
              (progressEvent.loaded * 100) / progressEvent.total
            );
            this.$forceUpdate();
          }.bind(this)
        };
        //end
        this.$store.dispatch("lead");
        formData.append("_method", "post");
        addLeadsAPI(formData, "post", config).then(res => {
          swal("Good job!", "You clicked the button!", "success");
          this.clearForm();
          this.fetchLeads();
          //this.attachments = [];
        });
      } else {
        this.errors = null;

        const constraints = this.getConstraints();
        const errors = validate(this.$data.form, constraints);
        if (errors) {
          this.errors = errors;
          return;
        }
        console.log("i am in edit");
        // multiple file uploading
        this.lead = document.getElementById("leadform");
        let formData = new FormData(this.lead);
        if (this.attachments.length > 0) {
          for (var i = 0; i < this.attachments.length; i++) {
            let attachment = this.attachments[i];
            formData.append("attachments[]", attachment);
          }
        }
        formData.append("_method", "put");
        formData.append("id", this.form.id);
        console.log(formData);
        var config = {
          headers: { "Content-Type": "application/x-www-form-urlencoded" },
          onUploadProgress: function(progressEvent) {
            this.percentCompleted = Math.round(
              (progressEvent.loaded * 100) / progressEvent.total
            );
            this.$forceUpdate();
          }.bind(this)
        };
        //end
        console.log(formData);
        this.$store.dispatch("lead");
        //update
        addLeadsAPI(formData, "put", config).then(res => {
          swal("Good job!", "You clicked the button!", "success");
          this.clearForm();
          this.fetchLeads();
          //this.attachments = [];
        });
      }
    },