I am also having problems with blob in iOS with sdk 39, in android it works perfectly and in later versions.
When I want to upload a file to firebase storage it uploads it but with application/octet-stream format and 0 byte.
if you can provide a runnable example like the above and create an issue we can investigate. i don’t see any issues like this on the react-native repository, and that is where the fetch and blob code lives, so it seems possible that this is an issue with your app code, but it’s impossible to tell without having a mcve (How to create a Minimal, Reproducible Example - Help Center - Stack Overflow.
you may also want to consider FileSystem - Expo Documentation as an alternative to using XMLHttpRequest. it also works for uploading files when the app is backgrounded.
I have the same issue. Used to work just fine before upgrading the SDK to version 39.
// uri's value = file:///var/mobile/Containers/Data/Application/D791BFAD-6478-4780-8BDE-AEFA27A41D75/Library/Caches/ExponentExperienceData/%2540eduardjs%252FBySpark/ImageManipulator/2E2B36BA-EEED-414E-8AFE-7264A4773AB9.jpg
let file = await fetch(uri)
So, the image exists locally, as it successfully renders in an <Image /> just that when trying to fetch it, it suddenly returns this error.
Trying to figure out how to fix … tried with different codes for fetching the blob, tried using Axios, then using plain XHR (like in the OP’s post).
Also tried with this. Gives the same error as the OP’s on both iOS / Android, locally as well as within the builds for the simulators.
So far, no luck. Can’t think of anything else to fix this … please advise.
For some reason I couldn’t edit my previous post. I’ve just tried installing the example storage upload. Works fine on the first try, but then, if you try uploading for a second time, the error occurs, hence, error is somewhere within v39.
I noticed this as well. I got a work around working for the time being: Apparently you can still access the values via the FileSystem then you can get the file as base64 and then create a buffer from the base64 encoded value and send that as a blob. Here’s the code I used.
We have been having the same issues. Tried everything from fetching the file to building something similar to buffer. We’re building a functionality where a user can choose a photo from their phone which then is uploaded to Microsoft Graph which expects a binary.
When using a fetch request the response returns an image, but the .blob() method seems be undefined on fetch responses which I believe should have been available since SDK 35.
A get through an XHR request does return a blob, but like someone before stated with 0 bytes.
as i said above we plan to do a patch release to include this fix, we’ll try to get this ready this week or next. until then you can use sdk 38 or lower, or eject if you must use sdk 39.
Just in case someone needs a workaround to get images uploaded to firebase storage AND uses the image resize extension. My problem was that firebase storage complained about “unsupported image format” and therefore couldn’t resize the images (create thumbnails) automatically.
import { atob } from 'abab' // react native has no built in atob()/btoa() methods, but firebase depends on it internally
global.atob = atob // this tricks firebase into using the expected atob() method
const options = { encoding: FileSystem.EncodingType.Base64 }
const base64Response = await FileSystem.readAsStringAsync(uri, options) // uri from expo's camera
const stripped = base64Response.replace(/\s/g, '') // firebase storage doesn't like whitespaces in base64 images
firebase.storage().ref().child(path).putString(stripped, 'base64', { contentType: 'image/jpeg' })
Run yarn upgrade to update to the latest version of packages in your project for their current semantic version range. npm does not have an equivalent command, so you can delete your package-lock.json and node_modules and run npm install again.