unable to download images form firebase storage [duplicate] - firebase-storage

Question

I have a function that successfully uploads an image to my cloud storage bucket.
With another function I want to get the URL of the image to show it on my page (With <img.../>)
getImageUrl(id: string) {
return this.storageRef.child('X/' + id ).getDownloadURL();
But when I do this.. I get an 'invalid' URL and when I copy the URL and go to it, I get the following message:
{
"error": {
"code": 403,
"message": "Permission denied. Could not perform this operation"
}
}
I read somewhere that this might be because there is no token attached in the URL, but how can I enable this?

Answer 1

The last couple of days I have been trying to understand Firebase Storage rules and I don't know why but when I separate rules for writing and for reading like this for example:
allow write: if request.auth != null && request.resource.size < 3 * 1024 * 1024;
allow read: if true;
the code works great and I can write and read using getDownloadURL(), but when I use them together like this:
allow read, write: if request.auth != null && request.resource.size < 3 * 1024 * 1024;
I got the same error as you:
{
"error": {
"code": 403,
"message": "Permission denied. Could not perform this operation"
}
}
I can write when using them together, but when I try to read the file using getDownloadURL(), the issue appears. Maybe you could try separating the rules as I mention and see if it works. I hope it solves your problem. Also, don't forget that the rules are live after 5 minutes from the moment you set them. Good luck.

Answer 2

You have to set Storage Security Rules, read more about this here

Answer 3

Just faced similar issue with my project, if anyone is still struggling with it, you have to provide proper rules for your Cloud Storage from the Firebase console.
Checkout this link to get full detail of the rools.
If you are uploading any object on your storage, you will require to add write rule under Firebase console > Storage > Rules.

Answer 4

I've faced the same issues with access to my storage files in my iOS project. I don't have any custom security rules. Just what's default in configuration. Breaking rules to new lines helped!
rules_version = '2';
service firebase.storage {
match /b/{bucket}/o {
match /{allPaths=**} {
allow write: if request.auth != null;
allow read;
}
}
}
I don't know if this is some firebase bug but it helped:)

Answer 5

just use this rule for image
service firebase.storage {
match /b/{bucket}/o {
match /images/{imageId} {
// Only allow uploads of any image file that's less than 5MB
allow write: if request.resource.size < 5 * 1024 * 1024
&& request.resource.contentType.matches('image/.*');
}
}
}

Answer 6

Separating read and write in different lines makes the issue go away, plus in your url you can just append ?alt=media to render it on screen.
allow write: if true; //your conditino
allow read: if true;

Answer 7

You need to use the getDownloadURL method. This will allow you to obtain the URL needed to download the image or for reference in your own html.
See the reference documentation below:
https://firebase.google.com/docs/storage/web/download-files#download_data_via_url

Answer 8

For my case, I accidentally delete the files before so it needs to show the File not found message but don't know why it was showing the Permission denied message.

Answer 9

Edit:
Although this was a temporary fix but it comes with security vulnerability (refer to #Joao Gavazzi's comment).
I was able to solve this by changing the FirebaseStorage security rules from default to:
rules_version = '2';
service firebase.storage {
match /b/{bucket}/o {
match /{allPaths=**} {
allow read, write: if true;
}
}
}