Upload image to firebase using Formdata React Native

Question

Im tring to upload image to firebase using formdata.but im getting this error

"Invalid data; couldn't parse JSON object, array, or value."

This is my code

const formData = new FormData();
    formData.append('Lname', 'aa');
    formData.append('FName', 'aas');
    formData.append('image', {
        url:image,
        name:'profilePic.jpg',
        type: 'image/jpg'


    })

   const request =  axios({
    method: 'POST',
        url:`https://test2card-e8014.firebaseio.com/profileInfo.json`,
      data: formData,
      headers: {

        'Content-Type': 'multipart/form-data;',
      },
    }).then( response => {

        console.log('log', response.data)
        return response.data
    }).catch(e=>{
    console.log('err',e.response.data)

    })

and im using ios simulator this my image url - file:///Users/kk/Library/Developer/CoreSimulator/Devices/3ED3277A-DE0C-478A-AFAE-FE24D67A76DB/data/Containers/Data/Application/D091EAA9-E390-49C8-AFF7-E862A6A8B93A/Documents/images/F0FDE0FB-84FE-43BB-8F0C-25D52A223703.jpg

and also can I know what is best and efficient way to get this done.

Thank you.

You could be crazy and send the image file up as a base64 string if not. Not ideal, but would need more detail about the Firebase configuration to provider any further help. — Lee Brindley

Lee Brindley Lee Brindley · Accepted Answer · 2018-08-31T10:10:28

I don't think Firebase accepts multipart/form-data requests by default, so you'd want to look at enabling that to get your request to work.

So, you could get the multipart/form-data requests working with firebase, use another service to send the files to, like Cloud Storage for Firebase.

Alternatively, if your files aren't going to be too big, and you don't want to configure Firebase too enable the multipart/form-data requests, you could send the files up as Base64 strings, then have firebase decode the base64 string in the request handler, and process your image however you plan to.

Remember sending as Base64 will increase the data size by ~1/3, as well as the computation needed on the front-end to convert the image to base64.

Upload image to firebase using Formdata React Native

1 Answers