0

I have a canvas which I'm converting to a blob using

canvas.toBlob()

I have then made an endpoint on my node js server that expects an image in the form data using express-fileupload

So here I am trying to attach the blob to the body of my axios call like this

return await Axios({
    method: 'post',
    url: `${api}/contract/sign`,
    timeout: 30000,
    data: {
      name: name,
      signature: blob
    }
  })

It's sending it as an empty object,

I have tried 

new File([ blob ], 'signature.png' )

But that doesn't work either. I have also tried changing the content type in the header but I have other params to send so I cannot do that

Here is my postman code which works for me but I cant replicate it in code

curl --location --request POST 'endpoint' \ --header 'Authorization: Bearer token' \ --form 'signature=@/myImage.png' \ --form 'name=myName'

Will
  • 348
  • 1
  • 2
  • 12
  • I think the issue has less to do with blobs and more to do with sending multipart form data. If you use the File object you created as the file appended to the FormData object described in this question, does it work for you? https://stackoverflow.com/questions/41878838/how-do-i-set-multipart-in-axios-with-react – rfestag Jun 02 '20 at 19:02
  • If I add that header, the other params fail before it even checks for the image. Ive added the curl that works which im trying to replicate in code – Will Jun 02 '20 at 19:07
  • Gotcha. Normally when you upload files, you will use multipart form encoded data, but your endpoint apparently expects the file contents as a string. You likely need to turn the signature into a string version of the contents. Have you tried using `var signature = await blob.text();` to get the string value of the file? – rfestag Jun 02 '20 at 19:17
  • I just tried that and no luck, its still getting sent as an empty object – Will Jun 02 '20 at 19:29
  • I'm a little confused then...where are you gettting the blob from, and are you sure it is valid? I'm assuming it it would have come from myImage.png via some file element in your form, but in that case why is it a blob and not a file you can just read? – rfestag Jun 02 '20 at 19:40
  • @rfestag its coming from a html5 canvas. Im converting the drawing to blob using canvas.toBlob(), it doesnt have to be a blob but that was the way i thought to do it – Will Jun 02 '20 at 19:41
  • So, looking more closely at `canvas.toBlob`, it is unclear what you are using to get the actual blob. If you are calling it and expecting the result of `toBlob` to contain the blob, that's incorrect. It should be something like this: `canvas.toBlob(blob => {/* use blob here*/ })` – rfestag Jun 02 '20 at 19:49
  • I'll also add that it looks like express-fileupload should be expecting your files to be in multipart format: https://github.com/richardgirges/express-fileupload/tree/master/example#basic-file-upload. Once you verify that the blob itself looks correct and well formed, you may want to go back to the question above regarding multipart uploads with axios. – rfestag Jun 02 '20 at 19:53
  • @rfestag yep in my real project it handles the call back so its definitely the correctly blob, looks normal. ill look into the question u mentioned – Will Jun 02 '20 at 19:58
  • @rfestag yes! it worked! i had to create a new form data and append the blob to it and then remove the header for multipart and it worked, thankyou very much :) – Will Jun 02 '20 at 20:01

0 Answers0