3

I have base64 of an image.. I want to send it to the api using formdata. How can that be achieved? I am using react native signature canvas to get the base64 of the signature.

let signature = base64signature;
const formdata = new FormData();
formdata.append('attachments', {
  uri: signature,
  name: 'logo',
  filename: 'logo',
  type: 'image/png',
});

How to convert Base64 String to javascript file object like as from file input form?
I followed this link as well but dont understand how to send it to the api as formdata.. It's constantly giving network error.

I have also tried to convert it to blob and send but that didn't work as well. Can anyone help me with this?

Phil
  • 157,677
  • 23
  • 242
  • 245
Yus
  • 124
  • 2
  • 15
  • Could you add the code that you tried? – MaartenDev Jan 23 '22 at 18:12
  • I have added the code above. – Yus Jan 23 '22 at 18:19
  • No, the code that transforms the base64-encoded string to a `File` object. Please also include the error message(s) in your question – Phil Jan 24 '22 at 05:55
  • The object you're appending to your `formData` isn't any of the [acceptable parameter types](https://developer.mozilla.org/en-US/docs/Web/API/FormData/append#parameters). It must be be _"a `USVString` or `Blob` (including subclasses such as `File`)"_ – Phil Jan 24 '22 at 05:59

2 Answers2

1
var imgBase64 = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCA..." //your bse64 image

onSubmit(){
const file = DataURIToBlob(imgBase64)
const formData = new FormData();
formData.append('upload', file, 'image.jpg') 
formData.append('profile_id', this.profile_id) //other param
formData.append('path', 'temp/') //other param
}

    function DataURIToBlob(dataURI: string) {
        const splitDataURI = dataURI.split(',')
        const byteString = splitDataURI[0].indexOf('base64') >= 0 ? atob(splitDataURI[1]) : decodeURI(splitDataURI[1])
        const mimeString = splitDataURI[0].split(':')[1].split(';')[0]

        const ia = new Uint8Array(byteString.length)
        for (let i = 0; i < byteString.length; i++)
            ia[i] = byteString.charCodeAt(i)

        return new Blob([ia], { type: mimeString })
      }
Code Lover
  • 723
  • 1
  • 10
  • 24
0
  1. You need to 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);
    }
  };
snowfluke
  • 1
  • 1
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Feb 15 '23 at 14:20