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.