Comment obtenir une liste de tous les fichiers de Cloud Storage dans une application Firebase?
Je travaille sur le téléchargement d’images, tout fonctionne très bien, mais j’ai 100 images et j’aimerais toutes les afficher dans ma View, la liste complète des images dans un dossier me permettant de ce travail.
Firebase Storage ne contient actuellement aucun appel d'API pour répertorier tous les fichiers d'un dossier. Si vous avez besoin de cette fonctionnalité, vous devez stocker les métadonnées des fichiers (telles que les URL de téléchargement) à un emplacement où vous pouvez les répertorier. La base de données en temps réel Firebase est parfaite pour cela et vous permet également de partager facilement les URL avec d’autres.
Vous pouvez trouver un bon exemple (mais un peu impliqué) de cela dans notre FriendlyPix exemple d'application. Le code pertinent pour la version Web est ici , mais il existe également des versions pour iOS et Android.
Depuis mars 2017: Avec l’ajout de Fonctions Firebase Cloud , et l’intégration plus poussée de Firebase avec Google Cloud, c’est désormais possible.
Avec Cloud Functions, vous pouvez utiliser le package Google Cloud Node pour effectuer des opérations epic sur Cloud Storage. Vous trouverez ci-dessous un exemple qui récupère toutes les URL de fichiers dans un tableau à partir de Cloud Storage. Cette fonction sera déclenchée chaque fois que quelque chose est enregistré dans le stockage en nuage Google.
Note 1: Il s'agit d'une opération assez coûteuse en termes de calcul, car elle doit parcourir tous les fichiers d'un compartiment/dossier.
Note 2: J'ai écrit ceci à titre d'exemple, sans donner beaucoup de détails dans les promesses, etc. Juste pour donner une idée.
const functions = require('firebase-functions');
const gcs = require('@google-cloud/storage')();
// let's trigger this function with a file upload to google cloud storage
exports.fileUploaded = functions.storage.object().onChange(event => {
const object = event.data; // the object that was just uploaded
const bucket = gcs.bucket(object.bucket);
const signedUrlConfig = { action: 'read', expires: '03-17-2025' }; // this is a signed url configuration object
var fileURLs = []; // array to hold all file urls
// this is just for the sake of this example. Ideally you should get the path from the object that is uploaded :)
const folderPath = "a/path/you/want/its/folder/size/calculated";
bucket.getFiles({ prefix: folderPath }, function(err, files) {
// files = array of file objects
// not the contents of these files, we're not downloading the files.
files.forEach(function(file) {
file.getSignedUrl(signedUrlConfig, function(err, fileURL) {
console.log(fileURL);
fileURLs.Push(fileURL);
});
});
});
});
J'espère que cela vous donnera une idée générale. Pour de meilleurs exemples de fonctions cloud, consultez le référentiel Github de Google, rempli d’exemples de fonctions cloud pour Firebase . Consultez également leur Documentation de l'API Google Cloud Node
Comme il n'y a pas de langue dans la liste, je vais répondre à cela dans Swift. Nous vous recommandons vivement d’utiliser simultanément Firebase Storage et la base de données Firebase Realtime pour réaliser des listes de téléchargements:
Partagé:
// Firebase services
var database: FIRDatabase!
var storage: FIRStorage!
...
// Initialize Database, Auth, Storage
database = FIRDatabase.database()
storage = FIRStorage.storage()
...
// Initialize an array for your pictures
var picArray: [UIImage]()
Télécharger:
let fileData = NSData() // get data...
let storageRef = storage.reference().child("myFiles/myFile")
storageRef.putData(fileData).observeStatus(.Success) { (snapshot) in
// When the image has successfully uploaded, we get it's download URL
let downloadURL = snapshot.metadata?.downloadURL()?.absoluteString
// Write the download URL to the Realtime Database
let dbRef = database.reference().child("myFiles/myFile")
dbRef.setValue(downloadURL)
}
Télécharger:
let dbRef = database.reference().child("myFiles")
dbRef.observeEventType(.ChildAdded, withBlock: { (snapshot) in
// Get download URL from snapshot
let downloadURL = snapshot.value() as! String
// Create a storage reference from the URL
let storageRef = storage.referenceFromURL(downloadURL)
// Download the data, assuming a max size of 1MB (you can change this as necessary)
storageRef.dataWithMaxSize(1 * 1024 * 1024) { (data, error) -> Void in
// Create a UIImage, add it to the array
let pic = UIImage(data: data)
picArray.append(pic)
})
})
Pour plus d'informations, voir Zero to App: Develop with Firebase , et c'est le code source associé , pour obtenir un exemple pratique illustrant la procédure à suivre.
À compter de mai 2019, version 6.1. du SDK Firebase pour le stockage en nuage prend désormais en charge la liste de tous les objets d'un compartiment. Vous devez simplement appeler listAll() dans un Reference:
// Since you mentioned your images are in a folder,
// we'll create a Reference to that folder:
var storageRef = firebase.storage().ref("your_folder");
// Now we get the references of these images
storageRef.listAll().then(function(result) {
result.items.forEach(function(imageRef) {
// And finally display them
displayImage(imageRef);
});
}).catch(function(error) {
// Handle any errors
});
function displayImage(imageRef) {
imageRef.getDownloadURL().then(function(url) {
// TODO: Display the image on the UI
}).catch(function(error) {
// Handle any errors
});
}
Veuillez noter que, pour pouvoir utiliser cette fonction, vous devez vous inscrire à version 2 des règles de sécurité , qui peut être fait en faisant rules_version = '2'; la première ligne de vos règles de sécurité:
rules_version = '2';
service firebase.storage {
match /b/{bucket}/o {
match /{allPaths=**} {
Je vous recommande de vérifier docs pour plus de références.
De plus, conformément à configuration , à l'étape 5, ce script n'est pas autorisé pour Node.js, car require("firebase/app"); ne renverra pas firebase.storage() en tant que fonction. Ceci est uniquement réalisé avec import * as firebase from 'firebase/app';.
J'ai également rencontré ce problème lorsque je travaillais sur mon projet. Je souhaite vraiment qu'ils fournissent une méthode de fin api. Quoi qu'il en soit, voici comment je l'ai fait: Lorsque vous téléchargez une image sur le stockage Firebase, créez un objet et passez-le à la base de données Firebase en même temps. Cet objet contient l'URI de téléchargement de l'image.
trailsRef.putFile(file).addOnSuccessListener(new OnSuccessListener<UploadTask.TaskSnapshot>() {
@Override
public void onSuccess(UploadTask.TaskSnapshot taskSnapshot) {
Uri downloadUri = taskSnapshot.getDownloadUrl();
DatabaseReference myRef = database.getReference().child("trails").child(trail.getUnique_id()).Push();
Image img = new Image(trail.getUnique_id(), downloadUri.toString());
myRef.setValue(img);
}
});
Plus tard, lorsque vous souhaitez télécharger des images depuis un dossier, il vous suffit de parcourir les fichiers de ce dossier. Ce dossier porte le même nom que le "dossier" dans le stockage Firebase, mais vous pouvez le nommer comme vous le souhaitez. Je les mets dans un fil séparé.
@Override
protected List<Image> doInBackground(Trail... params) {
String trialId = params[0].getUnique_id();
mDatabase = FirebaseDatabase.getInstance().getReference();
mDatabase.child("trails").child(trialId).addValueEventListener(new ValueEventListener() {
@Override
public void onDataChange(DataSnapshot dataSnapshot) {
images = new ArrayList<>();
Iterator<DataSnapshot> iter = dataSnapshot.getChildren().iterator();
while (iter.hasNext()) {
Image img = iter.next().getValue(Image.class);
images.add(img);
}
isFinished = true;
}
@Override
public void onCancelled(DatabaseError databaseError) {
}
});
Maintenant, j'ai une liste d'objets contenant les URI de chaque image, je peux faire ce que je veux en faire. Pour les charger dans imageView, j'ai créé un autre thread.
@Override
protected List<Bitmap> doInBackground(List<Image>... params) {
List<Bitmap> bitmaps = new ArrayList<>();
for (int i = 0; i < params[0].size(); i++) {
try {
URL url = new URL(params[0].get(i).getImgUrl());
Bitmap bmp = BitmapFactory.decodeStream(url.openConnection().getInputStream());
bitmaps.add(bmp);
} catch (MalformedURLException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
}
return bitmaps;
}
Cela retourne une liste de bitmap, une fois celle-ci terminée, je les attache simplement à ImageView dans l'activité principale. Les méthodes ci-dessous sont @Override car j'ai des interfaces créées et j'écoute pour l'achèvement dans d'autres threads.
@Override
public void processFinishForBitmap(List<Bitmap> bitmaps) {
List<ImageView> imageViews = new ArrayList<>();
View v;
for (int i = 0; i < bitmaps.size(); i++) {
v = mInflater.inflate(R.layout.gallery_item, mGallery, false);
imageViews.add((ImageView) v.findViewById(R.id.id_index_gallery_item_image));
imageViews.get(i).setImageBitmap(bitmaps.get(i));
mGallery.addView(v);
}
}
Notez que je dois d'abord attendre que List Image soit renvoyée, puis appeler le thread pour qu'il fonctionne sur List Bitmap. Dans ce cas, l'image contient l'URI.
@Override
public void processFinish(List<Image> results) {
Log.e(TAG, "get back " + results.size());
LoadImageFromUrlTask loadImageFromUrlTask = new LoadImageFromUrlTask();
loadImageFromUrlTask.delegate = this;
loadImageFromUrlTask.execute(results);
}
J'espère que quelqu'un trouvera cela utile. Cela me servira également de ligne de guilde à l'avenir.
Une autre façon d’ajouter l’image à la base de données en utilisant la fonction cloud pour suivre chaque image téléchargée et la stocker dans la base de données.
exports.fileUploaded = functions.storage.object().onChange(event => {
const object = event.data; // the object that was just uploaded
const contentType = event.data.contentType; // This is the image Mimme type\
// Exit if this is triggered on a file that is not an image.
if (!contentType.startsWith('image/')) {
console.log('This is not an image.');
return null;
}
// Get the Signed URLs for the thumbnail and original image.
const config = {
action: 'read',
expires: '03-01-2500'
};
const bucket = gcs.bucket(event.data.bucket);
const filePath = event.data.name;
const file = bucket.file(filePath);
file.getSignedUrl(config, function(err, fileURL) {
console.log(fileURL);
admin.database().ref('images').Push({
src: fileURL
});
});
});
Code complet ici: https://Gist.github.com/bossly/fb03686f2cb1699c2717a0359880cf84
Une solution de contournement peut consister à créer un fichier (i.e list.txt) avec rien à l'intérieur. Dans ce fichier, vous pouvez définir les métadonnées personnalisées (c'est-à-dire une map <String, String>) avec la liste de toutes les URL du fichier.
Donc, si vous devez télécharger tous les fichiers d'un chargeur, vous devez d'abord télécharger les métadonnées du fichier list.txt, puis parcourir les données personnalisées et télécharger tous les fichiers avec les URL de la carte.
Pour le noeud js, j'ai utilisé ce code
const Storage = require('@google-cloud/storage');
const storage = new Storage({projectId: 'PROJECT_ID', keyFilename: 'D:\\keyFileName.json'});
const bucket = storage.bucket('project.appspot.com'); //gs://project.appspot.com
bucket.getFiles().then(results => {
const files = results[0];
console.log('Total files:', files.length);
files.forEach(file => {
file.download({destination: `D:\\${file}`}).catch(error => console.log('Error: ', error))
});
}).catch(err => {
console.error('ERROR:', err);
});
Faire cela avec JS
Vous pouvez les ajouter directement à votre conteneur div ou les pousser dans un tableau. Le ci-dessous vous montre comment les ajouter à votre div.
1) Lorsque vous stockez vos images dans le stockage, créez une référence à l'image dans votre base de données firebase avec la structure suivante
/images/(imageName){
description: "" ,
imageSrc : (imageSource)
}
2) Lorsque vous chargez votre document, extrayez toutes vos URL source de la base de données plutôt que du stockage avec le code suivant.
$(document).ready(function(){
var query = firebase.database().ref('images/').orderByKey();
query.once("value").then(function(snapshot){
snapshot.forEach(function(childSnapshot){
var imageName = childSnapshot.key;
var childData = childSnapshot.val();
var imageSource = childData.url;
$('#imageGallery').append("<div><img src='"+imageSource+"'/></div>");
})
})
});
Vous pouvez répertorier les fichiers dans un répertoire de stockage firebase à l'aide de la méthode listAll (). Pour utiliser cette méthode, vous devez implémenter cette version du stockage firebase. 'com.google.firebase: firebase-storage: 18.1.1'
https://firebase.google.com/docs/storage/Android/list-files
N'oubliez pas que mettez à niveau les règles de sécurité vers la version 2.
#In Python
import firebase_admin
from firebase_admin import credentials
from firebase_admin import storage
import datetime
import urllib.request
def image_download(url, name_img) :
urllib.request.urlretrieve(url, name_img)
cred = credentials.Certificate("credentials.json")
# Initialize the app with a service account, granting admin privileges
app = firebase_admin.initialize_app(cred, {
'storageBucket': 'YOURSTORAGEBUCKETNAME.appspot.com',
})
url_img = "gs://YOURSTORAGEBUCKETNAME.appspot.com/"
bucket_1 = storage.bucket(app=app)
image_urls = []
for blob in bucket_1.list_blobs():
name = str(blob.name)
#print(name)
blob_img = bucket_1.blob(name)
X_url = blob_img.generate_signed_url(datetime.timedelta(seconds = 300), method='GET')
#print(X_url)
image_urls.append(X_url)
PATH = ['Where you want to save the image']
for path in PATH:
i = 1
for url in image_urls:
name_img = str(path + "image"+str(i)+".jpg")
image_download(url, name_img)
i+=1
En réalité, cela est possible, mais uniquement avec un API Google Cloud au lieu de celui de Firebase. C'est parce qu'un stockage Firebase est un Google Cloud Storage Bucket auquel on peut facilement accéder avec les API Google Cloud, mais vous devez utiliser OAuth pour l'authentification au lieu de celui de Firebase.
J'ai fait face au même problème, le mien est encore plus compliqué.
L'administrateur téléchargera les fichiers audio et pdf dans la mémoire:
fichiers audios/season1, season2 .../class1, class 2/.mp3
livres/fichiers .pdf
L'application Android doit obtenir la liste des sous-dossiers et des fichiers.
La solution intercepte l'événement de téléchargement sur le stockage et crée la même structure sur le magasin à l'aide de la fonction cloud.
Étape 1: Créez manuellement la collection 'stockage' et la documentation 'audios/livres' sur firestore
Étape 2: Configuration de la fonction cloud
Peut prendre environ 15 minutes: https://www.youtube.com/watch?v=DYfP-UIKxH0&list=PLl-K7zZEsYLkPZHe41m4jfAxUi0JjLgSM&index=1
Étape 3: Capturez un événement de téléchargement à l'aide de la fonction cloud
import * as functions from 'firebase-functions';
import * as admin from 'firebase-admin';
admin.initializeApp(functions.config().firebase);
const path = require('path');
export const onFileUpload = functions.storage.object().onFinalize(async (object) => {
let filePath = object.name; // File path in the bucket.
const contentType = object.contentType; // File content type.
const metageneration = object.metageneration; // Number of times metadata has been generated. New objects have a value of 1.
if (metageneration !== "1") return;
// Get the file name.
const fileName = path.basename(filePath);
filePath = filePath.substring(0, filePath.length - 1);
console.log('contentType ' + contentType);
console.log('fileName ' + fileName);
console.log('filePath ' + filePath);
console.log('path.dirname(filePath) ' + path.dirname(filePath));
filePath = path.dirname(filePath);
const pathArray = filePath.split("/");
let ref = '';
for (const item of pathArray) {
if (ref.length === 0) {
ref = item;
}
else {
ref = ref.concat('/sub/').concat(item);
}
}
ref = 'storage/'.concat(ref).concat('/sub')
admin.firestore().collection(ref).doc(fileName).create({})
.then(result => {console.log('onFileUpload:updated')})
.catch(error => {
console.log(error);
});
});
Étape 4: Récupérer la liste des dossiers/fichiers sur l’application Android à l’aide de Firestore
private static final String STORAGE_DOC = "storage/";
public static void getMediaCollection(String path, OnCompleteListener onCompleteListener) {
String[] pathArray = path.split("/");
String doc = null;
for (String item : pathArray) {
if (TextUtils.isEmpty(doc)) doc = STORAGE_DOC.concat(item);
else doc = doc.concat("/sub/").concat(item);
}
doc = doc.concat("/sub");
getFirestore().collection(doc).get().addOnCompleteListener(onCompleteListener);
}
Étape 5: Obtenir l'URL de téléchargement
public static void downloadMediaFile(String path, OnCompleteListener<Uri> onCompleteListener) {
getStorage().getReference().child(path).getDownloadUrl().addOnCompleteListener(onCompleteListener);
}
Note
Nous devons mettre "sous" collection à chaque article car firestore ne permet pas de récupérer la liste de collection.
Il m'a fallu 3 jours pour trouver la solution et, espérons-le, 3 heures au plus.
À votre santé.
Vous pouvez utiliser le code suivant. Ici, je télécharge l'image sur le stockage firebase, puis je stocke l'URL de téléchargement d'image dans la base de données firebase.
//getting the storage reference
StorageReference sRef = storageReference.child(Constants.STORAGE_PATH_UPLOADS + System.currentTimeMillis() + "." + getFileExtension(filePath));
//adding the file to reference
sRef.putFile(filePath)
.addOnSuccessListener(new OnSuccessListener<UploadTask.TaskSnapshot>() {
@Override
public void onSuccess(UploadTask.TaskSnapshot taskSnapshot) {
//dismissing the progress dialog
progressDialog.dismiss();
//displaying success toast
Toast.makeText(getApplicationContext(), "File Uploaded ", Toast.LENGTH_LONG).show();
//creating the upload object to store uploaded image details
Upload upload = new Upload(editTextName.getText().toString().trim(), taskSnapshot.getDownloadUrl().toString());
//adding an upload to firebase database
String uploadId = mDatabase.Push().getKey();
mDatabase.child(uploadId).setValue(upload);
}
})
.addOnFailureListener(new OnFailureListener() {
@Override
public void onFailure(@NonNull Exception exception) {
progressDialog.dismiss();
Toast.makeText(getApplicationContext(), exception.getMessage(), Toast.LENGTH_LONG).show();
}
})
.addOnProgressListener(new OnProgressListener<UploadTask.TaskSnapshot>() {
@Override
public void onProgress(UploadTask.TaskSnapshot taskSnapshot) {
//displaying the upload progress
double progress = (100.0 * taskSnapshot.getBytesTransferred()) / taskSnapshot.getTotalByteCount();
progressDialog.setMessage("Uploaded " + ((int) progress) + "%...");
}
});
Maintenant, pour récupérer toutes les images stockées dans la base de données firebase, vous pouvez utiliser
//adding an event listener to fetch values
mDatabase.addValueEventListener(new ValueEventListener() {
@Override
public void onDataChange(DataSnapshot snapshot) {
//dismissing the progress dialog
progressDialog.dismiss();
//iterating through all the values in database
for (DataSnapshot postSnapshot : snapshot.getChildren()) {
Upload upload = postSnapshot.getValue(Upload.class);
uploads.add(upload);
}
//creating adapter
adapter = new MyAdapter(getApplicationContext(), uploads);
//adding adapter to recyclerview
recyclerView.setAdapter(adapter);
}
@Override
public void onCancelled(DatabaseError databaseError) {
progressDialog.dismiss();
}
});
Pour plus de détails vous pouvez voir mon post Exemple de stockage Firebase.
Étendre la réponse de Rosário Pereira Fernandes , pour une solution JavaScript:
- Installez firebase sur votre machine
npm install -g firebase-tools
- Sur firebase init, définissez
JavaScriptcomme langue par défaut - Sur le dossier racine du projet créé, exécutez les installations npm
npm install --save firebase
npm install @google-cloud/storage
npm install @google-cloud/firestore
... <any other dependency needed>
- Ajouter des dépendances non par défaut sur votre projet comme
"firebase": "^6.3.3",
"@google-cloud/storage": "^3.0.3"
functions/package.json
{
"name": "functions",
"description": "Cloud Functions for Firebase",
"scripts": {
"lint": "eslint .",
"serve": "firebase serve --only functions",
"Shell": "firebase functions:Shell",
"start": "npm run Shell",
"deploy": "firebase deploy --only functions",
"logs": "firebase functions:log"
},
"engines": {
"node": "10"
},
"dependencies": {
"@google-cloud/storage": "^3.0.3",
"firebase": "^6.3.3",
"firebase-admin": "^8.0.0",
"firebase-functions": "^3.1.0"
},
"devDependencies": {
"eslint": "^5.12.0",
"eslint-plugin-promise": "^4.0.1",
"firebase-functions-test": "^0.1.6"
},
"private": true
}
- Créer une sorte de fonction
listAll
index.js
var serviceAccount = require("./key.json");
const functions = require('firebase-functions');
const images = require('./images.js');
var admin = require("firebase-admin");
admin.initializeApp({
credential: admin.credential.cert(serviceAccount),
databaseURL: "https://<my_project>.firebaseio.com"
});
const bucket = admin.storage().bucket('<my_bucket>.appspot.com')
exports.getImages = functions.https.onRequest((request, response) => {
images.getImages(bucket)
.then(urls => response.status(200).send({ data: { urls } }))
.catch(err => console.error(err));
})
images.js
module.exports = {
getImages
}
const query = {
directory: 'images'
};
function getImages(bucket) {
return bucket.getFiles(query)
.then(response => getUrls(response))
.catch(err => console.error(err));
}
function getUrls(response) {
const promises = []
response.forEach( files => {
files.forEach (file => {
promises.Push(getSignedUrl(file));
});
});
return Promise.all(promises).then(result => getParsedUrls(result));
}
function getSignedUrl(file) {
return file.getSignedUrl({
action: 'read',
expires: '09-01-2019'
})
}
function getParsedUrls(result) {
return JSON.stringify(result.map(mediaLink => createMedia(mediaLink)));
}
function createMedia(mediaLink) {
const reference = {};
reference.mediaLink = mediaLink[0];
return reference;
}
- Exécutez
firebase deploypour télécharger votre fonction cloud - Appel votre fonction personnalisée à partir de votre application
build.gradle
dependencies {
...
implementation 'com.google.firebase:firebase-functions:18.1.0'
...
}
kotlin class
private val functions = FirebaseFunctions.getInstance()
val cloudFunction = functions.getHttpsCallable("getImages")
cloudFunction.call().addOnSuccessListener {...}
En ce qui concerne le développement ultérieur de cette fonctionnalité, j'ai rencontré quelques problèmes qui pourraient trouver ici .
J'ai donc eu un projet qui nécessitait le téléchargement d'actifs à partir du stockage firebase, j'ai donc dû résoudre ce problème moi-même. Voici comment :
1- Commencez par créer des données de modèle, par exemple class Choice{}. Dans cette classe, définissez une variable de type String nommée image name afin que ce soit comme cela.
class Choice {
.....
String imageName;
}
2- A partir d'une base de données/base de données firebase, allez et attribuez un code en dur aux noms des images. Ainsi, si vous avez un nom d'image appelé Apple.png, créez l'objet à
Choice myChoice = new Choice(...,....,"Apple.png");
3- Maintenant, obtenez le lien pour les actifs dans votre stockage firebase qui sera quelque chose comme ça
gs://your-project-name.appspot.com/
4- Enfin, initialisez votre référence de stockage firebase et commencez à récupérer les fichiers par une boucle comme celle-ci.
storageRef = storage.getReferenceFromUrl(firebaseRefURL).child(imagePath);
File localFile = File.createTempFile("images", "png");
storageRef.getFile(localFile).addOnSuccessListener(new OnSuccessListener<FileDownloadTask.TaskSnapshot>() {
@Override
public void onSuccess(FileDownloadTask.TaskSnapshot taskSnapshot) {
//Dismiss Progress Dialog\\
}
5- c'est tout