expo/examples

[with-firebase-storage-upload] : fails after uploading one picture.

perroudsky opened this issue · 3 comments

I can only upload one photo, then if you want to upload another one you get an error.

What it prints :

Event {
  "isTrusted": false,
}

Network request failed
* App.js:195:6 in xhr.onerror
- node_modules/event-target-shim/dist/event-target-shim.js:818:20 in EventTarget.prototype.dispatchEvent
- node_modules/react-native/Libraries/Network/XMLHttpRequest.js:600:10 in setReadyState
- node_modules/react-native/Libraries/Network/XMLHttpRequest.js:395:6 in __didCompleteResponse
- node_modules/react-native/Libraries/vendor/emitter/EventEmitter.js:189:10 in emit
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:416:4 in __callFunction
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:109:6 in __guard$argument_0
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:364:10 in __guard
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:108:4 in callFunctionReturnFlushedQueue
* [native code]:null in callFunctionReturnFlushedQueue

To Reproduce
Simply run the exemple and try to upload more than one picture.

same problem :(

Using the Buffer package mentioned here works as a replacement for XMLHttpRequest when posting to firebase storage.

XMLHttpRequest does appear to fail on subsequent calls in expo 39. (looks like the problem is a react thing)

Here is the code I used to get with-firebase-storage-upload working for 2nd and subsequent uploads

import { Buffer } from "buffer"; // get this via: npm install buffer
import * as FileSystem from "expo-file-system";

...

async function uploadImageAsync(uri) {

	const options = { encoding: FileSystem.EncodingType.Base64 };
	const base64Response = await FileSystem.readAsStringAsync(
		uri,
		options,
	);

	const blob = Buffer.from(base64Response, "base64");

	const ref = firebase
		.storage()
		.ref()
		.child(uuid.v4());
	const snapshot = await ref.put(blob);

	return await snapshot.ref.getDownloadURL();
}

this was a react-native bug that has since been patched