CODEWITHSUNDEEP
firebasefirebase-storage
user5489654
user5489654

Reputation: 479

Is it possible to access Firebase Storage resource URL directly?

I am building a cross platform mobile application that uses Firebase for its data storage and user authentication. I am also using an SDK which requires a direct URL to some mp4 files. So far we have hosted these video files on a separate server, but due to the simplicity/scalability of Firebase, I'd like to store them on it rather than separately. I need to be able to have a direct URL to the file, however.

When I go to access a test file from my browser using the file's Firebase storage location, for example:

APPNAME.appspot.com/RESOURCENAME.mp4

I get a 404 error.

I have set my rules to the following:

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

Is there a way to access a Firebase Storage resource directly from a URL?

EDIT: I should add that I require a url that is not randomly generated, but rather based on the file's logical location in storage, since the resource file is accessed dynamically based on the file's UUID in the application. There are also too many files to store/look up an unguessable link.

Upvotes: 3

Views: 6501

Answers (4)

david_gw
david_gw

Reputation: 11

realise this post is getting on a bit now, but here's my working function (written for Vue.js 2 )which updates a field in a firestore doc ('profilePic') with the correct URL needed for downloading and displaying an image on a webpage. Not tested with audio files.

submitImage() {
      const user = firebase.auth().currentUser;
      var storageRef = storage
        .ref()
        .child(`user/${user.uid}`)
        .child(this.file.name);
      //update the storage area with the image, and add the correct download URL to the database
      storageRef
        .put(this.file)
        .then(function() {
          console.log(`Successfully uploaded profile picture!`);
          storageRef.getDownloadURL().then(function(url) {
            profiles
              .doc(user.uid)
              .update({ profilePic: url })
              .then(function() {
                console.log("Successfully updated path");
              })
              .catch(function(error) {
                console.error("There was a problem with the update", error);
              });
          });

          this.file = null;
        })
        .catch(function(error) {
          console.log("There was an error uploading the picture - ", error);
        });
    }

The file is obtained from a html file-input field which is stored in the variable 'file', a the storage path is created (if it doesn't exist already) which is named after the current-user's UID, then the corresponding firestore doc field is updated with the returned value from getDownloadURL() (A really long string with a reference to the storage bucket and an access token). Now my web-app displays the image correctly :). Took me a bit of time to get this so I wanted to share the solution which worked for me!

For reference: https://firebase.google.com/docs/storage/web/download-files

Upvotes: 1

A. Ilazi
A. Ilazi

Reputation: 341

I tried to figure out the same problem as you. So I checked the Firebase Storage and clicked on an image. There you should see your image in a small version. checked where Firebase stored it and found out the URL where it is located. It`s something like: 

https://firebasestorage.googleapis.com/v0/b/" + yourappname + ".appspot.com/o/images%2F" +  imagename+ "?alt=media

I also changed the settings of read and write to: 

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

Upvotes: 1

James Poag
James Poag

Reputation: 2380

While this isn't the answer to your question, you should really be using Firebase Hosting for this purpose. Firebase Storage is geared more towards User uploads and sharing than static content.

Uploading to hosting is super simple using the Firebase CLI. https://www.youtube.com/watch?v=meofoNuK3vo You just put the files you want to host in the 'public' folder and run firebase deploy.

Upvotes: 2

Frank van Puffelen
Frank van Puffelen

Reputation: 599176

The default access to the files in Cloud Storage is governed by your security rules. That is intentional.

But whenever you upload a file through the Firebase SDK, it also generates a so-called download URL for that file. The download URL is an unguessable URL that provides read-only access to the file. It is made for sharing with other users of the app in the way you describe here.

To generate a download URL, follow the instructions in the docs here: https://firebase.google.com/docs/storage/ios/download-files#generate_a_download_url (similar sections exist in the docs for other platforms).

Upvotes: 1

Related Questions