11

I'm trying to get Firebase Storage to work with an image service like Imgix or Cloudinary. However, the download URL's that Firebase provides, do not seem to work with these services.

For example: Cloudinary says you can fetch images like this:

http://res.cloudinary.com/demo/image/fetch/http://upload.wikimedia.org/wikipedia/commons/0/0c/Scarlett_Johansson_C%C3%A9sars_2014.jpg

However, my download URL looks more like this:

https://firebasestorage.googleapis.com/v0/b/project-503247351211329470.appspot.com/changedsoitdoesnotwork/o/O8Hv4nKOyGgcCyOLoVLH7cQw48y2%2Fimages%2F1.jpeg?alt=media&token=28eabf76-f85b-45aa-das3-fd945729d7c2

I changed some characters in the above url, so it won't work since I don't want a gazillion requests from Stackoverflow. :)

Is there something I can do differently? Can I perhaps make requests straight to the Storage Bucket?

Frank van Puffelen
  • 565,676
  • 79
  • 828
  • 807
Timon
  • 2,682
  • 1
  • 20
  • 33

2 Answers2

14

You can absolutely use a service like Imgix or Cloudinary with Firebase Storage URLs--the issue here (as is true with 99% of cases like this) is that the URL needs to be percent escaped when used in the fetch.

If we have a URL like: https://firebasestorage.googleapis.com/v0/b/fir-cloudvisiontest.appspot.com/o/images%2Fimage.jpg?alt=media&token=TOKEN

It will need to be escaped to something like: https%3A%2F%2Ffirebasestorage.googleapis.com%2Fv0%2Fb%2Ffir-cloudvisiontest.appspot.com%2Fo%2Fimages%252Fimage.jpg%3Falt%3Dmedia%26token%3D61d35caf-b209-485f-8248-a3c2aa717468 (yes, it actually re-escapes the escaped any percent encoding).

That would result in a Cloudinary URL which looks like: http://res.cloudinary.com/<your-project>/image/fetch/https%3A%2F%2Ffirebasestorage.googleapis.com%2Fv0%2Fb%2Ffir-cloudvisiontest.appspot.com%2Fo%2Fimages%252Fimage.jpg%3Falt%3Dmedia%26token%3DTOKEN

Given service differences in tolerance for URL encoding, your mileage may vary, so I recommend testing URLs with a tool like http://meyerweb.com/eric/tools/dencoder/ to verify that your images work.

Mike McDonald
  • 15,609
  • 2
  • 46
  • 49
  • 1
    Hello. This indeed works for me for Cloudinary. :) Therefore already marked as answer. Maybe you could help me out with the following though: For Imgix it doesn't work yet. I'm looking at https://docs.imgix.com/setup/serving-images. I choose "Web Folder Sources". If I take your example url and choose a domain: https://firebasestorage.googleapis.com/v0/b/fir-cloudvisiontest.appspot.com and then add the url like: https://.imgix.net/images%252Fimage.jpg%3Falt%3Dmedia%26token%3DTOKEN it should work right? Maybe you can give your thoughts, otherwise I'll contact support. :) – Timon Jun 08 '16 at 17:35
  • Not sure--I would assume it would work, though I'm not too familiar with it. Using the Web Proxy method and signing it would be the closest approximation to the Cloudinary solution. Long term, I hope that imgix supports GCS buckets in addition to S3 buckets, since this problem would be solved if they did :) – Mike McDonald Jun 09 '16 at 04:45
  • 1
    Thanks for the reply. I'll contact Imgix and see if they can do anything about it. :) – Timon Jun 09 '16 at 16:04
  • 1
    @Timon did you ever get firebase storage images to work with imgix? – jasan Jul 18 '16 at 01:13
  • @Timon also whats ur opinion on cloudinary vs imgix – jasan Jul 18 '16 at 07:13
  • @jasan I received an email from Imgix they were working on implementing it. I haven't received an email that it was implemented though. You can maybe email imgix support at support@imgix.com to ask about this feature. I can't really give an opinion on the services since I haven't compared them yet. You can test them out both with a free trial though :). – Timon Jul 18 '16 at 12:54
  • @Timon, they said they were implementing GCS buckets? Neat--I asked about this in June and never got a response, so I'm glad they let you know :) – Mike McDonald Jul 19 '16 at 00:17
  • @MikeMcDonald they said they were working on supporting a URL structure with unknown query parameters (like "token" for example). Don't know about the current status though. :) – Timon Jul 19 '16 at 14:20
5

When using any of the cloudinary SDKs, you can create a fetch URL using the url() method. The following example uses the JavaScript SDK:

var cl = cloudinary.Cloudinary.new( {cloud_name: "<your cloud>"});
var storageRef = firebase.storage().ref();

storageRef.child('images/image.jpg').getDownloadURL().then(function(url) {
  var cloudinary_url = cl.url(url, {type: "fetch"});
  // Do something with the URL...
  console.log(cloudinary_url);
}

This will ensure that the URL is properly encoded.

tocker
  • 1,752
  • 1
  • 11
  • 9