How To Read Image Video From Firebase

In the post with the video player, I showed an example with a video uploaded on my hosting.

However, some of you want to use some free hosting to upload images or videos, for example, Firebase Storage.

It’s possible to get a direct link to your media, however, in this method you allow everybody to get access to your media. They become public to everyone, keep it in mind.

First, create a Firebase project and upload some media to Storage.

I created a project called UploadThings and uploaded image called image.png and video called video.mov.

Go to the Rules section and edit rules allowing everyone to read data.

That rule in text:

service firebase.storage {
    match /b/{bucket}/o {
        match /{allPaths=**} {
            allow read;
            allow write: if request.auth != null;
        }
    }
}

Now, your files are public.

Go to Files and copy the link to your files.

Ignore the beginning “gs://” the rest is YOUR_PROJECT_NAME.

The whole link to your media is:

https://firebasestorage.googleapis.com/v0/b/{YOUR_PROJECT_NAME}/o/{PATH_TO_THE_FILE_WITH_EXTENSION}?alt=media

Here is an example from my Firebase:

https://firebasestorage.googleapis.com/v0/b/uploadthings-2777a.appspot.com/o/image.png?alt=media