React Native: Trouble with multipart/form-data uploads to Google Drive API

Other Questions Google drive
1

Hey everyone! I’m stuck with a problem in my React Native app. I’m trying to upload files to Google Drive using their API, but I keep getting a ‘Malformed multipart body’ error. It’s weird because the same request works fine in Postman.

I’ve set up FormData with the file and metadata, just like in Postman. But for some reason, it’s not working in React Native. I’ve tried both fetch and axios, but no luck.

Here’s a simplified version of what I’m doing:

const uploadFile = async () => {
  const formData = new FormData();
  formData.append('metadata', JSON.stringify({
    name: 'myFile.txt',
    mimeType: 'text/plain'
  }));
  formData.append('file', {
    uri: fileUri,
    type: 'text/plain',
    name: 'myFile.txt'
  });

  try {
    const response = await fetch('https://www.googleapis.com/upload/drive/v3/files?uploadType=multipart', {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${accessToken}`,
      },
      body: formData
    });
    // Handle response
  } catch (error) {
    console.error('Upload failed:', error);
  }
}

Any ideas what might be going wrong? Or maybe there’s a better way to handle multipart uploads in React Native? Thanks for any help!

2

I’ve encountered similar issues when working with multipart/form-data in React Native. One thing that often helps is explicitly setting the Content-Type header to ‘multipart/form-data’. Try adding this to your headers:

‘Content-Type’: ‘multipart/form-data’

Also, make sure your access token is valid and hasn’t expired. Sometimes authentication issues can manifest as malformed body errors.

If that doesn’t work, you might want to try a third-party library like react-native-blob-util. It’s designed to handle file uploads more reliably in React Native and could potentially solve your issue.

Lastly, double-check that the file you’re trying to upload actually exists at the specified URI. File path issues can sometimes cause unexpected errors in React Native.

3

I’ve dealt with this exact issue before, and it can be frustrating. One thing that worked for me was adjusting the FormData structure slightly. Instead of appending the metadata as a JSON string, try creating a Blob:

const metadata = new Blob([JSON.stringify({
  name: 'myFile.txt',
  mimeType: 'text/plain'
})], { type: 'application/json' });

formData.append('metadata', metadata);

Also, make sure you’re using the correct boundary for multipart requests. React Native’s FormData implementation can be a bit quirky. You might need to manually set the boundary in your headers:

const boundary = '----WebKitFormBoundary' + Math.random().toString(36).substring(2);
headers['Content-Type'] = `multipart/form-data; boundary=${boundary}`;

If these tweaks don’t solve it, consider using a specialized library like ‘react-native-google-drive-api-wrapper’. It’s designed specifically for Google Drive interactions in React Native and might handle these edge cases better.

4

have u tried using a different library? i had similar probs and switched to ‘react-native-document-picker’ for file selection and ‘react-native-fs’ for reading. then i used axios with ArrayBuffer instead of FormData. worked like a charm for me. might be worth a shot if nothing else works!