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.