I have just uploaded some images to firebase storage. I have a React App which I am using Google Firestore to fetch data (snapshot). I have a field imageURL which is a string in firestore and would like to paste this image url from storage.
Do I use the link pictured in the attached graphic? it has the url https://firebasestorage.googleapis.com/v0/b/..... or there is another link which is not viewable which starts with gs://domain.com... ?
You should instead store the path to the image in your bucket (not the URL), then use Firebase SDK for Cloud Storage and use getDownloadUrl() to fetch a URL programmatically in your app, as shown in the documentation.
Related
In our system the users upload their images using our mobile app to firebase storage which is a wrapper over google cloud storage bucket, the mobile app is using this library to do the upload, and then use the getDownloadUrl method (described in the link) to generate a download link like the following:
https://firebasestorage.googleapis.com/v0/b/{BUCKET_NAME}/o/{PARENT_FOLDER}/{IMAGE_NAME}?alt=media&token={UUID}
Then it sends the URL to our BE to store the link.
The download time for firebase storage links is much longer than downloading the exact same image directly from google cloud storage link which is simply could be generated from the following link template
https://storage.googleapis.com/{BUCKET_NAME}/{PARENT_FOLDER}/{IMAGE_NAME}.
As GCP link is faster (according to our own benchmark), then we need a way to map firebase link into its counter part in GCP storage to improve the download performance.
The solution described above to do the mapping is right for any image that is publicly available in the GCP bucket, however, if the image is not publicly available then it could be accessed using firebase link (maybe because it has the token in the link), but we can not access it using the GCP link and it gives the following error:
<Error>
<Code>AccessDenied</Code>
<Message>Access denied.</Message>
<Details>Anonymous caller does not have storage.objects.get access to the Google Cloud Storage object.</Details>
</Error>
My question is:
How can we access the image from GCP storage link, even if it is not public, given that we can not make all images public due to security reasons?
How can I retrieve Firebase storage image in flutter without getting downloadUrl and display it within some image compatible widget. I don't want my users to anyhow see download url even if they open my code
If you're using the FlutterFire Storage library in your app, you can call getData on a reference to the file to get its data. So with that you just need to know the path to the data, and you won't need the download URL in your application. Once you have the data locally, you can create an image out of it with: Converting a byte array to image in Flutter?
Unlike download URLs, the call to getData() is checked by security rules, so you'll have to ensure that the user is permitted to access the file.
I'm storing an image in the firebase storage and I get the download URL once it is uploaded. Is it possible to get the reference of the image that I've uploaded using the download URL later?
I'm using Firebase in React Native.
You can use the refFromURL method to get the reference.
https://firebase.google.com/docs/reference/js/firebase.storage.Storage#reffromurl
const ref = await storage().refFromURL(url);
I am trying to build a Firebase admin utility that I can use to upload files to Firebase Storage and then return a long lived URL that I can store in the Firebase Realtime DB to access this file.
I believe I can do this in the Firebase Console by going to my project's console, clicking Storage on the left, clicking Upload File. Once the file is uploaded, I can get a URL by selecting the file in the list to open the right information pane, and then expanding the File Location section.
In that section there is a Download URL which appears to be a long lived but revocable URL containing a token of some type. Is this URL safe to store in a DB for long term storage? It does appear to be the same URL that is returned from the file upload api, which another Google Codelab (for Flutter) showed being stored in the realtime database.
However, I cannot figure out how to generate that type of URL from the Firebase Storage Management API. I am using NodeJS, but it should apply to all versions of the API AFAIK. I can only find a getSignedUrl call which does not seem to return the same URL, and appears to be time limited and containing a link to the service account...not what I want to store in a database.
let bucket = admin.storage().bucket();
bucket.upload('innovation3.jpeg', {destination: 'image_assets/innovation3.jpeg'},
function(err, file) {
file.getSignedUrl({action: 'read'},
function(err, url) {
console.log('Url: ' + url);
})
});
Is it possible to get this URL from the Management API, or do I need to use some other method. What is recommended?
Signed URLs created with the Firebase Admin SDK (backed by the the Cloud Storage SDK) are different from Download URLs created by the Firebase client SDKs. They serve the same general purpose, but you can expect them to look different from each other. They are both safe to store long term, except you should know that Signed URLs have an expiration date, which are you not specifying in your call. In that case, I don't know what the effective expiration is going to be.
Each invocation of getSignedUrl will generate a new URL. There is not just one that's unique to the file.
I have question regarding the logic for implementing a profile image uploader and storing the image url in a database under the user uploading the image using react-native and firebase authentication, cloud functions, database and storage services.
An example of the way the imageUrl would be stored
{
“users”: {
“7ad9310fsasghsa72”: {
imageUrl: ‘imageHoster.com’
},
“4k2dH5lifs35kfsp0”: {
imageUrl: ‘imageHoster.com’
},
}
}
The question is, is the logic below a correct utilisation of firebase services in relation to implementing this feature or is there a better way?
User uploads image on mobile device through react-native
Image gets sent to a firebase cloud function, for validating it, reducing it to 150x150
Image gets stored in google cloud storage
URL returned from the stored image is stored in firebase database under the user who is uploading the image
Also using this firebase implementation what is the way for authenticating the user making the request inside of the cloud function so that I’m able to store the url of the image returned from storage service under that user in the database?
Thanks
You can check out the following link for callable cloud functions
Call functions from your app
With callables, Firebase Authentication and FCM tokens, when available, are automatically included in requests.
Your can use the auth data inside the request parameter to keep track of whose data is contained in the request.
Storing the image url string inside the database is the way to go if you would like to keep track of the user's profile photo. It is also the recommended way of building your app.
Cheers,if you get stuck,the community here will help.
Happy coding!