web-dev-qa-db-fra.com

Chargement d'une image vers Firebase dans React Native

J'ai deux chemins d'image dans mon état de composant

 enter image description here

J'essaie de télécharger l'une des images à l'intérieur d'une fonction mais j'obtiens une erreur: 

Firebase Storage: Invalid argument in 'put' at index 0: Expected Blob or file

et ma fonction 

submitImages = () => {

    // Upload images to Firebase storage
    let user = firebaseAuth.currentUser;
    let imagesRef = storageRef.child('productImages/' + user.uid);
    imagesRef.put(this.state.imageFront).then(snapshot => {
        console.log('Uploaded ' + this.state.imageFront);
    });
}

Que devrais-je plutôt faire pour que ces images soient montées dans Firebase. Merci! 

firebasereact-nativefirebase-storage
5
maxwellgover

L'erreur dit que vous devez utiliser un blob. Vous pouvez utiliser react-native-fetch-blob: https://github.com/wkh237/react-native-fetch-blob

Découvrez cet exemple: https://github.com/dailydrip/react-native-firebase-storage/blob/master/src/App.js#L43-L69

9
Franzé Jr.

Je poste mon code car c'était un peu frustrant pour moi:

Pour télécharger des images sur firebase.storage, vous devez télécharger les images en tant que blobs. Si vous ne savez pas ce que sont les blobs, ne vous inquiétez pas:BLOBsignifieBinaryLargeOBject.

Étape 1. 

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

Étape 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;

Étape 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)
    })
  })
}

Alors, comment appelez-vous cette fonction? Passer l’URI de l’image en premier argument. Dans mon cas, img1, img2, img3, où les variables pointant vers les URI des images, que je voulais télécharger, se trouvaient sur mon téléphone. Ils ressemblaient à '/Phone/Pics/imageToUpload.jpeg', etc.

En tant que second argument, vous pouvez passer 'image/jpeg' et le dernier argument est le nom que vous souhaitez donner à l'image. Choisissez le nom que vous aimez.

Mais Walter, j'ai plusieurs images et je veux les télécharger et je veux gérer le téléchargement correctement. Que se passe-t-il si un téléchargement réussit et l'autre pas?

Faites ceci alors:

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.
})
5
Walter Monecke

Vous pouvez utiliser react-native-firebase pour télécharger une image sur storge https://rnfirebase.io/

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

Pendant un certain temps, j'ai utilisé le Firebase JS SDK avec React Native. En utilisant cette bibliothèque, comme indiqué dans ce fil, vous devez utiliser une bibliothèque comme rn-fetch-blob (react-native-fetch-blob n'est plus maintenue) afin de fournir un blob à Firebase Storage put () méthode.

Récemment, j'ai commencé à utiliser React Native Firebase . Comme ils le disent sur leur site Web, "L’utilisation du SDK Firebase natif avec React Native Firebase vous permet de consommer des SDK de périphériques qui n’existent pas sur le SDK Firebase JS".

En utilisant React-Native-Firebase, vous n’avez besoin d’aucune bibliothèque supplémentaire pour télécharger des images vers Firebase Storage, et votre code devient beaucoup plus propre:

export const uploadImage = (path, mime = 'application/octet-stream') => {
  return new Promise((resolve, reject) => {
    const imageRef = firebase.storage().ref('images').child('filename.jpg');

    return imageRef.put(path, { contentType: mime })
      .then(() => {
        return imageRef.getDownloadURL();
      })
      .then(url => {
        resolve(url);
      })
      .catch(error => {
        reject(error);
        console.log('Error uploading image: ', error);
      });
  });
};
0
djmartins

si cela ne vous dérange pas d'utiliser cloudinary, je montre comment télécharger, puis obtenir l'URL téléchargée et la sauvegarder sur firebase https://medium.com/@ifeoluwaking24/how-to-upload-an- image-in-expo-react-native-à-firebase-using-cloudinary-24aac981c87

Vous pouvez aussi essayer le casse-croûte, mais assurez-vous d’ajouter votre cloud_name et upload_preset https://snack.expo.io/@ifeking/upload-to-cloudinary

0
ifeoluwa king