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;

    <q-uploader
              :accept="acceptedFiles"
              ref="fileUploader"
              label="CAD Dosyası"
              hide-upload-btn
              @added="selectedFiles"
              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)
            }
            this.$emit('formSubmit')
    
          },
    

    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