File Upload issue (Unable to Parse boday as formdata) on react-native 0.76.1

[shishir-promact]

Problem Description

import React, { useState } from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import DocumentPicker from 'react-native-document-picker';

const FileUpload = () => {
const [selectedFile, setSelectedFile] = useState(null);

const pickDocument = async () => {
try {
const result = await DocumentPicker.pick({
type: [DocumentPicker.types.allFiles],
});
setSelectedFile(result[0]);
} catch (err) {
if (DocumentPicker.isCancel(err)) {
console.log('User cancelled the picker');
} else {
console.log('Error:', err);
}
}
};

const handleUpload = async () => {
if (!selectedFile) {
alert('Please select a file first');
return;
}

const formData = new FormData();
formData.append('document_0', {
  uri: selectedFile.uri,
  type: `application/${selectedFile.type}`,
  name: selectedFile.name,
});

console.log(formData);

try {
  const response = await fetch(
    'url',
    {
      method: 'POST',
      headers: {
        'Content-Type': 'multipart/form-data',
        Authorization:
          'Bearer xyz', // Replace with your actual token
      },
      body: formData,
    },
  );

  const data = await response.json();
  console.log('Upload success:', data);
  alert('File uploaded successfully!');
  setSelectedFile(null);
} catch (error) {
  console.error('Upload error:', error);
  alert('Error uploading file');
}

};

return (


Select File

  {selectedFile && (
    <View style={styles.fileInfo}>
      <Text>Selected File: {selectedFile.name}</Text>
      <Text>Size: {(selectedFile.size / 1024 / 1024).toFixed(2)} MB</Text>
    </View>
  )}

  <TouchableOpacity
    style={[styles.button, styles.uploadButton]}
    onPress={handleUpload}
    disabled={!selectedFile}
  >
    <Text style={styles.buttonText}>Upload File</Text>
  </TouchableOpacity>
</View>

);
};

const styles = StyleSheet.create({
container: {
flex: 1,
padding: 20,
alignItems: 'center',
justifyContent: 'center',
},
button: {
backgroundColor: '#007AFF',
padding: 15,
borderRadius: 8,
width: '80%',
alignItems: 'center',
marginVertical: 10,
},
uploadButton: {
backgroundColor: '#34C759',
},
buttonText: {
color: 'white',
fontSize: 16,
fontWeight: 'bold',
},
fileInfo: {
marginVertical: 20,
padding: 10,
borderWidth: 1,
borderColor: '#ccc',
borderRadius: 8,
},
});

export default FileUpload;

Steps To Reproduce

Try to upload any file using formdata to the backend and it doesn't work in 0.76 versions of react-native

Expected Results

File should be successfully uploaded

CLI version

15.0.0

Environment

System:
  OS: macOS 15.1
  CPU: (8) arm64 Apple M2
  Memory: 147.33 MB / 8.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 22.11.0
    path: /opt/homebrew/opt/node@22/bin/node
  Yarn: Not Found
  npm:
    version: 10.9.0
    path: /opt/homebrew/opt/node@22/bin/npm
  Watchman:
    version: 2024.12.02.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.16.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.1
      - iOS 18.1
      - macOS 15.1
      - tvOS 18.1
      - visionOS 2.1
      - watchOS 11.1
  Android SDK:
    API Levels:
      - "30"
      - "34"
      - "35"
    Build Tools:
      - 33.0.1
      - 34.0.0
      - 35.0.0
    System Images:
      - android-28 | Google ARM64-V8a Play ARM 64 v8a
      - android-35 | Google Play ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2024.2 AI-242.23339.11.2421.12700392
  Xcode:
    version: 16.1/16B40
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.13
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 15.0.0
    wanted: 15.0.0
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.76.1
    wanted: 0.76.1
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true

Community Modules

I have tried everything but nothing works please fix this issue or guide on how to fix it.

Target Platform Version

None

Target Device(s)

No response

Visual Studio Version

None

Build Configuration

None

Snack, code example, screenshot, or link to a repository

No response

[chrisglein]

From the info you provided, you're on macOS and you don't have the react-native-windows package installed. Did you mean to log this as a Windows issue (which is this repo)? Or is this a general RN issue (iOS / Android)? Or a macOS issue (also a different repo)?