Wie erhalte ich eine Liste aller Dateien im Cloud-Speicher in einer Firebase-App?


101

Ich arbeite daran, Bilder hochzuladen, alles funktioniert hervorragend, aber ich habe 100 Bilder und möchte alle in meinem Viewanzeigen. Da ich die vollständige Liste der Bilder in einem Ordner erhalte, kann ich keine API dafür finden Arbeit.


Können Sie eine vollständige Codelösung veröffentlichen?
ISS

Antworten:


92

Seit Firebase SDKs für JavaScript Release 6.1 , iOS Release 6.4 und Android Release Version 18.1 verfügen alle über eine Methode zum Auflisten von Dateien.

Die Dokumentation ist bisher etwas spärlich, daher empfehle ich, Rosários Antwort für Details zu lesen.


Vorherige Antwort, da dieser Ansatz manchmal noch nützlich sein kann:

Derzeit gibt es im Firebase SDK keinen API-Aufruf zum Auflisten aller Dateien in einem Cloud Storage-Ordner innerhalb einer App. Wenn Sie solche Funktionen benötigen, sollten Sie die Metadaten der Dateien (z. B. die Download-URLs) an einem Ort speichern, an dem Sie sie auflisten können. Die Firebase Realtime Database und der Cloud Firestore sind dafür perfekt geeignet und ermöglichen es Ihnen, die URLs auch problemlos mit anderen zu teilen.

Ein gutes (aber etwas kompliziertes) Beispiel dafür finden Sie in unserer FriendlyPix- Beispiel-App. Der relevante Code für die Webversion ist hier , aber es gibt auch Versionen für iOS und Android.


8
Wirst du dies auf Firebase implementieren?
Pier

55
Wenn ich die URLs aller meiner Speicherdateien in der Echtzeitdatenbank behalten muss, wozu dient dann die Ordnerhierarchie im Speicher? Alle Dateien mit eindeutigem Namen können auf derselben Ebene gespeichert werden, ohne dass Ordner erforderlich sind !!! Sie sehen, das ist ein Widerspruch !!! Grundsätzlich sind die Hauptgründe für die Ordnerhierarchie Platzhalterabfragen ohne vorherige Kenntnis der Inhalte eines Ordners, die Sie nicht angemessen bereitstellen.
Abedfar

7
Firebase Storage basiert auf Google Cloud Storage, das genau das tut, was Sie sagen: Es speichert alle Objekte in einer langen Liste. Firebase Storage modelliert darüber hinaus eine Hierarchie, zugegebenermaßen als undichte Abstraktion. Die häufigsten Gründe für die Verwendung von Ordnern in Firebase Storage sind die logische Datentrennung und das Erstellen von Sicherheitsregeln basierend auf der Ordnerstruktur.
Frank van Puffelen

8
Was passiert, wenn die Benutzerverbindung nach dem Hochladen und vor dem Speichern von downloadUrl in der Datenbank unterbrochen wird? Wie erkennen wir in diesem Fall die vorhandenen Dateien in einem Ordner?
Oswaldo

10
Was ist mit jetzt ? Gibt es dafür 2018 eine direkte API?
Diaz Diaz

46

Ab Mai 2019 unterstützt Version 6.1.0 des Firebase SDK für Cloud-Speicher das Auflisten aller Objekte aus einem Bucket. Sie müssen nur anrufen listAll()in a 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
      });
    }

Bitte beachten Sie , dass Sie sich für die Verwendung dieser Funktion für Version 2 der Sicherheitsregeln anmelden müssen. Dies kann in rules_version = '2';der ersten Zeile Ihrer Sicherheitsregeln erfolgen:

    rules_version = '2';
    service firebase.storage {
      match /b/{bucket}/o {
        match /{allPaths=**} {

Ich würde empfehlen, die Dokumente für weitere Referenz zu überprüfen .

Gemäß Setup ist dieses Skript in Schritt 5 nicht zulässig, Node.jsda require("firebase/app");es nicht firebase.storage()als Funktion zurückgegeben wird. Dies wird nur mit erreicht import * as firebase from 'firebase/app';.



@azheen Ich nehme an, Sie verwenden Flutter. Leider ist dies bei Flutterfire noch nicht verfügbar. Sie können es zu diesem Thema
Rosário Pereira Fernandes

33

Seit März 2017: Mit Firebase Cloud-Funktionen und der tieferen Integration von Firebase in Google Cloud ist dies jetzt möglich.

Mit Cloud-Funktionen können Sie das Google Cloud Node-Paket verwenden, um epische Vorgänge im Cloud-Speicher auszuführen. Im Folgenden finden Sie ein Beispiel, mit dem alle Datei-URLs aus dem Cloud-Speicher in ein Array abgerufen werden. Diese Funktion wird jedes Mal ausgelöst, wenn etwas im Google Cloud-Speicher gespeichert wird.

Hinweis 1 : Dies ist eine ziemlich rechenintensive Operation, da alle Dateien in einem Bucket / Ordner durchlaufen werden müssen.

Anmerkung 2 : Ich habe dies nur als Beispiel geschrieben, ohne viel Detail in Versprechen usw. zu stecken. Nur um eine Idee zu geben.

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);
      });
    });

  });

});

Ich hoffe, das gibt Ihnen die allgemeine Idee. Weitere Beispiele für bessere Cloud-Funktionen finden Sie in Googles Github-Repo mit Beispielen für Cloud-Funktionen für Firebase . Überprüfen Sie auch die aus Google Cloud Knoten API - Dokumentation


35
Das ist zu dumm, dass Firebase diese API nicht einfach in Firebase SDK hinzufügt
Thaina

4
@ Thaina Ich denke, dass es mit Skalierung zu tun hat. Sie müssen nicht nur an kleine Apps denken, sondern auch an Riesen. Was ist, wenn ein Pfad Tausende von Dateien enthält? Dieser Vorgang würde viel Rechenleistung verbrauchen und für jeden scheinbar unschuldigen und einfachen Aufruf auf eine Datenbank verweisen müssen. Je tiefer ich mich mit der Verwendung von Firebase in großem Maßstab befasst habe, desto besser verstehe ich, warum bestimmte Kompromisse eingegangen wurden.
Johnozbay

1
In dieser gcs-API gibt es auch Grenzen und Paginierungen. Es liegt dann in der Verantwortung des API-Verbrauchers, das Risiko zu kennen und zu versuchen, eine skalierbare Methode auszuwählen. Aber übervorsichtig zu sein und unsere Option zu kürzen, ist keine gute Entscheidung. Sie können für schwere Last berechnen, wenn es wirklich kostet
Thaina

1
Dies sollte die beste Antwort sein! Danke für die Warnung. Derzeit unterscheidet sich die Syntax von Ihrem Beispiel. Anstatt einen Rückruf als Parameter zu senden, müssen Sie .thenthis.bucket .getFiles({ prefix: 'path/to/directory' }) .then((arr) => {})
JP Lew

1
@JPLew Gern geschehen :) In Bezug auf die Syntax geben sie nur dann ein Versprechen zurück, wenn der Rückruf ausgeschlossen ist. So können Sie sicher verwenden, was Sie bevorzugen. Siehe Beispiel hier: cloud.google.com/nodejs/docs/reference/storage/1.3.x/…
Johnozbay

20

Da keine Sprache aufgeführt ist, werde ich dies in Swift beantworten. Wir empfehlen dringend, Firebase Storage und die Firebase Realtime Database zusammen zu verwenden, um Listen mit Downloads zu erstellen:

Geteilt:

// 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]()

Hochladen:

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

Herunterladen:

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

Weitere Informationen dazu finden Sie unter Zero to App: Entwickeln mit Firebase und dem zugehörigen Quellcode .


3
Aber wie bekomme ich das gleiche Ergebnis mit Cloud Firestore?)
Max Kraev

5

Eine Problemumgehung kann darin bestehen, eine Datei (dh list.txt) zu erstellen, in der sich nichts befindet. In dieser Datei können Sie die benutzerdefinierten Metadaten (dh eine Map <String, String>) mit der Liste aller URLs der Datei festlegen.
Wenn Sie also alle Dateien in einem Fodler herunterladen müssen, laden Sie zuerst die Metadaten der Datei list.txt herunter, durchlaufen dann die benutzerdefinierten Daten und laden alle Dateien mit den URLs in der Map herunter.


4
Ja, dies ist eine Problemumgehung, kann jedoch keine gleichzeitigen Schreibvorgänge in eine einzelne list.txt verarbeiten
Linquize

5

Ich bin auch auf dieses Problem gestoßen, als ich an meinem Projekt gearbeitet habe. Ich wünschte wirklich, sie bieten eine End-API-Methode. Wie auch immer, so habe ich es gemacht: Wenn Sie ein Bild in den Firebase-Speicher hochladen, erstellen Sie ein Objekt und übergeben Sie dieses Objekt gleichzeitig an die Firebase-Datenbank. Dieses Objekt enthält die Download-URI des Bildes.

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);
        }
    });

Wenn Sie später Bilder aus einem Ordner herunterladen möchten, durchlaufen Sie einfach die Dateien unter diesem Ordner. Dieser Ordner hat denselben Namen wie der "Ordner" im Firebase-Speicher, Sie können ihn jedoch beliebig benennen. Ich habe sie in einen separaten Thread gestellt.

 @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) {

        }
    });

Jetzt habe ich eine Liste von Objekten, die die URIs für jedes Bild enthalten. Ich kann damit machen, was ich will. Um sie in imageView zu laden, habe ich einen weiteren Thread erstellt.

    @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;
}

Dies gibt eine Liste von Bitmap zurück. Wenn es fertig ist, hänge ich sie einfach in der Hauptaktivität an ImageView an. Die folgenden Methoden sind @Override, da ich Schnittstellen erstellt habe und auf die Fertigstellung in anderen Threads warte.

    @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);
    }
}

Beachten Sie, dass ich warten muss, bis List Image zurückgegeben wird, und dann den Thread aufrufen muss, um an List Bitmap zu arbeiten. In diesem Fall enthält Image den 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);
}

Hoffentlich findet es jemand hilfreich. Es wird auch in Zukunft als Gildenlinie für mich dienen.


5

Eine weitere Möglichkeit, das Bild mithilfe der Cloud-Funktion zur Datenbank hinzuzufügen, um jedes hochgeladene Bild zu verfolgen und in der Datenbank zu speichern.

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
        });
    });
});

Vollständiger Code hier: https://gist.github.com/bossly/fb03686f2cb1699c2717a0359880cf84


5

Für den Knoten js habe ich diesen Code verwendet

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);
  });

Du hast gerade meinen Tag gerettet !!
Hugo Blanc

4

Sie können Dateien in einem Verzeichnis des Firebase-Speichers mit der Methode listAll () auflisten. Um diese Methode verwenden zu können, müssen Sie diese Version des Firebase-Speichers implementieren. 'com.google.firebase: firebase-storage: 18.1.1'

https://firebase.google.com/docs/storage/android/list-files

Beachten Sie, dass Sie die Sicherheitsregeln auf Version 2 aktualisieren.


3

Dies ist tatsächlich möglich, jedoch nur mit einer Google Cloud-API anstelle einer von Firebase. Dies liegt daran, dass ein Firebase-Speicher ein Google Cloud-Speicher-Bucket ist, der mit den Google Cloud-APIs leicht erreichbar ist. Sie müssen jedoch OAuth für die Authentifizierung anstelle des Firebase-Speichers verwenden .


3

Ich hatte das gleiche Problem, meins ist noch komplizierter.

Der Administrator lädt Audio- und PDF-Dateien in den Speicher hoch:

  • Audios / Staffel1, Staffel2 ... / Klasse1, Klasse 2 / .mp3 Dateien

  • Bücher / PDF-Dateien

Die Android-App muss die Liste der Unterordner und Dateien abrufen.

Die Lösung fängt das Upload-Ereignis im Speicher ab und erstellt mithilfe der Cloud-Funktion dieselbe Struktur im Firestore.

Schritt 1: Erstellen Sie manuell eine 'Speicher'-Sammlung und ein' Audios / Bücher'-Dokument im Firestore

Geben Sie hier die Bildbeschreibung ein

Schritt 2: Cloud-Funktion einrichten

Könnte ungefähr 15 Minuten dauern: https://www.youtube.com/watch?v=DYfP-UIKxH0&list=PLl-K7zZEsYLkPZHe41m4jfAxUi0JjLgSM&index=1

Schritt 3: Catch-Upload-Ereignis mithilfe der Cloud-Funktion abfangen

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);
                });
    });

Schritt 4: Rufen Sie mithilfe des Firestores eine Liste der Ordner / Dateien in der Android-App ab

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);
    }

Schritt 5: Download-URL abrufen

public static void downloadMediaFile(String path, OnCompleteListener<Uri> onCompleteListener) {
        getStorage().getReference().child(path).getDownloadUrl().addOnCompleteListener(onCompleteListener);
    }

Hinweis

Wir müssen jedem Element eine "Unter" -Sammlung hinzufügen, da der Firestore das Abrufen der Sammlungsliste nicht unterstützt.

Ich habe 3 Tage gebraucht, um die Lösung herauszufinden, hoffentlich brauchen Sie höchstens 3 Stunden.

Prost.


Genau das gleiche Szenario, an dem ich arbeite. Kann mir jemand einen Flattercode schicken? weil ich nur einen Stapel von Dateien hochladen musste, nicht zum Herunterladen.
Mahesh Peri

Flutter SDK (Dartsprache)
Mahesh Peri

1
Cloud Firestore unterstützt noch kein Flattern. firebase.google.com/docs/firestore . Der schnelle Ansatz besteht darin, eine API mithilfe der Cloud-Funktion zu schreiben und dann wie gewohnt über restful auf diese API zuzugreifen. Es kann einige Stunden dauern, bis Sie sich mit der Cloud-Funktion vertraut gemacht haben. Diese Schulungsvideos sind recht einfach zu schlucken: D youtube.com/…
thanhbinh84

3

Erweiterung der Antwort von Rosário Pereira Fernandes für eine JavaScript-Lösung:

  1. Installieren Sie Firebase auf Ihrem Computer
npm install -g firebase-tools

  1. Auf Firebase-Init JavaScriptals Standardsprache festgelegt
  2. Führen Sie im Stammordner des erstellten Projekts npm installs aus
   npm install --save firebase
   npm install @google-cloud/storage
   npm install @google-cloud/firestore
   ... <any other dependency needed>
  1. Fügen Sie nicht standardmäßige Abhängigkeiten zu Ihrem Projekt hinzu
    "firebase": "^6.3.3",
    "@google-cloud/storage": "^3.0.3"

Funktionen / 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
}

  1. Erstellen Sie eine Art listAllFunktion

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;
}

  1. Ausführen firebase deploy, um Ihre Cloud-Funktion hochzuladen
  2. Rufen Sie Ihre benutzerdefinierte Funktion über Ihre App auf

build.gradle

dependencies {
...
  implementation 'com.google.firebase:firebase-functions:18.1.0'
...
}

Kotlin-Klasse

  private val functions = FirebaseFunctions.getInstance()
  val cloudFunction = functions.getHttpsCallable("getImages")
  cloudFunction.call().addOnSuccessListener {...}

In Bezug auf die Weiterentwicklung dieser Funktion bin ich auf einige Probleme gestoßen, die hier auftreten könnten .


2

Um dies mit JS zu tun

Sie können sie direkt an Ihren div-Container anhängen oder an ein Array senden. Das Folgende zeigt Ihnen, wie Sie sie an Ihre Div anhängen können.

1) Wenn Sie Ihre Bilder im Speicher speichern, erstellen Sie einen Verweis auf das Bild in Ihrer Firebase-Datenbank mit der folgenden Struktur

/images/(imageName){
   description: "" , 
   imageSrc : (imageSource) 
}

2) Wenn Sie Ihr Dokument laden, ziehen Sie alle Ihre Bildquellen-URLs aus der Datenbank und nicht aus dem Speicher mit dem folgenden Code

$(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>");

    })
})
});

2

Sie können den folgenden Code verwenden. Hier lade ich das Bild in den Firebase-Speicher hoch und speichere dann die Bild-Download-URL in der Firebase-Datenbank.

//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) + "%...");
                        }
                    });

Jetzt können Sie alle in der Firebase-Datenbank gespeicherten Bilder abrufen

//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();
            }
        });

Weitere Details finden Sie in meinem Beitrag Firebase Storage Example .


Ich bin Ihrem Beispiel im Link gefolgt, aber die Bilder werden nicht von Firebase in der RecyclerView
Wolfiebae

1

Ich hatte also ein Projekt, bei dem Assets aus dem Firebase-Speicher heruntergeladen werden mussten, also musste ich dieses Problem selbst lösen. Hier ist, wie :

1- Erstellen Sie zunächst Modelldaten class Choice{}. In dieser Klasse wird eine Zeichenfolgenvariable mit dem Namen image Name definiert, damit dies so ist

class Choice {
    .....
    String imageName;
}

2- Gehen Sie aus einer Datenbank / Firebase-Datenbank und codieren Sie die Bildnamen fest in die Objekte. Wenn Sie also einen Bildnamen namens Apple.png haben, erstellen Sie das Objekt, das sein soll

Choice myChoice = new Choice(...,....,"Apple.png");

3- Holen Sie sich jetzt den Link für die Assets in Ihrem Firebase-Speicher, der so ähnlich sein wird

gs://your-project-name.appspot.com/

wie dieser

4- Initialisieren Sie abschließend Ihre Firebase-Speicherreferenz und beginnen Sie, die Dateien durch eine solche Schleife abzurufen

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- das war's


1
#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

Es ist keine API erforderlich. Sie benötigen lediglich eine einfache Python-Klasse und das Schlüsselwort
blob

0

Ich benutze AngularFireund benutze das Folgende, um alle zu bekommendownloadURL

getPhotos(id: string): Observable<string[]> {
    const ref = this.storage.ref(`photos/${id}`)
    return ref.listAll().pipe(switchMap(list => {
      const calls: Promise<string>[] = [];
      list.items.forEach(item => calls.push(item.getDownloadURL()))
      return Promise.all(calls)
    }));
}

-1

Für Android ist es am besten, FirebaseUI und Glide zu verwenden.

Sie müssen dies in Ihrem Gradle / Ihrer App hinzufügen, um die Bibliothek zu erhalten. Beachten Sie, dass Glide bereits darauf ist!

implementation 'com.firebaseui:firebase-ui-storage:4.1.0'

Und dann in Ihrem Code verwenden

// Reference to an image file in Cloud Storage
StorageReference storageReference = FirebaseStorage.getInstance().getReference();

// ImageView in your Activity
ImageView imageView = findViewById(R.id.imageView);

// Download directly from StorageReference using Glide
// (See MyAppGlideModule for Loader registration)
GlideApp.with(this /* context */)
        .load(storageReference)
        .into(imageView);
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.