Carica file utilizzando React Native e Firebase (Parte 3)

Originariamente pubblicato in Medium.

Panoramica

Benvenuti alla parte 3 di questa serie. Se non hai seguito le parti precedenti, considera di leggerle prima di iniziare qui.

  • Nella parte 1, abbiamo imparato come aggiungere e configurare Firebase al tuo progetto React Native.

  • Nella parte 2, abbiamo imparato come aggiungere il selettore di immagini native-reattive e abbiamo imparato come impostare le regole di archiviazione di Firebase.

  • In questa parte impareremo passo dopo passo come caricare file dalla libreria del nostro dispositivo e salvarli in un bucket Firebase Storage.

Puoi trovare il codice sorgente completo nel mio Github.

Diamoci dentro.

1. Aggiungi spazio di archiviazione Firebase

Inizia aggiungendo il modulo Firebase Storage. Questo modulo dipende da @react-native-firebase/app che hai installato nella parte 1.

yarn add @react-native-firebase/storage

Devi aggiungere questa nuova dipendenza per iOS.

cd ios
pod install

Non è disponibile alcuna configurazione aggiuntiva per Android.

Devi ricostruire le app nei simulatori per iOS e Android. Uccidi il tuo bundler metro e ripeti il ​​progetto.

npx react-native run-ios
npx react-native run-android

Aggiungi il codice seguente per creare una nuova istanza di archiviazione in utils/index.js .

import storage from '@react-native-firebase/storage';

export const FireBaseStorage = storage();

2. Testare l'integrazione dello storage Firebase con React Native

È ora di testare l'integrazione di Firebase Storage con la tua app React Native.

Aggiungi il seguente codice a components/UploadFile/index.js .

// ..
import { imagePickerOptions, FireBaseStorage } from '../../utils';
const UploadFile = () => {
  // ..
  return (
    <Container>

      {alert(JSON.stringify(FireBaseStorage))}

    </Container>
  );
};

In quanto sopra, hai importato il FireBaseStorage e renderà il suo output usando il alert funzione.

Aggiorna il tuo simulatore. Dovresti visualizzare un avviso popup contenente i dettagli dell'applicazione Firebase Storage.

3. Carica i file nel bucket Firebase Storage

Come visto nella parte 2, Image Picker restituisce un oggetto risposta con un parametro che punta alla posizione del file nel dispositivo. Questo parametro è denominato uri in iOS e path su Android.

A seguito di questa osservazione, avrai bisogno di un semplice processo in tre passaggi per caricare i file in un bucket Firebase Storage.

  • Ottieni il percorso locale del file dal dispositivo:iOS e Android.

  • Allega un riferimento di archiviazione al file per Firebase Storage.

  • Carica il file nel bucket Firebase Storage.

3.1. Ottieni il percorso di origine del file locale

Inizia aggiungendo la logica per il primo passaggio. Aggiungi la seguente funzione in utils/index.js .

import { Platform } from 'react-native';

export const getFileLocalPath = response => {
  const { path, uri } = response;
  return Platform.OS === 'android' ? path : uri;
};

La funzione sopra destruttura path e uri parametri dall'oggetto risposta di Image Picker, quindi restituisce uno di questi parametri a seconda della piattaforma (iOS o Android) utilizzando Platform da React Native.

Ora puoi testare l'output di getFileLocalPath .

Per farlo, aggiungi getFileLocalPath alle importazioni in UploadFile/index.js .

import { imagePickerOptions, getFileLocalPath } from '../../utils';

Quindi, all'interno del uploadFile funzione aggiunge il seguente registro della console.

const uploadFile = () => {
  ImagePicker.launchImageLibrary(imagePickerOptions, response => {
    if (response.didCancel) {
      // ..
    } else {
      setImageURI({ uri: response.uri });
      console.log(getFileLocalPath(response));
    }
  });
};

Assicurati di abilitare la modalità di debug e quindi aggiorna il simulatore. Quindi premi il New Post pulsante per aggiungere una nuova foto. Dovresti vedere l'origine del file registrato nel tuo Chrome Dev Console .

3.2. Allega un riferimento di archiviazione al file

I tuoi file sono archiviati nel bucket. I file sono presentati in una struttura gerarchica, proprio come il file system sul disco rigido locale.

Creando un riferimento a un file, la tua app vi accede. Maggiori informazioni sui riferimenti nei documenti Firebase.

Aggiungi la seguente funzione in utils/index.js .

export const createStorageReferenceToFile = response => {
  const { fileName } = response;
  return FireBaseStorage.ref(fileName);
};

Il createStorageReferenceToFile la funzione destruttura il fileName dalla risposta di Selezione immagini. Quindi restituisce un riferimento di archiviazione utilizzando FireBaseStorage.ref() .

Puoi guardare l'output della funzione sopra nel Chrome Dev Console . Innanzitutto, importa createStorageReferenceToFile in UploadFile/index.js .

import { imagePickerOptions, createStorageReferenceToFile } from '../../utils';

Quindi, all'interno del uploadFile funzione aggiunge il seguente registro della console.

onst uploadFile = () => {
  ImagePicker.launchImageLibrary(imagePickerOptions, response => {
    if (response.didCancel) {
      // ..
    } else {
      setImageURI({ uri: response.uri });
      console.log(
        'My file storage reference is: ',
        createStorageReferenceToFile(response)
      );
    }
  });
};

Aggiorna il simulatore e aggiungi una nuova foto. Dovresti vedere il riferimento di archiviazione registrato nel tuo Chrome Dev Console .

3.3. Carica un file nel bucket Firebase Storage

Questo è l'ultimo passaggio per inviare il file al tuo bucket di archiviazione Firebase.
Aggiungi la seguente funzione in utils/index.js .

export const uploadFileToFireBase = imagePickerResponse => {
  const fileSource = getFileLocalPath(imagePickerResponse);
  const storageRef = createStorageReferenceToFile(imagePickerResponse);
  return storageRef.putFile(fileSource);
};

La funzione di cui sopra incorpora le due funzioni precedenti (cioè getFileLocalPath e createStorageReferenceToFile ) per creare rispettivamente il percorso del file e il riferimento di archiviazione.

Quindi, invia il file a Firebase Storage utilizzando il putFile metodo. Altro su putFile nei documenti ufficiali di Firebase.

Il codice finale nel tuo utils/index.js ora dovrebbe assomigliare a questo.

import { Platform } from 'react-native';

import storage from '@react-native-firebase/storage';

export const FireBaseStorage = storage();

export const imagePickerOptions = {
  noData: true,
};

const getFileLocalPath = response => {
  const { path, uri } = response;
  return Platform.OS === 'android' ? path : uri;
};

const createStorageReferenceToFile = response => {
  const { fileName } = response;
  return FireBaseStorage.ref(fileName);
};

export const uploadFileToFireBase = response => {
  const fileSource = getFileLocalPath(response);
  const storageRef = createStorageReferenceToFile(response);
  return storageRef.putFile(fileSource);
};

Importa uploadFileToFireBase in UploadFile/index.js .

import { imagePickerOptions, uploadFileToFireBase } from '../../utils';

Quindi aggiungi le seguenti righe di codice all'interno di uploadFile funzione.

const uploadFile = () => {
  ImagePicker.launchImageLibrary(imagePickerOptions, response => {
    if (response.didCancel) {
      // ..
    } else {
      setImageURI({ uri: response.uri });
      // Remove this
      console.log(
        'My file storage reference is: ',
        createStorageReferenceToFile(response)
      );
      // Add this
      Promise.resolve(uploadFileToFireBase(response));

    }
  });
};

uploadFileToFirebase restituisce una promessa JavaScript tramite putFile . Tutto quello che dovevamo fare era risolverlo e restituire il risultato.

Il codice finale nel tuo UploadFile/index.js ora dovrebbe assomigliare a questo.

import React, { useState } from 'react';
import { Button, StatusBar } from 'react-native';

import ImagePicker from 'react-native-image-picker';

import { imagePickerOptions, uploadFileToFireBase } from '../../utils';
import { Container, Picture, Skeleton, ProgressBar } from '../../styles';

const UploadFile = () => {
  const [imageURI, setImageURI] = useState(null);


  const uploadFile = () => {
    ImagePicker.launchImageLibrary(imagePickerOptions, imagePickerResponse => {
      const { didCancel, error } = imagePickerResponse;
      if (didCancel) {
        alert('Post canceled');
      } else if (error) {
        alert('An error occurred: ', error);
      } else {
        setImageURI({ uri: downloadURL });
        Promise.resolve(uploadFileToFireBase(imagePickerResponse))
      }
    });
  };

  return (
    <Container>
      <StatusBar barStyle="dark-content" />
      <Button title="New Post" onPress={uploadFile} color="green" />
      {imageURI && <Picture source={imageURI} />}
    </Container>
  );
};

export default UploadFile;

È ora di testare il caricamento del file su Firebase Storage. Aggiorna il tuo simulatore.

Quindi premi New Post per aggiungere una nuova foto.

Vai alla tua console Firebase. Nella barra delle schede a sinistra, fai clic su Storage scheda. Dovresti vedere la foto salvata nella scheda File (figura sotto).

Et voilà.

Conclusione

In questo articolo, hai aggiunto Firebase Storage e l'hai integrato con la tua app React Native. Hai quindi seguito una procedura in tre passaggi per ottenere il percorso locale del file, creato un riferimento di archiviazione per esso e caricato su Firebase Storage.

La parte successiva è un bonus super cool. Ti mostrerò come monitorare l'avanzamento del caricamento della tua foto, visualizzare una barra di avanzamento sullo schermo e recuperare la foto memorizzata nel tuo bucket. Puoi leggere la parte 4 qui.