title: laravel vuejs/axios put request Formdata is empty
body: <p>I have a few application, when I am sending formdata using axios post data is successfully sent to API. but when i am using put request its not working with formData.</p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="container"&gt;
      &lt;div class="container-fluid" style="background:#fff"&gt;
        &lt;div class="page-header"&gt;
          &lt;h4 class="page-title"&gt;
            &lt;i class="flaticon-users"&gt;&lt;/i&gt; Leads
          &lt;/h4&gt;
          &lt;ul class="breadcrumbs"&gt;
            &lt;li class="nav-home"&gt;
              &lt;a href="/"&gt;
                &lt;i class="flaticon-home"&gt;&lt;/i&gt;
              &lt;/a&gt;
            &lt;/li&gt;
            &lt;li class="separator"&gt;
              &lt;i class="flaticon-right-arrow"&gt;&lt;/i&gt;
            &lt;/li&gt;
            &lt;li class="nav-item"&gt;
              &lt;router-link to="/leads"&gt;Leads&lt;/router-link&gt;
            &lt;/li&gt;
            &lt;li class="separator"&gt;
              &lt;i class="flaticon-right-arrow"&gt;&lt;/i&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;template&gt;
          &lt;div class="btn-wrapper"&gt;
            &lt;button v-on:click="seen = !seen" class="btn btn-primary btn-md"&gt;
              &lt;i class="flaticon-interface-1"&gt;&lt;/i&gt;Add New Lead
            &lt;/button&gt;
          &lt;/div&gt;
          &lt;p&gt;&lt;/p&gt;
        &lt;/template&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-md-12" v-if="!seen"&gt;
            &lt;div class="card"&gt;
              &lt;div class="card-header"&gt;
                &lt;h4 class="card-title"&gt;
                  &lt;i class="flaticon-interface-1"&gt;&lt;/i&gt; New Leads
                &lt;/h4&gt;
              &lt;/div&gt;
              &lt;div class="card-body"&gt;
                &lt;form
                  @submit.prevent="addLeads"
                  id="leadform"
                  class="mb-3"
                  enctype="multipart/form-data"
                &gt;
                  &lt;div class="col-md-12"&gt;
                    &lt;div class="row"&gt;
                      &lt;div class="col-md-6"&gt;
                        &lt;label&gt;Lead&lt;/label&gt;
                        &lt;div class="form-group"&gt;
                          &lt;input
                            type="text"
                            id="name"
                            name="lead_name"
                            class="form-control"
                            placeholder="Lead Name"
                            v-model="form.name"
                          &gt;
                          &lt;template v-if="errors"&gt;
                            &lt;span v-for="(fieldsError, fieldName) in errors" :key="fieldName"&gt;
                              &lt;template v-if="fieldName == 'name'"&gt;
                                &lt;p class="errors"&gt;
                                  &lt;strong&gt;{{ fieldsError.join('\n') }}&lt;/strong&gt;
                                &lt;/p&gt;
                              &lt;/template&gt;
                            &lt;/span&gt;
                          &lt;/template&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;div class="col-md-6"&gt;
                        &lt;label&gt;Source&lt;/label&gt;
                        &lt;div class="form-group"&gt;
                          &lt;textarea
                            type="text"
                            id="source"
                            name="source"
                            class="form-control"
                            placeholder="lead Souve"
                            v-model="form.source"
                          &gt;&lt;/textarea&gt;
  
                          &lt;template v-if="errors"&gt;
                            &lt;span v-for="(fieldsError, fieldName) in errors" :key="fieldName"&gt;
                              &lt;template v-if="fieldName == 'source'"&gt;
                                &lt;p class="errors"&gt;
                                  &lt;strong&gt;{{ fieldsError.join('\n') }}&lt;/strong&gt;
                                &lt;/p&gt;
                              &lt;/template&gt;
                            &lt;/span&gt;
                          &lt;/template&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="row"&gt;
                      &lt;div class="col-md-6"&gt;
                        &lt;label&gt;Value&lt;/label&gt;
                        &lt;div class="form-group"&gt;
                          &lt;input
                            type="text"
                            id="value"
                            name="value"
                            class="form-control"
                            placeholder="lead Value"
                            v-model="form.value"
                          &gt;
  
                          &lt;template v-if="errors"&gt;
                            &lt;span v-for="(fieldsError, fieldName) in errors" :key="fieldName"&gt;
                              &lt;template v-if="fieldName == 'value'"&gt;
                                &lt;p class="errors"&gt;
                                  &lt;strong&gt;{{ fieldsError.join('\n') }}&lt;/strong&gt;
                                &lt;/p&gt;
                              &lt;/template&gt;
                            &lt;/span&gt;
                          &lt;/template&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="col-md-6"&gt;
                        &lt;label&gt;Notes&lt;/label&gt;
                        &lt;div class="form-group"&gt;
                          &lt;textarea
                            type="text"
                            id="notes"
                            name="notes"
                            class="form-control"
                            placeholder="lead Notes"
                            v-model="form.notes"
                          &gt;&lt;/textarea&gt;
  
                          &lt;template v-if="errors"&gt;
                            &lt;span v-for="(fieldsError, fieldName) in errors" :key="fieldName"&gt;
                              &lt;template v-if="fieldName == 'notes'"&gt;
                                &lt;p class="errors"&gt;
                                  &lt;strong&gt;{{ fieldsError.join('\n') }}&lt;/strong&gt;
                                &lt;/p&gt;
                              &lt;/template&gt;
                            &lt;/span&gt;
                          &lt;/template&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="row"&gt;
                      &lt;div class="col-sm-6"&gt;
                        &lt;div class="form-group"&gt;
                          &lt;label for="exampleFormControlSelect1"&gt;Assigned To&lt;/label&gt;
                          &lt;template v-if="!userlist"&gt;
                            &lt;select class="form-control" id="assigned_to"&gt;
                              &lt;option value&gt;No User Found&lt;/option&gt;
                            &lt;/select&gt;
                          &lt;/template&gt;
                          &lt;template v-else&gt;
                            &lt;select
                              v-model="form.assigned_to"
                              name="assigned_to"
                              class="form-control"
                              id="assigned_to"
                            &gt;
                              &lt;option value&gt;Please Select&lt;/option&gt;
                              &lt;option v-for="user in userlist" :key="user.id" :value="user.id"&gt;
                                &lt;template v-if="user.id == currentUser.id"&gt;Me&lt;/template&gt;
                                &lt;template v-else&gt;{{ user.name }}&lt;/template&gt;
                              &lt;/option&gt;
                            &lt;/select&gt;
                          &lt;/template&gt;
                          &lt;template v-if="errors"&gt;
                            &lt;span v-for="(fieldsError, fieldName) in errors" :key="fieldName"&gt;
                              &lt;template v-if="fieldName == 'assigned_to'"&gt;
                                &lt;p class="errors"&gt;
                                  &lt;strong&gt;{{ fieldsError.join('\n') }}&lt;/strong&gt;
                                &lt;/p&gt;
                              &lt;/template&gt;
                            &lt;/span&gt;
                          &lt;/template&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="col-sm-6"&gt;
                        &lt;div class="form-group"&gt;
                          &lt;label&gt;Close Date&lt;/label&gt;
                          &lt;div class="clearfix"&gt;&lt;/div&gt;
                          &lt;date-picker v-model="form.date" name="close_date"&gt;&lt;/date-picker&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="row"&gt;
                      &lt;div class="col-md-6"&gt;
                        &lt;label&gt;Email&lt;/label&gt;
                        &lt;div class="form-group"&gt;
                          &lt;input
                            type="text"
                            id="email"
                            name="email"
                            class="form-control"
                            placeholder="User Email"
                            v-model="form.email"
                          &gt;
  
                          &lt;template v-if="errors"&gt;
                            &lt;span v-for="(fieldsError, fieldName) in errors" :key="fieldName"&gt;
                              &lt;template v-if="fieldName == 'email'"&gt;
                                &lt;p class="errors"&gt;
                                  &lt;strong&gt;{{ fieldsError.join('\n') }}&lt;/strong&gt;
                                &lt;/p&gt;
                              &lt;/template&gt;
                            &lt;/span&gt;
                          &lt;/template&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="col-md-6"&gt;
                        &lt;label&gt;Phone&lt;/label&gt;
                        &lt;div class="form-group"&gt;
                          &lt;input
                            type="text"
                            id="phone"
                            name="phone"
                            class="form-control"
                            placeholder="User Phone Number"
                            v-model="form.phone"
                          &gt;
  
                          &lt;template v-if="errors"&gt;
                            &lt;span v-for="(fieldsError, fieldName) in errors" :key="fieldName"&gt;
                              &lt;template v-if="fieldName == 'phone'"&gt;
                                &lt;p class="errors"&gt;
                                  &lt;strong&gt;{{ fieldsError.join('\n') }}&lt;/strong&gt;
                                &lt;/p&gt;
                              &lt;/template&gt;
                            &lt;/span&gt;
                          &lt;/template&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="row"&gt;
                    &lt;div class="col-md-6"&gt;
                      &lt;div class="form-group"&gt;
                        &lt;input
                          type="file"
                          multiple="multiple"
                          id="attachments"
                          @change="uploadFieldChange"
                        &gt;
                        &lt;hr&gt;
                        &lt;div class="col-md-12"&gt;
                          &lt;div
                            class="attachment-holder animated fadeIn"
                            v-cloak
                            v-for="(attachment, index) in attachments"
                          &gt;
                            &lt;template v-if="attachment.file_name"&gt;
                              &lt;span class="label label-primary"&gt;{{ attachment.file_name}}&lt;/span&gt;
                            &lt;/template&gt;
                            &lt;template v-else&gt;
                              &lt;span
                                class="label label-primary"
                              &gt;{{ attachment.name + ' (' + Number((attachment.size / 1024 / 1024).toFixed(1)) + 'MB)'}}&lt;/span&gt;
                            &lt;/template&gt;
                            &lt;span
                              class
                              style="background: red; cursor: pointer;"
                              @click="removeAttachment(attachment)"
                            &gt;
                              &lt;button class="btn btn-xs btn-danger"&gt;Remove&lt;/button&gt;
                            &lt;/span&gt;
                          &lt;/div&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="row"&gt;
                    &lt;div class="col-sm-6"&gt;
                      &lt;div class="form-check"&gt;
                        &lt;label&gt;Status&lt;/label&gt;
                        &lt;br&gt;
                        &lt;label class="form-radio-label"&gt;
                          &lt;input
                            class="form-radio-input"
                            v-model="form.status"
                            type="radio"
                            name="status"
                            value="open"
                            checked
                          &gt;
                          &lt;span class="form-radio-sign"&gt;Open&lt;/span&gt;
                        &lt;/label&gt;
                        &lt;label class="form-radio-label ml-3"&gt;
                          &lt;input
                            class="form-radio-input"
                            v-model="form.status"
                            type="radio"
                            name="status"
                            value="sent"
                          &gt;
                          &lt;span class="form-radio-sign"&gt;Proposal Sent&lt;/span&gt;
                        &lt;/label&gt;
                        &lt;label class="form-radio-label ml-3"&gt;
                          &lt;input
                            class="form-radio-input"
                            v-model="form.status"
                            type="radio"
                            name="status"
                            value="won"
                          &gt;
                          &lt;span class="form-radio-sign"&gt;Won&lt;/span&gt;
                        &lt;/label&gt;
                        &lt;label class="form-radio-label ml-3"&gt;
                          &lt;input
                            class="form-radio-input"
                            v-model="form.status"
                            type="radio"
                            name="status"
                            value="lost"
                          &gt;
                          &lt;span class="form-radio-sign"&gt;lost&lt;/span&gt;
                        &lt;/label&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-md-6"&gt;
                    &lt;div class="form-group"&gt;
                      &lt;button type="submit" class="btn btn-success"&gt;Save&lt;/button&gt;
                      &lt;button @click="clearForm()" class="btn btn-danger"&gt;Cancel&lt;/button&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/form&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="container-fluid" style="background:#fff;"&gt;
        &lt;kanban-board :stages="stages" :blocks="blocks" @update-block="updateBlock"&gt;
          &lt;div v-for="stage in stages" :slot="stage"&gt;
            &lt;h2&gt;{{ stage }}&lt;/h2&gt;
          &lt;/div&gt;
          &lt;div v-for="block in blocks" :slot="block.id"&gt;
            &lt;div&gt;
              &lt;strong&gt;{{ block.name }}&lt;/strong&gt;
            &lt;/div&gt;
            &lt;p&gt;&lt;/p&gt;
            &lt;button class="btn btn-danger"&gt;UKDH&lt;/button&gt;
            &lt;button class="btn btn-warning"&gt;£ {{ block.value }}&lt;/button&gt;
            &lt;router-link :to="`/account/${block.id}/convert`" class="btn btn-primary"&gt;create account&lt;/router-link&gt;
            &lt;div class="text-right"&gt;
              &lt;router-link :to="`/leads/${block.id}`" class="btn btn-link btn-info"&gt;
                &lt;i class="la la-street-view"&gt;&lt;/i&gt;
              &lt;/router-link&gt;
  
              &lt;a href="#" @click="deleteLead(block.id)" class="btn btn-link btn-danger"&gt;
                &lt;i class="la la-times"&gt;&lt;/i&gt;
              &lt;/a&gt;
              &lt;a href="#" @click="editLead(block)" class="btn btn-link btn-primary"&gt;
                &lt;i class="la la-edit"&gt;&lt;/i&gt;
              &lt;/a&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/kanban-board&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  &lt;script&gt;
  import { addLeadsAPI } from "../../helpers/api";
  import { updateStatus } from "../../helpers/api";
  import { getCommonAPI } from "../../helpers/api";
  import { deleteAPI } from "../../helpers/api";
  import validate from "validate.js";
  import DatePicker from "vue2-datepicker";
  
  export default {
    name: "leads",
    components: {
      DatePicker
    },
    data() {
      return {
        leads: [],
        userlist: [],
        attachments: [],
        percentCompleted: 0,
        upload_size: 0,
        result: {},
        stages: ["open", "sent", "lost", "won"],
        blocks: [],
        form: {
          id: "",
          name: "",
          source: "",
          value: 0,
          notes: "",
          user_id: "",
          assigned_to: 1,
          date: new Date(),
          email: "",
          phone: "",
          status: ""
        },
        lead_id: "",
        pagination: {},
        edit: false,
        isOpen: 0,
        seen: true,
        errors: null
      };
    },
    created() {
      this.fetchLeads();
      this.getusers();
    },
    mounted() {
      this.$store.dispatch("leads");
    },
    methods: {
      getusers(page_url) {
        let vm = this;
        getCommonAPI("/users", "get", {
          headers: {
            Authorization: `Bearer ${this.currentUser.token}`,
            Accept: "application/json"
          }
        }).then(res =&gt; {
          vm.userlist = res.data;
        });
      },
  
      fetchLeads(page_url) {
        let vm = this;
        page_url = page_url || "/leads/lead";
        getCommonAPI(page_url, "get", {
          headers: {
            Authorization: `Bearer ${this.currentUser.token}`,
            Accept: "application/json"
          }
        }).then(res =&gt; {
          vm.blocks = res.data.data;
          //vm.makePagination(res.meta, res.links);
        });
      },
      makePagination(meta, links) {
        let pagination = {
          current_page: meta.current_page,
          last_page: meta.last_page,
          next_page_url: links.next,
          prev_page_url: links.prev
        };
        this.pagination = pagination;
      },
      editLead(form) {
        console.log(form);
        this.edit = true;
        this.seen = false;
        this.form.id = form.id;
        this.form.name = form.name;
        this.form.lead_sid = form.lead_sid;
        this.form.status = form.status;
        this.form.type = form.type;
        this.form.source = form.source;
        this.form.value = form.value;
        this.form.notes = form.notes;
        this.form.email = form.email;
        this.form.phone = form.phone;
        this.form.assigned_to = form.assigned_to;
        this.form.date = form.close_date;
        this.attachments = form.uploads;
      },
      clearForm() {
        this.edit = false;
        this.form.id = null;
        this.form.user_id = null;
        this.form.assigned_to = "";
        this.form.type = "";
        this.form.status = true;
        this.form.name = "";
        this.form.source = "";
        this.form.value = "";
        this.form.notes = "";
        this.form.email = "";
        this.form.phone = "";
        this.attachments = [];
      },
      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 &gt; 0) {
            for (var i = 0; i &lt; 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");
  
          addLeadsAPI(formData, "post").then(res =&gt; {
            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 &gt; 0) {
            for (var i = 0; i &lt; this.attachments.length; i++) {
              let attachment = this.attachments[i];
              formData.append("attachments[]", attachment);
            }
          }
          console.log(formData);
          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
          console.log(formData);
          this.$store.dispatch("lead");
          //update
          addLeadsAPI(formData, "put").then(res =&gt; {
            swal("Good job!", "You clicked the button!", "success");
            this.clearForm();
            this.fetchLeads();
            //this.attachments = [];
          });
        }
      },
      getConstraints() {
        return {
          name: {
            presence: true,
            length: {
              minimum: 6,
              message: "Must be at least 6 characters long"
            }
          },
          source: {
            presence: true,
            length: {
              minimum: 6,
              message: "Must be at least 6 characters long"
            }
          },
          value: {
            presence: true,
            length: {
              minimum: 1,
              message: "Must be at least 1 characters long"
            }
          },
          notes: {
            presence: true,
            length: {
              minimum: 6,
              message: "Must be at least 6 characters long"
            }
          }
        };
      },
      updateBlock(id, status) {
        //api call axios
        updateStatus(id, status, "get").then(res =&gt; {
          this.clearForm();
          this.fetchLeads();
        });
        this.blocks.find(b =&gt; b.id === Number(id)).status = status;
      },
      deleteLead(id) {
        swal({
          title: "Are you sure?",
          text: "Do you really want to delete Lead!",
          type: "warning",
          buttons: {
            confirm: {
              text: "Yes, delete it!",
              className: "btn btn-success"
            },
            cancel: {
              visible: true,
              className: "btn btn-danger"
            }
          }
        }).then(Delete =&gt; {
          if (Delete) {
            deleteAPI(`/lead/${id}`, "delete", {
              headers: {
                Authorization: `Bearer ${this.currentUser.token}`,
                Accept: "application/json"
              }
            }).then(res =&gt; {
              swal({
                title: "Deleted!",
                text: "Your lead has been deleted.",
                type: "success",
                buttons: {
                  confirm: {
                    className: "btn btn-success"
                  }
                }
              });
              this.fetchLeads();
            });
          } else {
            this.fetchLeads();
            swal.close();
          }
        });
      },
      getAttachmentSize() {
        this.upload_size = 0; // Reset to beginningƒ
        this.attachments.map(item =&gt; {
          this.upload_size += parseInt(item.size);
        });
  
        this.upload_size = Number(this.upload_size.toFixed(1));
        this.$forceUpdate();
      },
  
      removeAttachment(attachment) {
        this.attachments.splice(this.attachments.indexOf(attachment), 1);
  
        this.getAttachmentSize();
      },
      // This function will be called every time you add a file
      uploadFieldChange(e) {
        console.log(this.attachments);
        var files = e.target.files || e.dataTransfer.files;
        if (!files.length) return;
        for (var i = files.length - 1; i &gt;= 0; i--) {
          this.attachments.push(files[i]);
        }
        console.log("out");
        // Reset the form to avoid copying these files multiple times into this.attachments
        document.getElementById("attachments").value = [];
      }
    },
    computed: {
      users() {
        return this.$store.getters.users;
      },
  
      currentUser() {
        return this.$store.getters.currentUser;
      }
    }
  };
  &lt;/script&gt;
  &lt;style lang="scss"&gt;
  @import "../assets/board.scss";
  &lt;/style&gt;
  &lt;style scoped&gt;
  .vue-js-switch#changed-font {
    font-size: 30px;
  }
  .hide {
    display: none;
  }
  .errors {
    color: lightcoral;
    border-radius: 5px;
    padding: 21px 0 2px 0;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>when <code>edit</code> option true. I am calling method <code>addLeadsAPI</code> for posting data with <code>axios put</code> but Formdata is empty <code>$request-&gt;all()</code>.</p>
  
  <p>Anyone can help me with this?seems <code>axios put</code> is not working for editing data. through formdata. </p>