React Native 0.62.* [TypeError: Network request failed] on file upload
Problem
Please provide all the information requested. Issues that do not follow this format are likely to stall. Description After upgrading from 0.61.4 to 0.62.0 the app will not upload files anymore from Android (all other requests are working fine) React Native version: 0.62.0 Steps To Reproduce 1. Install a fresh ReactNative app via CLI 2. Upload a file to the emulator 3. Try to upload a file using `fetch` [code block] Expected Results The request should reach the server to upload the file Snack, code example, screenshot, or link to a repository: https://snack.expo.io/01W!bybf_ [code block]
Error Output
Error: Network request failed]```
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Fix Network Request Failed on File Upload in React Native 0.62
The issue arises due to changes in the networking stack in React Native 0.62, which may affect how file uploads are handled, particularly on Android. The underlying problem is often related to the permissions required for file access or the configuration of the fetch API when dealing with multipart form data.
Awaiting Verification
Be the first to verify this fix
- 1
Check and Update Permissions
Ensure that the app has the necessary permissions to access the device's storage. Update the AndroidManifest.xml file to include the WRITE_EXTERNAL_STORAGE permission.
xml<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> - 2
Use FormData for File Upload
When uploading files, ensure you are using FormData correctly. Create a FormData instance and append the file to it before sending the request.
javascriptconst formData = new FormData(); formData.append('file', { uri: fileUri, type: 'image/jpeg', name: 'photo.jpg', }); fetch('YOUR_UPLOAD_URL', { method: 'POST', body: formData, headers: { 'Content-Type': 'multipart/form-data', }, }); - 3
Check Network Configuration
Verify that your emulator or device has internet access and that the server URL is correct. Sometimes, the emulator may not have proper network settings.
bashadb shell ping -c 4 google.com - 4
Test on a Physical Device
If the issue persists on the emulator, test the file upload on a physical Android device to rule out emulator-specific issues.
- 5
Update React Native and Dependencies
Ensure that you are using the latest version of React Native and any related libraries. Sometimes, bugs are fixed in newer releases.
bashnpm install react-native@latest
Validation
To confirm the fix worked, attempt to upload a file again using the updated code. A successful upload should result in a 200 OK response from the server. Additionally, check the server logs to ensure the request is received.
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep