Resize an image before uploading it to firebase

Resize using JavaScript Client-Side-Processing

We're using JavaScript resizing, which uses clients device processing power to resize the image, and works GREAT, saving us space and money, saving the netwrok unnecesary bandwidth, and saving the client a bunch of time and also money in most mobile cases.

The original script we are using came from here, and the procedure to use it is as simple as this:

<input type="file" id="select">
<img id="preview">
<script>
document.getElementById('select').onchange = function(evt) {
    ImageTools.resize(this.files[0], {
        width: 320, // maximum width
        height: 240 // maximum height
    }, function(blob, didItResize) {
        // didItResize will be true if it managed to resize it, otherwise false (and will return the original file as 'blob')
        document.getElementById('preview').src = window.URL.createObjectURL(blob);
        // you can also now upload this blob using an XHR.
    });
};
</script>

I believe that guy (dcollien) deserves a LOT of merit, so I would recommend you to vote his answer up.

You can also use Firebase Storage + Google Cloud Functions to upload an image, resize the image (using ImageMagick or similar), and write it back to Firebase Storage.

I have an example using these together here (though I trigger the Cloud Vision API, rather than an image resizer).

A quick side note: Firebase Storage doesn't have a Node.js client, instead we recommend using the GCloud-Node library.