search

facebook / react-native

A framework for building native applications using React
https://reactnative.dev
MIT License
117.13k stars 24.08k forks source link

Network Error when send file with formData(axios or fetch) on Android. Works fine on IOS. #44657

Open felipeavila-vp opened 1 month ago

felipeavila-vp commented 1 month ago

Description

When I try to send some post request sending a file with formData I receive a Network Error. Most of the time the request works fine, but sometimes I receive this error. The problem occurs when use Android, works fine with IOS.

Recently I updated my application to react-native 0.74.1(latest), before the version was 0.64.4. In older version all works fine.

Current versions:

image

Steps to reproduce

Only try to submit some files using formData

React Native Version

0.74.1

Affected Platforms

Runtime - Android

Output of npx react-native info

System:
  OS: macOS 14.4
  CPU: (8) x64 Intel(R) Core(TM) i5-8257U CPU @ 1.40GHz
  Memory: 29.93 MB / 8.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 18.19.0
    path: /usr/local/bin/node
  Yarn:
    version: 1.22.22
    path: /usr/local/bin/yarn
  npm:
    version: 8.19.4
    path: /usr/local/bin/npm
  Watchman:
    version: 2024.05.06.00
    path: /usr/local/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /usr/local/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.4
      - iOS 17.4
      - macOS 14.4
      - tvOS 17.4
      - visionOS 1.1
      - watchOS 10.4
  Android SDK:
    API Levels:
      - "29"
      - "30"
      - "31"
      - "32"
      - "33"
      - "34"
    Build Tools:
      - 29.0.2
      - 30.0.2
      - 30.0.3
      - 31.0.0
      - 33.0.0
      - 33.0.1
      - 34.0.0
    System Images:
      - android-29 | Google APIs Intel x86 Atom
      - android-29 | Google Play Intel x86 Atom
      - android-30 | Intel x86_64 Atom
      - android-34 | Google APIs Intel x86_64 Atom
      - android-34 | Google Play Intel x86_64 Atom
      - android-VanillaIceCream | Google APIs Intel x86_64 Atom
    Android NDK: Not Found
IDEs:
  Android Studio: 2023.2 AI-232.10300.40.2321.11567975
  Xcode:
    version: 15.3/15E204a
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.10
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.74.1
    wanted: ^0.74.1
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

Stacktrace or Logs

No have logs to show

Reproducer

https://github.com

Screenshots and Videos

No response

github-actions[bot] commented 1 month ago
:warning: Missing Reproducible Example
:information_source: We could not detect a reproducible example in your issue report. Please provide either:
  • If your bug is UI related: a Snack
  • If your bug is build/update related: use our Reproducer Template. A reproducer needs to be in a GitHub repository under your username.
H3tansh commented 1 month ago

This issue still in

const formData = new FormData() formData.append('audio_file', { name: fileName, type: 'audio/mp3', uri: filePath })

    await fetch('http endpoint', {
        body: formData,
        method: 'POST',
        headers: {
            'Content-Type': 'multipart/form-data',
            Authorization:
                'Bearer token'
        }
    })
        .then(res => {
            console.log('test result ', res)
            console.log('test result status ', res.status)
        })
        .catch(e => {
            console.log('test e ', e)
        })

This returns network error

REACT-NATIVE-INFO output:-

System: OS: macOS 14.2.1 CPU: (8) arm64 Apple M1 Memory: 599.88 MB / 16.00 GB Shell: version: "5.9" path: /bin/zsh Binaries: Node: version: 18.19.0 path: ~/.nvm/versions/node/v18.19.0/bin/node Yarn: version: 3.6.4 path: /opt/homebrew/bin/yarn npm: version: 10.2.3 path: ~/.nvm/versions/node/v18.19.0/bin/npm Watchman: version: 2024.04.15.00 path: /opt/homebrew/bin/watchman Managers: CocoaPods: version: 1.15.2 path: /opt/homebrew/bin/pod SDKs: iOS SDK: Platforms:

saadkhan2211 commented 1 month ago

Same issue here..

const fileExtension = coverImage.split(".").pop();

  // Create a new FormData instance
  const formData = new FormData();

  formData.append("image", {
    uri: coverImage,
    name: "image-" + new Date() + `.${fileExtension}`,
    type: `image/${fileExtension}`,
  } as any);

  // Append other form fields to FormData
  formData.append("food_name", data.food_name);
  formData.append("description", data.description);
  formData.append("price", String(data.price));
  formData.append("category", data.category);
  formData.append("addOn", JSON.stringify(data.addon));

  // Append sizes if applicable
  if (isSize && data.size.length > 0) {
    data.size.forEach((input, index) => {
      formData.append(`size[${index}]`, input.size);
      formData.append(`size_price[${index}]`, String(input.price));
    });
  }

  const response = await axios.post(
    `${app_url}/addMenuItem/${resId}`,
    formData,
    {
      headers: {
        "Content-Type": "multipart/form-data",
      },
    }
  );

When I console.log req.file and req.body,

undefined [Object: null prototype] { food_name: '', description: '', price: 'null', category: '', addOn: '{"addon":"","price":0}' }

Here I'm not sending any data in req.body only sending file to req.file which I get undefined.. This works fine with react native 0.73.x but not with 0.74.x

github-actions[bot] commented 1 week ago

This issue is waiting for author's feedback since 24 days. Please provide the requested feedback or this will be closed in 7 days.

felipeavila-vp commented 3 days ago

Same problem here yet