katowulf/functions_index.js

## functions_index.js
const functions = require('firebase-functions');
const util = require('util');
const admin = require('firebase-admin');
admin.initializeApp();

exports.uploadedFile = functions.storage.object().onFinalize((uploadedObject) => {
  console.log('object keys', Object.keys(uploadedObject));

  // This contains the custom metadata
  console.log('metedata keys', Object.keys(uploadedObject.metadata));

  /*
    // Included for learning purposes
    // In our example HTML, I showed a use case where the metadata wouldn't
    // be available in the triggered data due to doing the code in two steps.
    // In cases like that, where it's not in the trigger data, we can grab it
    // with the Admin SDK, which Uses Cloud Storage SDK under the hood

  const file = admin.storage().bucket().file(uploadedObject.name);
  return file.getMetadata().then(md => {
    console.log('Metadata from Cloud Storage');
    conosole.log(JSON.stringify(md[0], null, 2));  // Our custom metadata is buried in here!
  }).catch(e => console.error(e));

  */
});

## public_index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test Storage metadata with Functions</title>
    <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
    <script src="https://www.gstatic.com/firebasejs/4.7.0/firebase.js"></script>
    <script>
      // Initialize Firebase
      var config = { <YOUR APP KEYS> };
      const app = firebase.initializeApp(config);
      let $log;

      var $input;
      jQuery($ => {
        $('button[data-action="upload"]').click(uploadStuff);
        $log = $('div[data-id=log]');
      });

      function uploadStuff() {
        const file = $('input[name=fileToUpload]').prop('files')[0];
        const ref = firebase.storage().ref().child('foo.gif');
        console.log(file);
        log(`Uploading file "${file.name}"`);

        /******
         This works too, but creates a timing issue since metadata won't be part
         of the Functions triggered event (see above).
         Leaving this here for learning purposes.

        ref.put(file).then(function(snapshot) {
          log('Updating metadata');
          return ref.updateMetadata({
            customMetadata: {
              foo: "bar"
            }
          }).then(() => log('Finished'));
        }).catch(log);

        ******/
      }

      function log(textOrError) {
        const $p = $('<p></p>');
        if( typeof textOrError !== "string" ) {
          console.error(textOrError);
          $p.addClass('error');
          textOrError = textOrError + '';
        }
        else {
          console.log(textOrError);
        }
        $p.text(textOrError).appendTo($log);
      }
    </script>
  </head>
  <body>

    <h2>Upload a file</h2>
    <input type="file" name="fileToUpload">
    <button data-action="upload">Upload</button>

    <div data-id="log"></div>

  </body>
</html>
	const functions = require('firebase-functions');
	const util = require('util');
	const admin = require('firebase-admin');
	admin.initializeApp();

	exports.uploadedFile = functions.storage.object().onFinalize((uploadedObject) => {
	console.log('object keys', Object.keys(uploadedObject));

	// This contains the custom metadata
	console.log('metedata keys', Object.keys(uploadedObject.metadata));

	/*
	// Included for learning purposes
	// In our example HTML, I showed a use case where the metadata wouldn't
	// be available in the triggered data due to doing the code in two steps.
	// In cases like that, where it's not in the trigger data, we can grab it
	// with the Admin SDK, which Uses Cloud Storage SDK under the hood

	const file = admin.storage().bucket().file(uploadedObject.name);
	return file.getMetadata().then(md => {
	console.log('Metadata from Cloud Storage');
	conosole.log(JSON.stringify(md[0], null, 2)); // Our custom metadata is buried in here!
	}).catch(e => console.error(e));

	*/
	});
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Test Storage metadata with Functions</title>
	<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
	<script src="https://www.gstatic.com/firebasejs/4.7.0/firebase.js"></script>
	<script>
	// Initialize Firebase
	var config = { <YOUR APP KEYS> };
	const app = firebase.initializeApp(config);
	let $log;

	var $input;
	jQuery($ => {
	$('button[data-action="upload"]').click(uploadStuff);
	$log = $('div[data-id=log]');
	});

	function uploadStuff() {
	const file = $('input[name=fileToUpload]').prop('files')[0];
	const ref = firebase.storage().ref().child('foo.gif');
	console.log(file);
	log(`Uploading file "${file.name}"`);

	/******
	This works too, but creates a timing issue since metadata won't be part
	of the Functions triggered event (see above).
	Leaving this here for learning purposes.

	ref.put(file).then(function(snapshot) {
	log('Updating metadata');
	return ref.updateMetadata({
	customMetadata: {
	foo: "bar"
	}
	}).then(() => log('Finished'));
	}).catch(log);

	******/
	}

	function log(textOrError) {
	const $p = $('<p></p>');
	if( typeof textOrError !== "string" ) {
	console.error(textOrError);
	$p.addClass('error');
	textOrError = textOrError + '';
	}
	else {
	console.log(textOrError);
	}
	$p.text(textOrError).appendTo($log);
	}
	</script>
	</head>
	<body>

	<h2>Upload a file</h2>
	<input type="file" name="fileToUpload">
	<button data-action="upload">Upload</button>

	<div data-id="log"></div>

	</body>
	</html>