Uploading by firebase storage - firebase

I tried to uplad (multi photos) using firebase storage (site) and it upladed successfully but I can NOT find it in database section anywhere and also it do not appear in application.
How can I upload multi photos by firebase site and appear on database section and also my application?
Thank you

Firebase storage and realtime database are two different entities, so after uploading image to firebase storage you need to save the download url in realtime database on your own, at path of your choice, in the following example, images url are being saved at images path
var uploadTask = storageRef.child('images/rivers.jpg').put(file);
uploadTask.on('state_changed', function(snapshot){
var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
console.log('Upload is ' + progress + '% done');
}, function(error) {
// error uploading file
}, function() {
// File uploaded successfully, now store the download url in realtime database
uploadTask.snapshot.ref.getDownloadURL().then(function(downloadURL) {
console.log('File available at', downloadURL);
firebase.database().ref('images').set({
image:downloadURL
});
});
});
before saving images url in realtime database make sure you have enabled realtime database for your project

You can't save photos directly in the realtime-database. After you upload the photos get the URLs and save them in the realtime-database.

Related

Firebase admin upload PayloadTooLargeError: request entity too large

I am using Firebase admin to upload a 250MB video file to cloud storage.
Heres my code:
await bucket.upload(downloadVideoResponse.filePath, { destination, resumable: false })
This code throws the error:
PayloadTooLargeError: request entity too large
How do I remove the file size upload limit? I've look at Firebase storage rules but I do not have any rules imposing a file size limit.
This hints at an upload limit for non resumable files:
https://cloud.google.com/storage/docs/uploads-downloads#size
The answer is simply as follows:
await bucket.upload(downloadVideoResponse.filePath, { destination, resumable: true })
Which seems to remove the file size limit.

Download images to users local machines via Firebase Functions

Is it possible to download images to users local machines directly via Firebase functions? How to do it in case that:
Images are stored in Firebase storage.
Images are stored on other cloud storage providers (I can access them with url).
I don't want to download those images via url links so that I don't reveal the url the image is located on.
Is it possible to download images to users local machines directly via Firebase functions?
No, it's not possible. The client must reach out to the server in order to download content. The content can't be "pushed" to the client without its authorization. That would be a huge security hole for the client.
This is why download URLs exist - to give the client something to download via a normal HTTP request.
You can create a presigned URL using the Google APIs library. The Firebase bucket is just a regular GCS bucket. Something like this:
const admin = getFirebaseAdmin();
let bucket = admin.storage().bucket(firebaseConfig.storageBucket);
const f = bucket.file(location);
if (!(await f.exists())) {
throw logError(`No file found at specified location: ${location}`, functionName)
}
const url1 = await f.getSignedUrl({
action: 'read',
expires: new Date((new Date).getTime() + (24 * 60) * 60000) // expires in 24 hours
});
const url = url1[0];
return url;

Flutter - Uploading Image to Firebase Storage

I am trying to create an admin application that can select and upload an image to the Firebase storage and after that, I want the image URL to automatically reflect in the document that is sending data to the client-side application.
The only problem with this is that I only know how to upload an image to Firebase storage from the admin application. I haven't figured a way, as to how can I get the image URL into my document in Cloud Firestore.
Any suggestions or direction regarding this will be helpful.
I am using the flutter framework.
Database structure :
SkinTreatment :
"SkinTreatment": {
"someDocumentName": {
"title": "Threading",
"packageDetails":"This package will provide you with normal upper EyeBrow Threading",
"price" : "200"
"duration": "75mins"
},
"someDocumentName2": { ... },
"someDocumentName3": { ... }
}
You can certainly write code to write the path and/or URL of a file in Cloud Storage to any database. If you have a StorageReference object representing a file that was uploaded, you can use its getPath() method to get a path to the file in storage, and you can use getDownloadUrl() to asynchronously get a download URL as well.
For help writing data to Firestore, there is plenty of documentation.

How should I save references to firebase storage objects?

Store references by name (users/1/profile.png). Then the URL needs to be generated all the time.
const url = await firebase
.storage()
.ref('users/1/profile.png')
.getDownloadURL()
Store references by URL. The access token could be revoked which would cause issues trying to generate a new one and update it in the database.
const url = await firebase
.storage()
.refFromURL(invalidURL)
.getDownloadURL()
Related to #1. Store by file name only so files can be moved without having to update database references.
const url = await firebase
.storage()
.ref(`users/${user.id}/${user.image}`)
.getDownloadURL()
The download URL and the reference path are two different things and I'd store each of them as appropriate (and sometimes both).
Store the Download URL when you want to directly serve the file from storage (e.g. an <img> tag).
Store the Reference Path when you need to keep a reference to the file to modify it later.
Calling getDownloadURL() does trigger a network request and so it's advisable to cache the result when possible to avoid unnecessary extra work/latency.

How to list files and folders in Firebase Storage

I am working on a school project and have elected to use Firebase as a storage option for uploading/downloading files via an app that I am developing. I would like to be able to display to the user a list of all the files within a specific folder, and also give that user the ability to upload files. However, it seems that the only way to access information within the firebase storage, is to, as the developer, know what the file is rather than find files and display them dynamically. I hope I am making sense with this.
Basically, I would like my app to access the firebase storage, go to a specified folder, and then create a bunch of image-buttons in a viewgroup based off of what is in the folder without having to know before hand what to expect.
Would this be possible via metadata? As in, when ever a new file/folder is created within this parent folder, could I also programmatically update that parent folder's metadata to say, "hey there are these specific files within this folder?"
var storage = firebase.storage();
// Create a storage reference from our storage service
var storageRef = storage.ref();
// Create a child reference
var imagesRef = storageRef.child('yourMainFolder');
// Find all the prefixes and items.
imagesRef.listAll()
.then((res) => {
res.items.forEach((itemRef) => {
itemRef.getDownloadURL().then(function (url) {
console.log(url)
}).catch(function (error) {
// Handle any errors
});
});
res.prefixes.forEach((folderRef) => {
console.log("folder", folderRef._delegate._location.path_.split('/')[1])// In my case:)
});
}).catch((error) => {
// Uh-oh, an error occurred!
});
Currently there is no API in Firebase Storage to list all files in a folder.
What you can do is maintain a database of metadata information (such as file names and folder names) somewhere else.
Firebase Realtime Database would be a good choice for this task.

Resources