How to upload Base64 data to a server using formdata React native?

Question

I have an image in Base64 format. 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',
});

I followed this link as well but don't understand how to send it to the API as formdata. It's constantly giving network errors.

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

No, the code that transforms the base64-encoded string to a File object. Please also include the error message(s) in your question — Phil
– Phil, Commented Jan 24, 2022 at 5:55
The object you're appending to your formData isn't any of the acceptable parameter types. It must be be "a USVString or Blob (including subclasses such as File)" — Phil
– Phil, Commented Jan 24, 2022 at 5:59

Code Lover · Accepted Answer · 2022-10-31 11:32:09Z

2

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 })
      }

answered Oct 31, 2022 at 11:32

Code Lover

8731 gold badge13 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

myckhel · Accepted Answer · 2023-09-14 00:56:28Z

2

The easiest way without external libraries.

let signature = base64signature;

const formdata = new FormData();

formdata.append('attachments', {
  uri: signature, // base64
  name: 'logo.png',
  type: 'image/png',
});

await axios.post('/', formdata, {headers: {'Content-Type': 'multipart/form-data'}})

answered Sep 14, 2023 at 0:56

myckhel

9103 gold badges19 silver badges33 bronze badges

Comments

snowfluke · Accepted Answer · 2023-02-13 03:05:31Z

-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);
    }
  };

answered Feb 13, 2023 at 3:05

snowfluke

11 bronze badge

1 Comment

Community Over a year ago

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.

Collectives™ on Stack Overflow

How to upload Base64 data to a server using formdata React native?

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related