FirebaseアプリでCloud Storage内のすべてのファイルの一覧を取得する方法
私は画像をアップロードすることに取り組んでいます、すべてがうまくいきます、しかし、私は100枚の写真を持っています、そして、私は私のViewにそれらの全てを見せたいです。この作品。
Firebase SDK for JavaScriptリリース6.1 以降、ファイルを一覧表示する方法があります。 ドキュメント は今のところ少しまばらなので、詳細は Rosário'sanswer をチェックすることをお勧めします。
他のプラットフォームでは、私の以前の答えはまだ当てはまります。
現在、アプリ内からCloud Storageフォルダー内のすべてのファイルを一覧表示するためのAPI呼び出しはFirebase SDKにはありません。このような機能が必要な場合は、ファイルのメタデータ（ダウンロードURLなど）を一覧表示できる場所に保存してください。 Firebase Realtime Database と Cloud Firestore はこれに最適で、他の人とURLを簡単に共有することもできます。
あなたは私たちの FriendlyPix サンプルアプリでこれの良い（しかしいくらか複雑な）サンプルを見つけることができます。 Web版に関連するコードは ここ ですが、iOS版とAndroid版もあります。
または、Cloud Storage用のサーバーサイドSDKのいずれかを使用してファイルを一覧表示することもできます。これらのいくつかは Firebase Admin SDK に含まれているので、それらを使い始めるのは簡単です。ここで留意すべき唯一のことは、Admin SDKはあなたのすべてのFirebaseサービスにフルアクセスできるので、あなたの開発マシン、あなたがコントロールするサーバー、またはCloud Functionsのような信頼できる環境からしか使用できないということです。
2017年3月以降：Firebase Cloud Functions が追加され、FirebaseとGoogle Cloudとのより緊密な統合により、これが可能になりました。
Cloud Functionsを使用すると、Google Cloud Nodeパッケージを使用してCloud Storageでepic操作を実行できます。以下は、Cloud StorageからすべてのファイルのURLを配列に取得する例です。この機能は、何かがGoogleクラウドストレージに保存されるたびに起動されます。
注1：これは、バケツ/フォルダー内のすべてのファイルを巡回しなければならないため、かなり計算コストがかかる操作です。
注2：これはあくまで例として書かれたもので、約束など詳細に説明するものではありません。
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);
});
});
});
});
これがあなたに一般的な考えを与えることを願っています。クラウド機能のより良い例については、 GoogleのGithubレポジトリでFirebase用のCloud Functionsサンプルが満載 を調べてください。また、それらをチェックしてください Google Cloud Node API Documentation
言語が記載されていないので、Swiftで答えます。ダウンロードリストを作成するには、Firebase StorageとFirebase Realtime Databaseを併用することを強くお勧めします。
共有：
// 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]()
アップロード：
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)
}
ダウンロード：
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)
})
})
詳細については、 App to Zero：Firebaseを使用した開発 および 関連するソースコード を参照してください。これを行う方法の実際的な例があります。
2019年5月現在、Cloud Storage SDKの バージョン6.1. は、バケットからのすべてのオブジェクトの一覧表示をサポートします。 Referencename__内でlistAll()を呼び出すだけです。
// 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
});
}
注意してくださいこの機能を使用するには、 セキュリティルールのバージョン2 にオプトインする必要があります。 rules_version = '2';をあなたのセキュリティルールの最初の行にすることによって行われます。
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
Cloud Functionを使用してデータベースに画像を追加し、アップロードされたすべての画像を追跡してデータベースに保存するもう1つの方法。
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
});
});
});
ここに完全なコード： https://Gist.github.com/bossly/fb03686f2cb1699c2717a0359880cf84
この問題を回避するには、中に何も入っていないファイル（つまりlist.txt）を作成します。このファイルでは、すべてのファイルのURLのリストを使ってカスタムメタデータ（つまりMap <String、String>）を設定できます。
したがって、fodler内のすべてのファイルをダウンロードする必要がある場合は、まずlist.txtファイルのメタデータをダウンロードし、次にカスタムデータを順に調べて、マップ内のURLを持つすべてのファイルをダウンロードします。
私は自分のプロジェクトに取り組んでいたときにもこの問題に遭遇しました。私は本当に彼らがエンドAPIメソッドを提供することを望みます。とにかく、これは私がやった方法です：あなたがFirebaseストレージにイメージをアップロードしているとき、オブジェクトを作成し、同時にこのオブジェクトをFirebaseデータベースに渡します。このオブジェクトは画像のダウンロードURIを含みます。
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);
}
});
後でフォルダから画像をダウンロードしたいときは、そのフォルダの下のファイルを繰り返し処理します。このフォルダはFirebaseストレージの "フォルダ"と同じ名前ですが、任意の名前を付けることができます。私はそれらを別のスレッドに入れました。
@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) {
}
});
これで、各画像のURIを含むオブジェクトのリストができました。それらを使ってやりたいことは何でもできます。それらをimageViewにロードするために、私は別のスレッドを作成しました。
@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;
}
これでBitmapのリストが返されます。メインアクティビティでImageViewに添付するだけで終了します。以下のメソッドは@Overrideです。私はインターフェイスを作成し、他のスレッドで完了を待機するためです。
@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);
}
}
最初にList Imageが返されるのを待ってから、List Bitmapを処理するためにthreadを呼び出す必要があります。この場合、Imageは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);
}
うまくいけば、誰かがそれが役に立つと思います。それはまた将来的に私自身のためのギルドラインとしても役立つでしょう。
ノードjsでは、このコードを使いました
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);
});
JSでこれを行うには
それらをdivコンテナに直接追加することも、それらを配列にプッシュすることもできます。以下はそれらをあなたのdivに追加する方法を示しています。
1）あなたがあなたの画像をストレージに保存するとき、あなたのfirebaseデータベースの中に次の構造を持つ画像への参照を作成してください。
/images/(imageName){
description: "" ,
imageSrc : (imageSource)
}
2）あなたがドキュメントをロードするとき、以下のコードでストレージからではなくデータベースからあなたのすべての画像ソースURLを引き出す
$(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>");
})
})
});
ListAll（）メソッドにより、firebaseストレージのディレクトリ内のファイルを一覧表示できます。この方法を使用するには、このバージョンのfirebase storageを実装する必要があります。 'com.google.firebase：firebase-storage：18.1.1'
https://firebase.google.com/docs/storage/Android/list-files
セキュリティルールをバージョン2にアップグレードすることに注意してください。
#In Python
import firebase_admin
from firebase_admin import credentials
from firebase_admin import storage
import datetime
import urllib.request
def image_download(url, name_img) :
urllib.request.urlretrieve(url, name_img)
cred = credentials.Certificate("credentials.json")
# Initialize the app with a service account, granting admin privileges
app = firebase_admin.initialize_app(cred, {
'storageBucket': 'YOURSTORAGEBUCKETNAME.appspot.com',
})
url_img = "gs://YOURSTORAGEBUCKETNAME.appspot.com/"
bucket_1 = storage.bucket(app=app)
image_urls = []
for blob in bucket_1.list_blobs():
name = str(blob.name)
#print(name)
blob_img = bucket_1.blob(name)
X_url = blob_img.generate_signed_url(datetime.timedelta(seconds = 300), method='GET')
#print(X_url)
image_urls.append(X_url)
PATH = ['Where you want to save the image']
for path in PATH:
i = 1
for url in image_urls:
name_img = str(path + "image"+str(i)+".jpg")
image_download(url, name_img)
i+=1
実際にはこれは可能ですが、Firebaseの代わりに Google Cloud API を使用する場合に限られます。これは、Firebase Storageが Google Cloud Storage Bucket であり、Google Cloud APIを使用して簡単にアクセスできるためです。ただし、認証にはFirebaseの代わりにOAuthを使用する必要があります。
私は同じ問題に直面しました、私のものはさらにもっと複雑です。
管理者はオーディオとpdfファイルをストレージにアップロードします。
オーディオ/ season1、season2 .../class1、クラス2/.mp3ファイル
books/.pdfファイル
Androidアプリはサブフォルダとファイルのリストを取得する必要があります。
解決策は、ストレージ上のアップロードイベントをキャッチし、クラウド機能を使用してFirestore上に同じ構造を作成することです。
ステップ1：firestoreに手動で 'storage'コレクションと 'audios/books'ドキュメントを作成します
ステップ2：クラウド機能を設定する
約15分かかることがあります。 https://www.youtube.com/watch?v=DYfP-UIKxH0&list=PLl-K7zZEsYLkPZHe41m4jfAxUi0JjLgSM&index=1
ステップ3：クラウド機能を使ってアップロードイベントをキャッチ
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);
});
});
ステップ4：firestoreを使ってAndroidアプリ上のフォルダ/ファイルのリストを取得する
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);
}
ステップ5：ダウンロードURLを取得する
public static void downloadMediaFile(String path, OnCompleteListener<Uri> onCompleteListener) {
getStorage().getReference().child(path).getDownloadUrl().addOnCompleteListener(onCompleteListener);
}
注
Firestoreはコレクションのリストを取得することをサポートしていないため、各アイテムに "sub"コレクションを追加する必要があります。
解決策を見つけるのに3日かかりました。うまくいけば、最大で3時間かかります。
乾杯。
次のコードを使うことができます。ここで画像をfirebase storageにアップロードしてから、画像のダウンロードURLを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) + "%...");
}
});
Firebaseデータベースに保存されているすべての画像を取得するために使用することができます
//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();
}
});
詳細については、私の投稿Firebase Storage Exampleをご覧ください。
JavaScriptソリューションのRosárioPereira Fernandesの回答の拡張：
- マシンにfirebaseをインストールします
npm install -g firebase-tools
- Firebase initで
JavaScriptをデフォルト言語として設定します - 作成されたプロジェクトのルートフォルダーでnpm installsを実行します
npm install --save firebase
npm install @google-cloud/storage
npm install @google-cloud/firestore
... <any other dependency needed>
- 次のようなプロジェクトにデフォルト以外の依存関係を追加します
"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
}
listAll関数の並べ替えを作成する
index.js
var serviceAccount = require("./key.json");
const functions = require('firebase-functions');
const images = require('./images.js');
var admin = require("firebase-admin");
admin.initializeApp({
credential: admin.credential.cert(serviceAccount),
databaseURL: "https://<my_project>.firebaseio.com"
});
const bucket = admin.storage().bucket('<my_bucket>.appspot.com')
exports.getImages = functions.https.onRequest((request, response) => {
images.getImages(bucket)
.then(urls => response.status(200).send({ data: { urls } }))
.catch(err => console.error(err));
})
images.js
module.exports = {
getImages
}
const query = {
directory: 'images'
};
function getImages(bucket) {
return bucket.getFiles(query)
.then(response => getUrls(response))
.catch(err => console.error(err));
}
function getUrls(response) {
const promises = []
response.forEach( files => {
files.forEach (file => {
promises.Push(getSignedUrl(file));
});
});
return Promise.all(promises).then(result => getParsedUrls(result));
}
function getSignedUrl(file) {
return file.getSignedUrl({
action: 'read',
expires: '09-01-2019'
})
}
function getParsedUrls(result) {
return JSON.stringify(result.map(mediaLink => createMedia(mediaLink)));
}
function createMedia(mediaLink) {
const reference = {};
reference.mediaLink = mediaLink[0];
return reference;
}
firebase deployを実行して、クラウド機能をアップロードします- Call アプリのカスタム関数
build.gradle
dependencies {
...
implementation 'com.google.firebase:firebase-functions:18.1.0'
...
}
kotlinクラス
private val functions = FirebaseFunctions.getInstance()
val cloudFunction = functions.getHttpsCallable("getImages")
cloudFunction.call().addOnSuccessListener {...}
この機能のさらなる開発に関して、私は here を発見するかもしれないいくつかの問題に遭遇しました。
だから私はfirebase storageからアセットをダウンロードすることを要求するプロジェクトを持っていたので、私はこの問題を自分で解決しなければなりませんでした。これがHowです。
1 - 最初に、例えばclass Choice{}のようなモデルデータを作成します。そのクラスでは、Image Nameという文字列変数を定義しているので、そのようになります。
class Choice {
.....
String imageName;
}
2-データベース/ firebaseデータベースから、画像名をオブジェクトに移動してハードコードします。そのため、Apple.pngという名前の画像がある場合は、そのオブジェクトになるオブジェクトを作成します。
Choice myChoice = new Choice(...,....,"Apple.png");
3-それでは、Firebaseストレージのアセットへのリンクを入手してください。
gs://your-project-name.appspot.com/
4 - 最後に、あなたのfirebaseストレージ参照を初期化して、そのようなループによってファイルを取得し始めます
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-それはそれです