Estoy tratando de subir un video al almacenamiento de Firebase en iOS. Android funciona bien. Aquí está el código que lo causa (hay comentarios en el código para mostrar cuando falla). Además, estoy usando mi propio iPhone para probar esto, no un simulador.
export const mediaUpload = async (imageObject) => { // getting blob from a local file a user uploads from ImagePicker const blob = await fetch(imageObject[0].uri); const blobObject = await blob.blob(); // creating reference path in storage const fileRef = ref(storage, `${auth.currentUser.uid}/videos/${uuid.v4()}`); // ----- no crash so far... ------- // this is the issue line const attemptToUpload = await uploadBytes(fileRef, blobObject); // ------> APP CRASHES }En Android, esto funciona tanto con imágenes como con videos. En iOS, las imágenes funcionan, pero los videos bloquearán la aplicación por completo. El tipo de blob es video/quicktime. ¿Por qué el método uploadBytes bloquea la aplicación?
EDITAR: La respuesta fue que Firebase v9 parece no ser compatible con Expo en el manejo de cargas de video al almacenamiento al 100%. Incluso Android se bloquea en las cargas de video sin ningún mensaje de error que descubrí. La forma en que resolví esto fue volver a la versión Firebase 8.10.0. Esto funciona al 100%.
Usando este enfoque y funciona bien en iOS 15.
const videoRef = firebase.storage().ref("video/filename"); const metadata = { contentType: "video/mp4" }; const blob = await new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); xhr.onload = function () { resolve(xhr.response); }; xhr.ontimeout = function (e) { // XMLHttpRequest timed out. Do something here. console.log(e); }; xhr.onerror = function (e) { console.log(e); reject(new TypeError("Network request failed")); }; xhr.responseType = "blob"; xhr.open("GET", fileUri, true); xhr.timeout = 1000 * 60; xhr.send(null); }); var uploadTask = videoRef.put(blob, metadata); uploadTask.on( "state_changed", (snapshot) => { // Observe state change events such as progress, pause, and resume // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded const progress = snapshot.bytesTransferred / snapshot.totalBytes; switch (snapshot.state) { case firebase.storage.TaskState.PAUSED: // or 'paused' console.log("Upload is paused"); break; case firebase.storage.TaskState.RUNNING: // or 'running' console.log("Upload is running"); break; } }, (error) => { console.log(error); // Handle unsuccessful uploads blob.close(); }, () => { // Handle successful uploads on complete // For instance, get the download URL: https://firebasestorage.googleapis.com/... uploadTask.snapshot.ref.getDownloadURL().then((downloadURL) => { console.log("Video file save at:",downloadURL) }); blob.close(); } );Creo que es un problema conocido en la plataforma ios cuando el cuerpo es solo una gota. Me encontré con el mismo problema hace unas semanas y lo solucioné enviándolo a mi backend y luego subiéndolo al servicio que lo requiere.
También enfrenté el mismo problema, en Firebase versión 9.6.5, mientras cargaba la imagen, así que utilicé la función uploadBytesResumable en lugar de uploadBytes, funciona bien, si es urgente, puede usar esa función por el momento, solo una recomendación , como referencia: - https://firebase.google.com/docs/storage/web/upload-files
Enfrenté este problema solo en iOS 15 y 15 +, descanse debajo de iOS 15 y en las aplicaciones de Android uploadBytes funciona bien.
Al usar XMLHttpRequest con uploadBytesResumable, la primera vez que la imagen se carga sin problemas en iOS 15.2, luego, al cargarla por segunda vez, hay un bloqueo al cargar la imagen. Para evitarlo usa,
const img = await fetch(image_url); const blob = await img.blob();Entonces, si tiene algún problema al cargar la imagen, use este enfoque para crear un archivo blob
si necesita una referencia de código, he respondido otra pregunta aquí sobre el error de carga de imágenes (almacenamiento de fuego), el selector de imágenes de React Native expo carga la imagen en el almacenamiento de base de fuego (v9) falla