Image not passing to backend

[bjoct16]

I could't make it work, It is not passing appropriate data to backend.

this is how my payload looks like when i checked it via network section while submitting the image from front end

Content-Disposition: form-data; name="image"; filename="blob" Content-Type: image/jpeg

And following is the method i am using to upload file.

 const HTTP = axios.create({
    headers: {
      Authorization: 'Bearer <token>'
    }
  })

  this.myCroppa.generateBlob((blob) => { 
    var fd = new FormData()
    fd.append('image', blob)
    
    HTTP.post(`http://localhost:8000/upload`, fd)
    .then(function (res) {
      console.log(res.data)
    })
    .catch(function (err) {
      console.log(err.response.data)
    })
  }, 'image/jpeg', 0.8)

Note: My backend controller is working perfectly , Postman and other methods are working smoothly.

[zhanziyang]

What is the backend upload API like? Does it support multipart/form-data as content-type?

[bjoct16]

sorry for the late reply , i was away for weeks , well yes , multipart/form-data is working as usual. I am using yii2 as a backend server.

[juansaab]

Did anyone manage to solve this. I'm experiencing the same issue here. I tried tacking the base64 string and converting it manually to a file using the Javascript File constructor without results.

[davidramos-om]

try to do it with Formidable

  form.on('file', function(name, file) 
        {                
            util.PrintI("form.on('file'):") 
            util.PrintI(name) 
            util.PrintI(file)
         }

In my code: this.rowItem.selectedFile = the blob Use promises or async/await

This works for me: https://github.com/felixge/node-formidable

mutter also worked for me https://github.com/expressjs/multer

[paolodina]

Old issue but I think it's still relevant, this won't work:

 fd.append('image', blob)

Even without using Formidable, if you add a third argument it will/should work.

 fd.append('image', blob, 'same_name.png')

ref. https://github.com/zhanziyang/vue-croppa/issues/129