How to upload signature as image file / append to `FormData`?

Ah, good usage question! There's a small bit about this in signature_pad's README, but it doesn't go too into detail.

To begin, you could upload the image as a blob, or you could upload it as a dataURL (the above link goes over how you might decode a dataURL server-side). As a dataURL, it's just a very long string, so sending that to the server is, for the most part, like POSTing any other string.

As a blob, yes you can use FormData for that. To get the blob, you'll have to get the raw Canvas element from a ref to react-signature-canvas. For instance, if you're using class components and your ref is stored in this.sigCanvas like some of the examples, you would use:

const canvas = this.sigCanvas.getCanvas()

Once you've got the canvas, one option to transform it into a blob is through the canvas.toBlob function. It's important to note that toBlob is not supported in all browsers, so you might want to polyfill it with something like blueimp-canvas-to-blob depending on what type of users you need to support. With toBlob, you can then do:

canvas.toBlob((blob) => {
  const fd = new window.FormData()
  fd.append('signature', blob, 'signature.png')
  // POST to server with your preferred requests library
})

Alternatively, blueimp-canvas-to-blob also exports dataURLtoBlob, so if you were to use that polyfill/library and that function, you could instead do:

import dataURLtoBlob from 'blueimp-canvas-to-blob'

// ...

const blob = dataURLtoBlob(canvas.toDataURL('image/png'))
const fd = new window.FormData()
fd.append('signature', blob, 'signature.png')
// POST to server with your preferred requests library

There are of course other ways of doing it, but hope those examples help or point you in the right direction at least 🙂

agilgur5 / react-signature-canvas

How to upload signature as image file / append to `FormData`? #35