Upload signature canvas from base64 image with Form Data

[snowfluke]

How to get the blob instead of the Base64 string so that we can append it to FormData

const data = new FormData();
data.appand('signature', {
    uri: base64SignatureToBlob,
    name: 'signature.png',
    type: 'image/png'
})

[YanYuanFE]

https://stackoverflow.com/questions/36698716/how-to-convert-base64-into-blob-in-react-native

[snowfluke]

Alright thanks, I've found the solution. For anyone that stumble into the same problem, here's the solution:

1. install react-native-fs

import RNFS from 'react-native-fs';
import {Platform} from 'react-native';

  const createTempImage = async base64String => {
    try {

      let base64 = base64String.replace('data:image/png;base64,', '');
      const fileName = `${Date.now()}.png`;
      
      const path = `${RNFS.TemporaryDirectoryPath}/${fileName}`;
      await RNFS.writeFile(path, base64, 'base64');
      
      const image = {
        uri: Platform.OS == 'ios'? path: 'file://' + path,
        name: fileName,
        type: 'image/png',
      };

     return image
    } catch (error) {
      console.log(error);
    }
  };

You might need to add file:// in front of the URI, and also specify the mime-type. I'm just hardcoded it to png.