QUploader formData append Problem

  • Hi. I am using quploader in a form and I want files to upload while form is submitting. I use append method to formData object but it doesn’t work… It sends empty input to laravel backend. My codes are as below;

              label="CAD Dosyası"
              style="width: 100%;">

    selected file method :

    selectedFiles (files) {
            if (files.length !== 0) {
              this.cad_files = files

    while submitting the form I append all inputs into formData object …

    submitForm () {
            let formData = new FormData()
            formData.append('image_file', this.formData.image_file)
            formData.append('name', this.formData.name)
            formData.append('project_no', this.formData.project_no)
            formData.append('customer_id', this.formData.customer_id)
            if (this.formData.start_date !== null) {
              formData.append('start_date', this.formData.start_date)
            if (this.formData.projected_finish_date !== null) {
              formData.append('projected_finish_date', this.formData.projected_finish_date)
            formData.append('description', this.formData.description)
            if (this.cad_files != null && this.cad_files.length > 0) {
              this.cad_files.forEach(function (file) {
                if (!file.id) {
                  console.log(file) // I can see file object in consol but it is not appended
                  formData.append('cadFiles[]', file)
            const params = {
              url : this.selectedItem ? '/projects/' + this.selectedItem.id : '/projects',
              data : formData
            if (this.selectedItem) {
              formData.append('_method', 'PUT')
              const updateIndex = this.$store.state.pageContent.indexOf(this.selectedItem)
              this.$store.dispatch("EditData", {params : params, index : updateIndex})
            } else {
              this.$store.dispatch("AddData", params)

    when I append like

    formData.append('cadFiles[]', file.name)

    this way. I can take file names from backend but file object doesn’t transfer. Can anyone help?

  • just check node formdata you will find the issues. I was facing similar issues If I have files selected then which is optional in my form I used formData othewise a object.
    Still you send pic of of devtool request header othewise no body will understand what is going on. Make sure it should show cadFiles : Binary

Log in to reply