Fetch image from android phone returning Failed to construct 'Response': The status provided (0) is outside the range [200, 599].

[Punit-Vajpeyi]

Description

While trying to read image from android phone internal storage, I am getting Failed to construct 'Response': The status provided (0) is outside the range [200, 599].

fetch(imagePath)

sample url: file:///data/user/0/com.test_app/cache/rn_image_picker_lib_temp_5c90be23-f414-4a9f-978a-cae5239fdd25.jpg

React Native Version

0.72.3

Output of npx react-native info

System:
OS: macOS 13.4.1
CPU: (8) arm64 Apple M2
Memory: 126.95 MB / 8.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 20.3.0
path: /opt/homebrew/bin/node
Yarn:
version: 1.22.19
path: /opt/homebrew/bin/yarn
npm:
version: 9.6.7
path: /opt/homebrew/bin/npm
Watchman: Not Found
Managers:
CocoaPods:
version: 1.12.1
path: /opt/homebrew/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 22.4
- iOS 16.4
- macOS 13.3
- tvOS 16.4
- watchOS 9.4
Android SDK: Not Found
IDEs:
Android Studio: 2022.2 AI-222.4459.24.2221.9971841
Xcode:
version: 14.3/14E222b
path: /usr/bin/xcodebuild
Languages:
Java:
version: 11.0.19
path: /opt/homebrew/opt/openjdk@11/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.72.3
wanted: 0.72.3
react-native-macos: Not Found
npmGlobalPackages:
"react-native": Not Found
Android:
hermesEnabled: true
newArchEnabled: false
iOS:
hermesEnabled: true
newArchEnabled: false

Steps to reproduce

    fetch('file:///data/user/0/com.test_app/cache/rn_image_picker_lib_temp_5c90be23-f414-4a9f-978a-cae5239fdd25.jpg ')
      .then(response => {
        console.log('Fetch response', response);
      })
      .catch(error => {
        console.log('fetch error', error);
      });

Snack, screenshot, or link to a repository

[github-actions]

⚠️	Missing Reproducible Example
ℹ️	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.

[iBotPeaches]

@Punit-Vajpeyi - Fetch won't work against filesystem files. Thus you get a 0 because you didn't get an HTTP response back and thus failed.

The Fetch API provides a JavaScript interface for accessing and manipulating parts of the protocol, such as requests and responses. It also provides a global fetch() method that provides an easy, logical way to fetch resources asynchronously across the network.
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

So that error looks intended and thus not a bug.

[Punit-Vajpeyi]

But it was working for working for last 2 months the same code. I was uploading files to the server using following code snippet. const response = await fetch(imagePath); const imageData = await response.blob(); await fetch(url, { body: imageData, method: ‘PUT’ }); Can you suggest what to do?

…

On Wed, 26 Jul 2023 at 3:06 AM, Connor Tumbleson ***@***.***> wrote: @Punit-Vajpeyi <https://github.com/Punit-Vajpeyi> - Fetch won't work against filesystem files. Thus you get a 0 because you didn't get an HTTP response back and thus failed. The Fetch API <https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API> provides a JavaScript interface for accessing and manipulating parts of the protocol <https://developer.mozilla.org/en-US/docs/Glossary/Protocol>, such as requests and responses. It also provides a global fetch() <https://developer.mozilla.org/en-US/docs/Web/API/fetch> method that provides an easy, logical way to fetch resources asynchronously across the network. https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch So that error looks intended and thus not a bug. — Reply to this email directly, view it on GitHub <#38625 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ADDQWB6TPPWXWV2NR46TOJ3XSA36NANCNFSM6AAAAAA2XO45TM> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[iBotPeaches]

Sorry @Punit-Vajpeyi I shouldn't have responded. I'm either completely wrong and somehow fetch() supports file:// properties in RN or I am still right and you aren't providing context and doing something that frankly makes no sense.

You mention things worked for last 2 months, but RN72 hasn't been out that long. That code above appears to be working with HTTP as you aren't sending PUT method calls to a filesystem.

So I'm sorry - nothing posted here makes sense to me and I shouldn't have responded. Best of luck.

[Punit-Vajpeyi]

The above snippet worked on RN71 then I upgraded to RN72 and it started to return the error status. RN71 used to support file://. I will check the change log for this, seems like the version issue, will also try to downgrade once again to RN71.

…

On Wed, 26 Jul 2023 at 6:06 AM, Connor Tumbleson ***@***.***> wrote: Sorry @Punit-Vajpeyi <https://github.com/Punit-Vajpeyi> I shouldn't have responded. I'm either completely wrong and somehow fetch() supports file:// properties in RN or I am still right and you aren't providing context and doing something that frankly makes no sense. You mention things worked for last 2 months, but RN72 hasn't been out that long. That code above appears to be working with HTTP as you aren't sending PUT method calls to a filesystem. So I'm sorry - nothing posted here makes sense to me and I shouldn't have responded. Best of luck. — Reply to this email directly, view it on GitHub <#38625 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ADDQWB5G53W4QARUOXYHN5DXSBQ7JANCNFSM6AAAAAA2XO45TM> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[MGuerra17]

@Punit-Vajpeyi I was facing the same issue. This StackOverflow solution helped me.

https://stackoverflow.com/questions/55957683/get-picked-image-on-android-with-react-native-fetch-api

I hope it helps you too.

[AlexanderEggers]

We faced the same issue using RN 0.71 and the root cause was related to an unintended upgrade of whatwg-fetch to latest version 3.6.17. As soon as we downgraded to the previous used version, everything worked again. It seems that a newer version than 3.6.2 is causing these issues for some reasons.

The suggestion by @MGuerra17 unfortunately didn't work for us.

[yuvrajchaudhari03]

@AlexanderEggers how to use whatwg-fetch in react native?

const getBlob = useCallback(fileUri => {
return fetch("file://" + fileUri).then(
response => {
console.log("getBlob res=>,", response)
return response.blob()
},
error => {
console.log(Error in converting image to blob - ${error})
},
)
}, [])

[efstathiosntonas]

I was trying to figure this out for 2 hours, thank god i'm not the only one. This was working perfectly fine on 0.71 and it's broken on 0.72.x

[19424056]

same issue

[stefan-schweiger]

Just use this as as workaround for now:

https://stackoverflow.com/a/76761937/503059

/**
 * Function to convert a URI to a Blob object
 * @param {string} uri - The URI of the file
 * @returns {Promise} - Returns a promise that resolves with the Blob object
 */
export function uriToBlob(uri: string): Promise<Blob> {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();

    // If successful -> return with blob
    xhr.onload = function () {
      resolve(xhr.response);
    };

    // reject on error
    xhr.onerror = function () {
      reject(new Error('uriToBlob failed'));
    };

    // Set the response type to 'blob' - this means the server's response 
    // will be accessed as a binary object
    xhr.responseType = 'blob';

    // Initialize the request. The third argument set to 'true' denotes 
    // that the request is asynchronous
    xhr.open('GET', uri, true);

    // Send the request. The 'null' argument means that no body content is given for the request
    xhr.send(null);
  });
};

Usage const blob = await uriToBlob(fileUri)

[meteorlxy]

Per this issue, it's as expected to throw an error on 0 status code according to fetch spec. That's why whatwg-fetch updated like this.

---

But should fetch API support file:// uri? (related issue)

According to fetch spec - Schema fetch:

"file"
For now, unfortunate as it is, file: URLs are left as an exercise for the reader.

When in doubt, return a network error.

I'm not sure what's the exact meaning of the spec. Any native speaker or spec expert could help answer it? 🤔

---

Anyway, regardless the fetch spec and the updates of whatwg-fetch package, using the snippet in the previous comment should always be a safe solution.

[mercpls]

@Punit-Vajpeyi Should be able to be closed, fixed in this pr JakeChampion/fetch#1375

[PedroH183]

@stefan-schweiger tyy ! Its worked for me. But i maked the mistake don't use await when call this function.

[react-native-bot]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[react-native-bot]

This issue was closed because it has been stalled for 7 days with no activity.