Bagaimana cara mendapatkan daftar semua file di Cloud Storage di aplikasi Firebase?

102

Aku sedang bekerja pada gambar upload, semua karya besar, tetapi saya memiliki 100 gambar dan saya ingin menunjukkan semua dari mereka di saya View, karena saya mendapatkan daftar lengkap gambar dalam folder, saya tidak dapat menemukan API untuk ini kerja.

Luis Ruiz Figueroa
sumber
Bisakah Anda memposting solusi kode lengkap?
ISS

Jawaban:

92

Sejak Firebase SDK untuk JavaScript rilis 6.1 , iOS rilis 6.4 , dan Android versi rilis 18.1 semuanya memiliki metode untuk mencantumkan file.

The dokumentasi agak jarang sejauh ini, jadi saya sarankan memeriksa jawaban Rosário ini untuk rincian.


Jawaban sebelumnya, karena pendekatan ini terkadang masih berguna:

Saat ini tidak ada panggilan API di SDK Firebase untuk mencantumkan semua file di folder Cloud Storage dari dalam aplikasi. Jika Anda memerlukan fungsionalitas seperti itu, Anda harus menyimpan metadata file (seperti URL unduhan) di tempat Anda dapat mencantumkannya. The Firebase Realtime database dan Cloud Firestore yang sempurna untuk ini dan memungkinkan Anda untuk juga mudah berbagi URL dengan orang lain.

Anda dapat menemukan contoh yang bagus (tapi agak terlibat) dari ini di aplikasi contoh FriendlyPix kami . Kode yang relevan untuk versi web ada di sini , tetapi ada juga versi untuk iOS dan Android.

Frank van Puffelen
sumber
8
Apakah Anda akan menerapkan ini di Firebase?
Dermaga
55
Jika saya perlu menyimpan URL dari semua file Storage saya di Realtime Database, lalu apa tujuan memiliki hierarki folder di Storage? semua file, memiliki nama unik, dapat disimpan di level yang sama, tidak perlu folder sama sekali !!! Anda lihat, itu kontradiksi !!! Pada dasarnya, alasan utama di balik hierarki folder adalah kueri wildcard tanpa pengetahuan sebelumnya tentang apa yang Anda miliki di folder, yang tidak Anda berikan secara tidak wajar.
abedfar
7
Firebase Storage dibangun di atas Google Cloud Storage, yang melakukan persis seperti yang Anda katakan: menyimpan semua objek dalam satu daftar panjang. Firebase Storage memodelkan hierarki di atas itu, yang diakui sebagai abstraksi bocor. Alasan umum penggunaan folder di Firebase Storage adalah untuk pemisahan data logis dan untuk menyusun aturan keamanan berdasarkan struktur folder.
Frank van Puffelen
8
Apa yang terjadi jika koneksi pengguna hilang setelah upload dan sebelum menyimpan downloadUrl ke database? Bagaimana kami menemukan file yang ada di folder dalam kasus itu?
Oswaldo
10
Bagaimana dengan sekarang ? Apakah ada API langsung untuk ini di 2018?
Diaz diaz
48

Mulai Mei 2019, Firebase SDK untuk Cloud Storage versi 6.1.0 sekarang mendukung pencantuman semua objek dari sebuah keranjang. Anda hanya perlu menelepon listAll()dalam 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
      });
    }

Harap diperhatikan bahwa untuk menggunakan fungsi ini, Anda harus ikut serta dalam Aturan Keamanan versi 2 , yang dapat dilakukan dengan membuat rules_version = '2';baris pertama aturan keamanan Anda:

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

Saya akan merekomendasikan untuk memeriksa dokumen untuk referensi lebih lanjut.

Juga, menurut penyiapan , pada Langkah 5, skrip ini tidak diizinkan Node.jskarena require("firebase/app");tidak akan kembali firebase.storage()sebagai fungsi. Ini hanya bisa dicapai dengan menggunakan import * as firebase from 'firebase/app';.

Rosário Pereira Fernandes
sumber
plugin mana yang kamu gunakan
azheen
@azheen Saya menganggap Anda menggunakan Flutter. Sayangnya, ini belum tersedia di flutterfire. Anda dapat melacaknya dalam masalah ini
Rosário Pereira Fernandes
33

Sejak Mar 2017: Dengan penambahan Firebase Cloud Functions , dan integrasi Firebase yang lebih dalam dengan Google Cloud, hal ini sekarang dimungkinkan.

Dengan Cloud Functions, Anda dapat menggunakan paket Google Cloud Node untuk melakukan operasi epik di Cloud Storage. Di bawah ini adalah contoh yang memasukkan semua URL file ke dalam array dari Cloud Storage. Fungsi ini akan dipicu setiap kali ada sesuatu yang disimpan ke penyimpanan cloud google.

Catatan 1 : Ini adalah operasi komputasi yang mahal, karena harus menggilir semua file dalam keranjang / folder.

Catatan 2 : Saya menulis ini hanya sebagai contoh, tanpa memberikan banyak detail ke dalam promise, dll. Hanya untuk memberi gambaran.

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

  });

});

Saya harap ini akan memberi Anda gambaran umum. Untuk contoh fungsi cloud yang lebih baik, lihat repo Github Google yang lengkap dengan sampel Cloud Functions untuk Firebase . Lihat juga Dokumentasi API Google Cloud Node mereka

johnozbay
sumber
35
Ini terlalu bodoh karena firebase tidak hanya menambahkan api ini ke dalam firebase sdk
Thaina
4
@ Thaina Saya pikir itu ada hubungannya dengan skala. Mereka harus memikirkan tidak hanya aplikasi kecil tetapi juga raksasa. Bagaimana jika sebuah jalur memiliki ribuan file. Operasi ini akan menghabiskan banyak daya komputasi dan harus mengacu pada database untuk setiap panggilan yang tampaknya tidak bersalah dan sederhana. Semakin dalam saya menggunakan firebase pada skala besar, semakin baik saya memahami mengapa kompromi tertentu dibuat.
johnozbay
1
Dalam gcs api ini juga terdapat batasan dan pagination, kemudian menjadi tanggung jawab konsumen API untuk mengetahui resiko dan mencoba memilih metode yang dapat diskalakan. Tetapi menjadi terlalu protektif sehingga memotong pilihan kita bukanlah keputusan yang baik. Mereka dapat mengenakan biaya untuk beban berat jika itu benar-benar mahal
Thaina
1
ini harus menjadi jawaban teratas! Terimakasih atas peringatannya. Saat ini, sintaksnya berbeda dari contoh Anda. Alih-alih mengirim callback sebagai parameter, Anda harus merangkai .thenseperti ini:this.bucket .getFiles({ prefix: 'path/to/directory' }) .then((arr) => {})
JP Lew
1
@JPLew Sama-sama :) Berkenaan dengan sintaks, mereka mengembalikan promise hanya jika callback dikecualikan. Jadi aman digunakan mana saja yang Anda suka. Lihat contoh di sini: cloud.google.com/nodejs/docs/reference/storage/1.3.x/…
johnozbay
20

Karena tidak ada bahasa yang terdaftar, saya akan menjawab ini di Swift. Kami sangat merekomendasikan menggunakan Firebase Storage dan Firebase Realtime Database secara bersamaan untuk menyelesaikan daftar download:

Bersama:

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

Unggah:

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

Unduh:

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

Untuk informasi selengkapnya, lihat Zero to App: Develop with Firebase , dan kode sumbernya yang terkait , untuk contoh praktis tentang cara melakukannya.

Mike McDonald
sumber
3
Tetapi bagaimana cara mendapatkan hasil yang sama dengan Cloud Firestore?)
Max Kraev
5

Solusinya adalah dengan membuat file (yaitu list.txt) tanpa isi di dalamnya, di file ini Anda dapat mengatur metadata kustom (yaitu Peta <String, String>) dengan daftar semua URL file.
Jadi, jika Anda perlu men-download semua file di fodler, Anda terlebih dahulu mengunduh metadata dari file list.txt, lalu Anda mengulang melalui data khusus dan mengunduh semua file dengan URL di Peta.

Andrea
sumber
4
Ya, ini adalah solusinya, tetapi tidak dapat menangani penulisan bersamaan ke satu list.txt
linquize
5

Saya juga mengalami masalah ini saat mengerjakan proyek saya. Saya sangat berharap mereka memberikan metode api akhir. Bagaimanapun, ini adalah cara saya melakukannya: Saat Anda mengupload gambar ke penyimpanan Firebase, buat Objek dan teruskan objek ini ke database Firebase pada saat yang bersamaan. Objek ini berisi URI unduhan gambar.

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

Nanti saat Anda ingin mendownload gambar dari folder, Anda cukup melakukan iterasi melalui file di bawah folder itu. Folder ini memiliki nama yang sama dengan "folder" di penyimpanan Firebase, tetapi Anda dapat menamainya sesuka Anda. Saya menempatkannya di utas terpisah.

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

        }
    });

Sekarang saya memiliki daftar objek yang berisi URI untuk setiap gambar, saya dapat melakukan apa pun yang ingin saya lakukan dengannya. Untuk memuatnya ke imageView, saya membuat utas lain.

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

Ini mengembalikan daftar Bitmap, ketika selesai saya cukup melampirkannya ke ImageView di aktivitas utama. Metode di bawah ini adalah @Override karena saya memiliki antarmuka yang dibuat dan mendengarkan penyelesaian di utas lain.

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

Perhatikan bahwa saya harus menunggu List Image dikembalikan terlebih dahulu dan kemudian memanggil utas untuk bekerja pada List Bitmap. Dalam hal ini, Gambar berisi 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);
}

Semoga seseorang merasa terbantu. Itu juga akan berfungsi sebagai garis serikat untuk diriku sendiri di masa depan juga.

Tao
sumber
5

Satu cara lagi untuk menambahkan gambar ke Database menggunakan Cloud Function untuk melacak setiap gambar yang diupload dan menyimpannya di Database.

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

Kode lengkap di sini: https://gist.github.com/bossly/fb03686f2cb1699c2717a0359880cf84

Oleg Baidalka
sumber
5

Untuk node js, saya menggunakan kode ini

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
sumber
Anda baru saja menyelamatkan hari saya !!
hugo blanc
4

Anda bisa mencantumkan file dalam direktori penyimpanan firebase dengan metode listAll (). Untuk menggunakan metode ini, Anda harus menerapkan versi penyimpanan firebase ini. 'com.google.firebase: firebase-storage: 18.1.1'

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

Ingatlah bahwa meningkatkan Aturan Keamanan ke versi 2.

Yonghwan Shin
sumber
3

Sebenarnya hal ini dimungkinkan, tetapi hanya dengan Google Cloud API, bukan dari Firebase. Itu karena Firebase Storage adalah Google Cloud Storage Bucket yang dapat dijangkau dengan mudah dengan Google Cloud API, namun Anda perlu menggunakan OAuth untuk Autentikasi, bukan Firebase.

Zen M
sumber
3

Saya menghadapi masalah yang sama, masalah saya bahkan lebih rumit.

Admin akan mengunggah file audio dan pdf ke dalam penyimpanan:

  • file audio / season1, season2 ... / class1, class 2 / .mp3

  • buku / file .pdf

Aplikasi Android perlu mendapatkan daftar sub folder dan file.

Solusinya adalah menangkap peristiwa unggahan di penyimpanan dan membuat struktur yang sama di firestore menggunakan fungsi cloud.

Langkah 1: Buat koleksi 'penyimpanan' dan dokumen 'audio / buku' secara manual di firestore

masukkan deskripsi gambar di sini

Langkah 2: Siapkan fungsi cloud

Mungkin memakan waktu sekitar 15 menit: https://www.youtube.com/watch?v=DYfP-UIKxH0&list=PLl-K7zZEsYLkPZHe41m4jfAxUi0JjLgSM&index=1

Langkah 3: Tangkap acara unggahan menggunakan fungsi 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);
                });
    });

Langkah 4: Ambil daftar folder / file di aplikasi Android menggunakan 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);
    }

Langkah 5: Dapatkan url unduhan

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

Catatan

Kita harus meletakkan "sub" koleksi untuk setiap item karena firestore tidak mendukung untuk mengambil daftar koleksi.

Saya butuh 3 hari untuk menemukan solusinya, semoga akan memakan waktu paling banyak 3 jam.

Bersulang.

thanhbinh84.dll
sumber
Skenario yang sama persis yang sedang saya kerjakan. Adakah yang bisa mengirimi saya kode flutter? karena saya hanya perlu mengupload file batch, bukan mendownload.
Mahesh Peri
Flutter SDK (bahasa panah)
Mahesh Peri
1
cloud firestore belum mendukung flutter firebase.google.com/docs/firestore . Pendekatan cepatnya adalah menulis API menggunakan fungsi cloud, kemudian mengakses API ini melalui restful seperti biasa. Mungkin perlu beberapa jam untuk membiasakan diri dengan fungsi cloud, video pelatihan ini cukup mudah untuk
dipahami
3

Memperluas jawaban Rosário Pereira Fernandes , untuk solusi JavaScript:

  1. Instal firebase di komputer Anda
npm install -g firebase-tools

  1. Di firebase init disetel JavaScriptsebagai bahasa default
  2. Pada folder root dari proyek yang dibuat, jalankan instalasi npm
   npm install --save firebase
   npm install @google-cloud/storage
   npm install @google-cloud/firestore
   ... <any other dependency needed>
  1. Tambahkan dependensi non-default pada proyek Anda seperti
    "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. Buat semacam listAllfungsi

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. Jalankan firebase deployuntuk mengunggah fungsi cloud Anda
  2. Panggil fungsi kustom Anda dari aplikasi Anda

build.gradle

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

kelas kotlin

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

Mengenai pengembangan lebih lanjut dari fitur ini, saya mengalami beberapa masalah yang mungkin ditemukan di sini .

Victor R. Oliveira
sumber
2

Untuk melakukan ini dengan JS

Anda dapat menambahkannya langsung ke penampung div Anda, atau Anda dapat mendorongnya ke array. Di bawah ini menunjukkan cara menambahkannya ke div Anda.

1) Saat Anda menyimpan gambar di penyimpanan, buat referensi ke gambar di database firebase Anda dengan struktur berikut

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

2) Ketika Anda memuat dokumen Anda menarik semua URL sumber gambar Anda dari database daripada penyimpanan dengan kode berikut

$(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
sumber
2

Anda dapat menggunakan kode berikut. Di sini saya mengunggah gambar ke penyimpanan firebase dan kemudian saya menyimpan url unduhan gambar ke basis data 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) + "%...");
                        }
                    });

Sekarang untuk mengambil semua gambar yang disimpan dalam database firebase yang dapat Anda gunakan

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

Untuk lebih jelasnya kamu bisa lihat postingan saya Contoh Firebase Storage .

Belal Khan
sumber
Saya mengikuti contoh Anda di tautan, tetapi gambar tidak ditampilkan dari Firebase di RecyclerView
Wolfiebae
1

Jadi saya memiliki proyek yang memerlukan pengunduhan aset dari penyimpanan firebase, jadi saya harus menyelesaikan masalah ini sendiri. Begini Caranya:

1- Pertama buat model data misalnya class Choice{}, di kelas tersebut tentukan variabel String yang disebut image Name sehingga akan seperti itu

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

2- Dari database / database firebase, pergi dan hardcode nama gambar ke objek, jadi jika Anda memiliki nama gambar yang disebut Apple.png, buat objek menjadi

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

3- Sekarang, dapatkan tautan untuk aset di penyimpanan firebase Anda yang akan seperti itu

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

Seperti yang ini

4- terakhir, inisialisasi referensi penyimpanan firebase Anda dan mulai dapatkan file secara berulang seperti itu

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- itu saja

Brigth Ligth
sumber
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
sumber
Tidak perlu API, Anda hanya perlu kelas Python sederhana dan kata kunci blob
Milan Hazra
0

Saya menggunakan AngularFiredan menggunakan yang berikut ini untuk mendapatkan semuadownloadURL

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

Untuk Android, praktik terbaiknya adalah menggunakan FirebaseUI dan Glide.

Anda perlu menambahkannya di gradle / aplikasi Anda untuk mendapatkan perpustakaan. Perhatikan bahwa itu sudah memiliki Glide di atasnya!

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

Dan kemudian gunakan kode Anda

// 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
sumber