Subir imagen a Firebase en React Native

Por fin luego de mucho luchar ya encontramos la contestación de este enigma que ciertos lectores de nuestro sitio tienen. Si quieres aportar algún detalle puedes dejar tu comentario.

Solución:

Lo que dice el error es que necesitas usar un blob. Puede usar react-native-fetch-blob: https://github.com/wkh237/react-native-fetch-blob

Consulte este ejemplo: https://github.com/dailydrip/react-native-firebase-storage/blob/master/src/App.js#L43-L69

Estoy publicando mi código ya que esto fue un poco frustrante para mí:

Para cargar imágenes en firebase.storage, debe cargar las imágenes como blobs. Si no sabes qué son los Blobs, no te preocupes: GOTA representa Binario Lgrande transmisión exteriorproyecto

Paso 1.

npm install --save react-native-fetch-blob

Paso 2.

// copy and paste this code where you will handle the file upload

import RNFetchBlob from 'react-native-fetch-blob'

const Blob = RNFetchBlob.polyfill.Blob;
const fs = RNFetchBlob.fs;
window.XMLHttpRequest = RNFetchBlob.polyfill.XMLHttpRequest;
window.Blob = Blob;

Paso 3.

// The uploadImage function that you are going to use:

function uploadImage(uri, mime = 'image/jpeg', name) 

  return new Promise((resolve, reject) => 
    let imgUri = uri; let uploadBlob = null;
    const uploadUri = Platform.OS === 'ios' ? imgUri.replace('file://', '') : imgUri;
    const  currentUser  = firebase.auth();
    const imageRef = firebase.storage().ref(`/jobs/$currentUser.uid`)

    fs.readFile(uploadUri, 'base64')
      .then(data => 
        return Blob.build(data,  type: `$mime;BASE64` );
      )
      .then(blob => 
        uploadBlob = blob;
        return imageRef.put(blob,  contentType: mime, name: name );
      )
      .then(() => 
        uploadBlob.close()
        return imageRef.getDownloadURL();
      )
      .then(url => 
        resolve(url);
      )
      .catch(error => 
        reject(error)
    )
  )

Entonces, ¿cómo llamas a esta función? Pase el URI de la imagen como primer argumento. En mi caso img1, img2, img3 donde variables que apuntaban a las URIs de las imágenes, que quería subir que estaban en mi teléfono. Se veían algo como '/Phone/Pics/imageToUpload.jpeg'etc.

Como segundo argumento puedes pasar 'image/jpeg' y el último argumento es el nombre que le quieres dar a la imagen. Elige el nombre que más te guste.

Pero Walter, tengo varias imágenes y quiero subirlas y quiero manejar la carga correctamente. ¿Qué sucede si una carga tiene éxito y la otra no?

Haz esto entonces:

let imgPromises = [];
imgPromises.push(uploadImage(img1, 'image/jpeg', 'imageOne'));
imgPromises.push(uploadImage(img2, 'image/jpeg', 'imageTwo'));
imgPromises.push(uploadImage(img3, 'image/jpeg', 'imageOne'));

Promise.all(imgPromises).then(urls => 
  // ALL IMAGES SUCCEEDED and you will get an array of URIS that you can save to your database for later use!
).catch(error => 
  // One OR many images failed the upload. Give feedback to someone.
)

Puede usar react-native-firebase para cargar la imagen en el almacenamiento https://rnfirebase.io/

const storage = firebase.storage();
const sessionId = new Date().getTime();
const imageRef = storage.ref('images').child(`$sessionId`);
return imageRef.putFile(uri);

Valoraciones y comentarios

---

---

Utiliza Nuestro Buscador