Jak uzyskać listę wszystkich plików w Cloud Storage w aplikacji Firebase?

102

Pracuję nad wgrywaniem obrazków, wszystko działa świetnie, ale mam 100 zdjęć i chciałbym je wszystkie pokazać w moim View, skoro dostaję pełną listę zdjęć w folderze, nie mogę znaleźć do tego żadnego API praca.

Luis Ruiz Figueroa
źródło
Czy możesz opublikować pełne rozwiązanie kodu?
ISS

Odpowiedzi:

92

Od wersji 6.1 Firebase SDK dla języka JavaScript , wersji 6.4 systemu iOS i wersji 18.1 systemu Android, wszystkie mają metodę wyświetlania plików.

Jak dotąd dokumentacja jest nieco uboga, więc polecam sprawdzić odpowiedź Rosário, aby poznać szczegóły.


Poprzednia odpowiedź, ponieważ to podejście może być czasami przydatne:

Obecnie w pakiecie Firebase SDK nie ma wywołania interfejsu API w celu wyświetlenia listy wszystkich plików w folderze Cloud Storage z poziomu aplikacji. Jeśli potrzebujesz takiej funkcjonalności, powinieneś przechowywać metadane plików (takie jak adresy URL pobierania) w miejscu, w którym możesz je wyświetlić. Database Firebase Realtime i Chmura Firestore są idealne do tego i pozwala łatwo udostępniać adresy URL z innymi.

Możesz znaleźć dobrą (ale nieco zaangażowaną) próbkę tego w naszej przykładowej aplikacji FriendlyPix . Odpowiedni kod dla wersji internetowej jest tutaj , ale są też wersje na iOS i Android.

Frank van Puffelen
źródło
8
Czy zamierzasz to zaimplementować w Firebase?
Pier
55
Jeśli muszę przechowywać adresy URL wszystkich moich plików magazynu w bazie danych czasu rzeczywistego, jaki jest cel posiadania hierarchii folderów w magazynie? wszystkie pliki, posiadające unikalną nazwę, mogą być przechowywane na tym samym poziomie, bez konieczności tworzenia folderów !!! widzisz, to jest sprzeczność !!! Zasadniczo głównym uzasadnieniem hierarchii folderów są zapytania z symbolami wieloznacznymi bez wcześniejszej wiedzy o tym, co znajduje się w folderze, czego nie podajesz w rozsądny sposób.
abedfar
7
Pamięć Firebase jest oparta na Google Cloud Storage, która robi dokładnie to, co mówisz: przechowuje wszystkie obiekty na jednej długiej liście. Pamięć Firebase modeluje hierarchię, co jest wprawdzie nieszczelną abstrakcją. Typowe powody używania folderów w Firebase Storage to logiczna separacja danych i tworzenie reguł bezpieczeństwa na podstawie struktury folderów.
Frank van Puffelen
8
Co się stanie, jeśli połączenie użytkownika zostanie utracone po przesłaniu, a przed zapisaniem downloadUrl w bazie danych? Jak w takim przypadku odkryjemy istniejące pliki w folderze?
Oswaldo
10
Co teraz ? Czy w 2018 jest do tego bezpośrednie API?
Diaz diaz
48

Od maja 2019 r. Wersja 6.1.0 pakietu SDK Firebase dla Cloud Storage obsługuje teraz wyświetlanie listy wszystkich obiektów z zasobnika. Wystarczy zadzwonić listAll()pod numer 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
      });
    }

Proszę pamiętać, że aby korzystać z tej funkcji, należy zgłosić się do wersji 2 zasad bezpieczeństwa , które mogą być wykonywane przez co rules_version = '2';pierwszą linię swoich zasad bezpieczeństwa:

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

Zalecam sprawdzenie dokumentacji w celu uzyskania dalszych informacji.

Ponadto, zgodnie z konfiguracją , w kroku 5 ten skrypt nie jest dozwolony, Node.jsponieważ require("firebase/app");nie wróci firebase.storage()jako funkcja. Osiąga się to tylko za pomocą import * as firebase from 'firebase/app';.

Rosário Pereira Fernandes
źródło
której wtyczki używasz
azheen
@azheen Zakładam, że używasz Fluttera. Niestety, nie jest to jeszcze dostępne w Flutterfire. Możesz śledzić to w tej sprawie
Rosário Pereira Fernandes
33

Od marca 2017 r .: z dodatkiem Firebase Cloud Functions i głębszej integracji Firebase z Google Cloud jest to teraz możliwe.

Dzięki Cloud Functions możesz używać pakietu Google Cloud Node do robienia niesamowitych rzeczy operacji w Cloud Storage. Poniżej znajduje się przykład, który pobiera wszystkie adresy URL plików do tablicy z Cloud Storage. Ta funkcja będzie uruchamiana za każdym razem, gdy coś zostanie zapisane w pamięci Google w chmurze.

Notatka 1 : Jest to operacja dość kosztowna obliczeniowo, ponieważ wymaga cyklicznego przeglądania wszystkich plików w zasobniku / folderze.

Uwaga 2 : Napisałem to jako przykład, nie zwracając zbytniej uwagi na obietnice itp. Tylko po to, aby dać pomysł.

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

  });

});

Mam nadzieję, że to da ci ogólny pomysł. Aby uzyskać lepsze przykłady funkcji w chmurze, sprawdź repozytorium Google Github pełne przykładów Cloud Functions dla Firebase . Zapoznaj się również z dokumentacją Google Cloud Node API

johnozbay
źródło
35
To zbyt głupie, że Firebase nie dodaje tego interfejsu API do
zestawu SDK Firebase
4
@Thaina Myślę, że ma to związek ze skalą. Muszą myśleć nie tylko o małych aplikacjach, ale także o gigantach. A co, jeśli ścieżka zawiera tysiące plików. Operacja ta wymagałaby dużej mocy obliczeniowej i musiałaby odwoływać się do bazy danych dla każdego pozornie niewinnego i prostego wywołania. Im głębiej poznałem używanie Firebase na dużą skalę, tym lepiej rozumiem, dlaczego dokonano pewnych kompromisów.
johnozbay
1
W tym gcs api ma również limit i paginację, a konsument API jest odpowiedzialny za poznanie ryzyka i próbę wyboru metody, którą można skalować. Ale nadopiekuńczość, więc rezygnacja z naszej opcji nie jest dobrą decyzją. Mogą pobierać opłaty za duży ładunek, jeśli to naprawdę kosztuje
Thaina
1
to powinna być najlepsza odpowiedź! Dzięki za ostrzeżenie. Obecnie składnia różni się od Twojego przykładu. Zamiast wysyłać callback jako parametr, musisz połączyć w łańcuch .then:this.bucket .getFiles({ prefix: 'path/to/directory' }) .then((arr) => {})
JP Lew
1
@JPLew Nie ma za co :) Jeśli chodzi o składnię, zwracają obietnicę tylko wtedy, gdy callback jest wykluczony. Więc możesz bezpiecznie używać tego, co wolisz. Zobacz przykład tutaj: cloud.google.com/nodejs/docs/reference/storage/1.3.x/…
johnozbay
20

Ponieważ na liście nie ma języka, odpowiem na to w języku Swift. Zdecydowanie zalecamy jednoczesne używanie Firebase Storage i Firebase Realtime Database do tworzenia list pobrań:

Udostępnione:

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

Przekazać plik:

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

Pobieranie:

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

Aby uzyskać więcej informacji, zobacz Zero to App: Develop with Firebase i powiązany z nim kod źródłowy , aby zapoznać się z praktycznym przykładem, jak to zrobić.

Mike McDonald
źródło
3
Ale jak mogę uzyskać ten sam wynik z Cloud Firestore?)
Max Kraev
5

Rozwiązaniem może być utworzenie pliku (np. List.txt) bez niczego w środku. W tym pliku można ustawić niestandardowe metadane (czyli Map <String, String>) z listą adresów URL wszystkich plików.
Więc jeśli chcesz pobrać wszystkie pliki w programie Fodler, najpierw pobierz metadane pliku list.txt, a następnie przejdziesz przez dane niestandardowe i pobierzesz wszystkie pliki z adresami URL w mapie.

Andrea
źródło
4
Tak, jest to obejście, ale nie można obsłużyć jednoczesnych zapisów do jednej listy.txt
linquize
5

Z tym problemem spotkałem się również podczas pracy nad swoim projektem. Naprawdę chciałbym, aby dostarczali metodę końcowego api. W każdym razie tak to zrobiłem: podczas przesyłania obrazu do magazynu Firebase utwórz obiekt i jednocześnie przekaż go do bazy danych Firebase. Ten obiekt zawiera identyfikator URI pobierania obrazu.

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

Później, gdy chcesz pobrać obrazy z folderu, po prostu przeglądaj pliki w tym folderze. Ten folder ma taką samą nazwę jak „folder” w pamięci Firebase, ale możesz nadawać im dowolne nazwy. Umieściłem je w osobnym wątku.

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

        }
    });

Teraz mam listę obiektów zawierających identyfikatory URI do każdego obrazu, mogę zrobić z nimi, co chcę. Aby załadować je do imageView, utworzyłem kolejny wątek.

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

To zwraca listę bitmap, po zakończeniu po prostu dołączam je do ImageView w głównym działaniu. Poniższe metody to @Override, ponieważ mam utworzone interfejsy i nasłuchuję zakończenia w innych wątkach.

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

Zauważ, że najpierw muszę poczekać na zwrócenie obrazu listy, a następnie wywołać wątek, aby działał na mapie bitowej listy. W tym przypadku Image zawiera identyfikator 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);
}

Mam nadzieję, że ktoś uzna to za pomocne. W przyszłości będzie również służyć jako linia gildii.

Tao
źródło
5

Jeszcze jeden sposób dodania obrazu do bazy danych przy użyciu funkcji chmury do śledzenia każdego przesłanego obrazu i przechowywania go w bazie danych.

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

Pełny kod tutaj: https://gist.github.com/bossly/fb03686f2cb1699c2717a0359880cf84

Oleg Baidalka
źródło
5

W przypadku węzła js użyłem tego kodu

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);
  });
tuananh
źródło
Właśnie uratowałeś mi dzień !!
hugo blanc
4

Możesz wyświetlić listę plików w katalogu magazynu Firebase za pomocą metody listAll (). Aby skorzystać z tej metody, musisz zaimplementować tę wersję magazynu Firebase. „com.google.firebase: firebase-storage: 18.1.1”

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

Pamiętaj, że zaktualizuj reguły bezpieczeństwa do wersji 2.

Yonghwan Shin
źródło
3

W rzeczywistości jest to możliwe, ale tylko z Google Cloud API zamiast jednego z Firebase. Dzieje się tak, ponieważ Firebase Storage to zasobnik Google Cloud Storage, do którego można łatwo dotrzeć za pomocą interfejsów API Google Cloud, jednak do uwierzytelniania musisz używać OAuth zamiast Firebase.

Zen M
źródło
3

Zmierzyłem się z tym samym problemem, mój jest jeszcze bardziej skomplikowany.

Administrator prześle pliki audio i pdf do pamięci:

  • audios / season1, season2 ... / class1, class 2 / .mp3 files

  • książki / pliki .pdf

Aplikacja na Androida musi pobrać listę podfolderów i plików.

Rozwiązaniem jest przechwytywanie zdarzenia uploadu w magazynie i utworzenie tej samej struktury w Firestore przy użyciu funkcji chmury.

Krok 1: Utwórz ręcznie kolekcję „przechowywanie” i dokument „audio / książki” w Firestore

wprowadź opis obrazu tutaj

Krok 2: Konfiguracja funkcji chmury

Może zająć około 15 minut: https://www.youtube.com/watch?v=DYfP-UIKxH0&list=PLl-K7zZEsYLkPZHe41m4jfAxUi0JjLgSM&index=1

Krok 3: Złap zdarzenie przesyłania za pomocą funkcji chmury

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

Krok 4: Pobierz listę folderów / plików w aplikacji na Androida za pomocą 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);
    }

Krok 5: Uzyskaj adres URL pobierania

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

Uwaga

Musimy umieścić kolekcję „pod” w każdym elemencie, ponieważ firestore nie obsługuje pobierania listy kolekcji.

Znalezienie rozwiązania zajęło mi 3 dni, mam nadzieję, że zajmie ci to najwyżej 3 godziny.

Twoje zdrowie.

thanhbinh84
źródło
Dokładnie ten sam scenariusz, nad którym pracuję. Czy ktoś może wysłać mi kod flutterowy? ponieważ mogę przesłać tylko partię plików, a nie pobrać.
Mahesh Peri
Flutter SDK (język dart)
Mahesh Peri
1
Cloud Firestore nie obsługuje jeszcze flutter firebase.google.com/docs/firestore . Szybkim podejściem jest napisanie API przy użyciu funkcji chmury, a następnie dostęp do tych API przez restful jak zwykle. Zapoznanie się z funkcją chmury może zająć kilka godzin, te filmy szkoleniowe są dość łatwe do przełknięcia: D youtube.com/…
thanhbinh84
3

Poszerzenie odpowiedzi Rosário Pereiry Fernandesa o rozwiązanie JavaScript:

  1. Zainstaluj Firebase na swoim komputerze
npm install -g firebase-tools

  1. W inicjalizacji Firebase ustawiono JavaScriptjako język domyślny
  2. W folderze głównym utworzonego projektu wykonaj instalacje npm
   npm install --save firebase
   npm install @google-cloud/storage
   npm install @google-cloud/firestore
   ... <any other dependency needed>
  1. Dodaj inne niż domyślne zależności w projekcie, takie jak
    "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
}

  1. Utwórz rodzaj listAllfunkcji

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. Wykonaj, firebase deployaby przesłać funkcję chmury
  2. Wywołaj swoją niestandardową funkcję z aplikacji

build.gradle

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

klasa kotlin

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

Jeśli chodzi o dalszy rozwój tej funkcji, napotkałem kilka problemów, które mogły się tutaj znaleźć .

Victor R. Oliveira
źródło
2

Aby to zrobić z JS

Możesz dołączyć je bezpośrednio do kontenera div lub wypchnąć do tablicy. Poniżej pokazano, jak dołączyć je do swojego div.

1) Podczas przechowywania obrazów w pamięci utwórz odniesienie do obrazu w bazie danych firebase o następującej strukturze

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

2) Po załadowaniu dokumentu pobierz wszystkie adresy URL źródła obrazu z bazy danych, a nie z magazynu z następującym kodem

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

    })
})
});
MakDo
źródło
2

Możesz użyć następującego kodu. Tutaj przesyłam obraz do magazynu Firebase, a następnie przechowuję adres URL pobierania obrazu w bazie danych 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) + "%...");
                        }
                    });

Teraz możesz pobrać wszystkie obrazy przechowywane w bazie danych Firebase, których możesz użyć

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

Aby uzyskać więcej informacji, zobacz mój post Przykład pamięci Firebase .

Belal Khan
źródło
Podążałem
1

Miałem więc projekt, który wymagał pobrania zasobów z magazynu Firebase, więc musiałem sam rozwiązać ten problem. Oto jak :

1- Najpierw utwórz dane modelu, na przykład class Choice{}, W tej klasie zdefiniowano zmienną typu String o nazwie Nazwa obrazu, więc tak będzie

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

2- z bazy danych / bazy danych firebase, przejdź i zakoduj na stałe nazwy obrazów do obiektów, więc jeśli masz nazwę obrazu o nazwie Apple.png, utwórz obiekt, który ma być

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

3- Teraz uzyskaj link do zasobów w pamięci Firebase, który będzie podobny do tego

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

jak ten

4- Na koniec zainicjuj odwołanie do magazynu Firebase i zacznij pobierać pliki w takiej pętli

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- to wszystko

Brigth Ligth
źródło
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
Milan Hazra
źródło
Nie ma potrzeby API wystarczy prostą klasę Python i słowa kluczowego blob
Mediolan Hazra
0

Używam AngularFirei używam następujących, aby uzyskać wszystkie plikidownloadURL

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)
    }));
}
Nabel
źródło
-1

W przypadku Androida najlepszą praktyką jest użycie FirebaseUI i Glide.

Musisz dodać to w swoim gradle / aplikacji, aby uzyskać bibliotekę. Zwróć uwagę, że ma już na sobie Glide!

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

A następnie w swoim kodzie użyj

// 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);
Dagnogo Jean-François
źródło