Firebase Cloud Functions Https Callable Image Upload

Uploading photos to Google Deject Storage through Firebase Callable Functions

The opinions stated hither are my own, not those of my visitor.

Good morn!

A few weeks ago I was working on a side-project that involved checking into various entities. While this implementation is coffee, it could be easily swapped out for other types of crafts, like pizza or tea by irresolute a few strings. Information technology'due south also a Progressive Spider web App, making information technology easily accessible across platforms.

s/coffee/annihilation else/

Everything is hosted on Firebase, using its services for hallmark, hosting, databases, and server execution. In particular, Firebase Callable Functions brand it trivial to serve authenticated code with JSON payloads. The client passes auth tokens to the server while the server code will validate it and get you the user id earlier your code fifty-fifty starts.

However, this does mean the manner you lot call these functions from the client aren't going to be the same as making a standard HTTP request.

Ordinarily this isn't a problem, but my web app also includes the power to optionally have photos and upload them as part of the checkin. How do I upload a file to Google Cloud Storage through a Firebase Function?

To accomplish this, I used two StackOverflow posts [1] [2] and combined them to get an finish-to-end working process. It was a chip more convoluted than simply sticking the two answers together, then I'll walk through what I did. Hopefully someone volition discover this useful, even if information technology's merely hereafter me.

In my web app, I am using the Polymer framework and have installed many components to make available to me. Ane component is the newspaper-input-file which is where the user selects the file.

In my submission function, I read the image information and catechumen it to a base64 value.

This completes my cheque-in and returns the checkin ID, which is a unique ID from Firestore. Afterward on in the part I can use this to create a share dialog, so they tin post it to other social networks.

You'll notice the httpsCallable in the heart of this code, which sends all of the parameters. The fileData field is generated by the readFile part and can optionally be undefined.

Subsequently reading StackOverflow question [1] and several others, I finally arrived at an implementation that worked without OOM errors.

I don't 100% understand what is going on here, other than converting the binary prototype information to base64. This encapsulated role returns the cord as the resolution to a promise, making it easy to call from my sendCheckin function above.

Now that I've sent the base64 data to my Firebase Function, how practise I shop it? My checkin function does a lot of things: store a 'Checkin' object in a database, optionally upload my photo, add it to my feed, add it to the feed of my friends, and update the metrics for the entity I've checked into. For this post, I'k going to focus but on the nigh relevant office of the execution.

My project ID is determined by the Service Business relationship Key (sak) I've downloaded. You see that I open up a storage bucket, requite the file a random name based on two random floats, then update my checkin object with the filename to post in my photos feed and reuse in other places.

This is probably non the best manner to give the file a unique proper name, only I can always ready it subsequently. As the photo is tied to the checkin, I can utilize a improve approach in the time to come without having to worry about applying this retroactively.

I use a writeFile office that I've defined in a separate file, using some help taken from StackOverflow answer [2]. I did rewrite their answer in a mode that it is a Promise that tin can be easily integrated into a larger application.

You encounter that I take the string content, convert information technology back to binary data from base64, and throw information technology into a stream that writes the data to the file that I take divers.

This arroyo works. I'm sure in that location are some potential pitfalls. Still, the benefits are pretty good. I'm able to store the file in a way that can exist associated with the user by taking advantage of Firebase services without a lot of manual rewiring.

This works for any binary data, or at least it should. I imagine that at that place'due south some upper limit based on memory limitations, but if photos piece of work you can exist fairly confident on what kinds of stuff yous can do.

moorepeammeak.blogspot.com

Source: https://fleker.medium.com/uploading-a-photo-to-google-cloud-storage-through-firebase-callable-functions-1a545aea43ac