How To pull photo down and display it from firebase? - firebase

I am making a react native app with expo and firebase. I have uploaded photos to firebase successfully as a blob but want to be able to pull the photos down from firebase and display them to the user. I need to be able to display the user's profile photos whenever they log out or back into the app.
I am not finding any documentation in Expo/React Native/Firebase about downloading. I am only seeing docs on uploading and blobs.
Can anyone point me in the right direction? Is uploading the blob form of the photo and downloading it the correct way to save photos from a user's phone to the database?
These are the resources I have reviewed:
https://firebase.google.com/docs/storage/web/download-files
https://docs.expo.io/versions/latest/sdk/imagepicker/
https://github.com/expo/firebase-storage-upload-example/blob/master/App.js
https://forums.expo.io/t/uploading-images-without-react-native-fetch-blob/981/7

The Cloud Storage SDK from Firebase for JavaScript doesn't have any methods to directly download the bytes from a file.
The way to download the data is through the download URL. So you first get the download URL of the file you're interested in, and then download the data with for example an XMLHttpRequest (as shown in the example in the documentation), or with a similar method for your platform to download data from a URL. For expo the latter seems to be FileSystem.downloadAsync(...).

Related

Can't access uploaded files through Firebase storage on web

I'm trying to access/download files that have been uploaded to Firebase storage but I can't figure out how to. Some of the files have a create new access token button under the storage location which gives me a link to the file on the web. Unfortunately, this is only a few files and seems to only be ones uploaded from localhost?
I can't find any reference to this on the documentation, this should be achievable through the Firebase dashboard?
I've tried setting the access rules to allow reads in all cases which hasn't helped.
Thanks
In general, you're supposed to use getDownloadURL(), as shown in the documentation, from within your web or mobile app to generate a download URL for use within your app. Typically, the console is only used to revoke the tokens that enable to download of each file through that URL.
If that's not specifically what you're trying to do, perhaps you want to read up on other was to make data public in Cloud Storage. The Firebase console is not really the best mechanism to manage downloadable content.

How can I load images from Firebase Storage using the download token?

I made an app using Flutter, and I want to load some images from the Firebase Storage. I got the Download Token for every picture I have. How can I load an image by using that Download token.
For now, I'm displaying that image like this
Image.network('https://firebasestorage.googleapis.com/v0/b/****-****.appspot.com/o/fileName?alt=media&token=downloadToken'),
In my database I only saved the Download Token and not both Download Token and Image Name. I load the document that stores the Download Token by using a StreamBuilder, I need all the data be live and as I display other fields in my Column I want to display that image too.
I know in Android I could have loaded an image only by it's Download Token.
It is possible here too?
If yes, could you help me implement that?

Uploading application content to Firebase

I am attempting to make my first Android application using the Firebase free trial for the server side of things. My app is fairly limited in scope and it is basically just a way of viewing some pre-created content that I have made.
I have manually created some JSON for the app to parse, and along with the JSON I have some images which I want the app to be able to download. However, I have no idea of how to store these images in Firebase so that they can be retrieved by the app.
My issue is... I have searched every variation of "Upload images to firebase" which I can think of and they are all about the user uploading their own content to Firebase via the app and not for me to upload the content of the app so it is available to be downloaded by the user.
Would anyone be able to point me in the direction of how to set this up? I can upload my JSON to Firebase to create the "database", it is just I do not know how to go about uploading my application data to Firebase so that users can then view it.
Thanks
You can upload your images manually from Firebase Storage.
from the left menu choose Storage and then upload file.
If you need the image URL. Press on the image and it will show details section at the bottom of this section you will find Download URL

Firebase Storage gs url to http

I downloaded a Unity project that use images stored in Firebase server using the following link:
https://zplayer360-86b30.firebaseapp.com
Now I want to reproduce this with my own file. I created a Firebase project using Firebase Console, uploaded manually the images, but now I click "copy folder url" button and it provide me only this link:
gs://insidehome-29c9e.appspot.com/
I need a free HTTP public link.
How can I obtain this?
When you upload a file to Firebase Storage, it automatically gets:
a Google Storage URL (starting with gs://), which you can use to access the file through the Firebase Storage SDK and the Google Storage API.
a download URL (starting with https://), which is a publicly-readable-but-non-guessable URL that you can use to download the URL with regular HTTP clients
What you're looking for is the second URL, which you can find in the Firebase Storage console when you select a file:
At the bottom right you can see the download URLs for the file. One of these is auto-created when you upload the file, but you can create more of them or revoke existing ones.
I am not entirely sure what you mean by "free" URL. The link is publicly readable, but downloads will count against your Firebase Storage download quota of course.
If there are no rules on Firebase storage. You are not protected.
Then it's publicly-readable-and-guessable, One can convert gs:// URL to https:// to download any file without Google SDK's.
https://firebasestorage.googleapis.com/v0/b/[projectID].appspot.com/o/[folderName]%2F[fileName]
Google Storage URL
gs://invitepeople-5d38c.appspot.com/profilePhotos/profile_1.jpg
Https downloadable URL
https://firebasestorage.googleapis.com/v0/b/invitepeople-5d38c.appspot.com/o/profilePhotos%2Fprofile_1.jpg?alt=media
Don't guess profile_2.jpg :)

How to r/w between Google Spreadsheet and Firebase Storage?

I have a Google spreadsheet with a list of image filenames in rows (e.g. tree01, tree02, car01, building01, etc.) and I have a Firebase Storage with a list of image files with the same name (e.g. tree01, tree02, car01, building01, etc.).
How can I get the filename in spreadsheet? Then use the filename to get a download URL in Firebase storage and then put the download URL back to the spreadsheet?
I know how to use Google App Script to r/w with spreadsheet. I have searched online that using Google Web App, using "Web Server for Chrome" and get the download URL from Firebase Storage, but I don't know how to put them together. Please help.
I solve my problem after studying some links. And following up with a useful links for my case.
passing data between google app script (.gs) and google web app (.html)
(https://developers.google.com/apps-script/guides/html/communication)
firebase storage tutorial for web app
(https://github.com/firebase/quickstart-js)
firebase database tutorial for google app script
(https://sites.google.com/site/scriptsexamples/new-connectors-to-google-services/firebase)
I can now communicate between firebase-storage, firebase-database and google spreadsheet

Resources