question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Unable to upload image file on first try getting TypeError: Network Request Failed

See original GitHub issue

Description

This issue only occurs on Android devices after updating React Native from v0.63.4 to v0.65.1. For some strange reason, the first attempt at uploading a image file will immediately fail with the error TypeError: Network Request Failed.

If it does fail on the first try, the second or third will succeed. Does anyone know why does this happen or how I can investigate this further? Sometimes this issue does not even happen at all.

Version

0.65.1

Output of npx react-native info

npm ERR! code E404 npm ERR! 404 Not Found - GET https://registry.npmjs.org/react-native-info - Not found npm ERR! 404 npm ERR! 404 ‘react-native-info@latest’ is not in the npm registry. npm ERR! 404 You should bug the author to publish it (or use the name yourself!) npm ERR! 404 npm ERR! 404 Note that you can also install from a npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\ws8149\AppData\Roaming\npm-cache_logs\2022-01-25T12_34_29_576Z-debug.log Install for [ ‘react-native-info@latest’ ] failed with code 1

Steps to reproduce

  1. Use an Android device
  2. Perform an image file upload

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

const handleUpload = async (file) => {
    const form = new FormData()

    form.append('file', {
      uri: file.uri, type: file.type, name: file.name
    })

    const token = await getItem(storageKey.token)

     let req_headers = {
       'Content-Type': 'multipart/form-data',
      'Accept': 'application/json',
       Authorization: `Bearer ${token}`,       
     };     

     fetch(`${API_URL}/upload`, {
      method: 'POST',
      body: form,
      headers: req_headers
    })
      .then((response) => response.json())
      .then((response) => {
        console.log('response', response);
      })
      .catch((error) => {
        console.log('error', error);       
      });
     
   };

Issue Analytics

  • State:open
  • Created 2 years ago
  • Comments:7 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
ws8149commented, Feb 7, 2022

Thanks but its also occurring on release builds

Read more comments on GitHub >

github_iconTop Results From Across the Web

Network request failed on react native upload image
The solution is to use proper mime-type in the formData in the field type. Ex: mime-type for .jpg file would be image/jpeg and...
Read more >
Network Request Failed while uploading image to server
The solution is to use proper mime-type in the formData in the field type . Ex: mime-type for .jpg file would be image/jpeg...
Read more >
Android: Network Request Failed When Trying To Upload ...
The recent error while uploading files or images using FormData results in TypeError: Network Request Failed. Click here to know the These are...
Read more >
Getting Network Request Failed error - Bug - AppGyver forums
I'm trying to upload an image file to the Backendless Files API which requires the body of the request to be of type...
Read more >
How to Fix a 400 Bad Request Error (Causes and Fixes) - Kinsta
You can test this out by uploading a smaller file first. If this is successful then the initial file is probably too large...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found