Adding firebase storage capability (w/ multiple files)

bower.json

@@ -25,7 +25,9 @@
   "devDependencies": {
     "iron-component-page": "PolymerElements/iron-component-page#1 - 2",
     "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0",
-    "web-component-tester": "Polymer/web-component-tester#^6.0.0"
+    "web-component-tester": "Polymer/web-component-tester#^6.0.0",
+    "paper-progress": "PolymerElements/paper-progress#1 - 2",
+    "paper-toast": "PolymerElements/paper-toast#1 - 2"
   },
   "variants": {
     "1.x": {
@@ -37,7 +39,9 @@
       "devDependencies": {
         "iron-component-page": "PolymerElements/iron-component-page#^1.0",
         "web-component-tester": "^4.0.0",
-        "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
+        "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
+        "paper-progress": "PolymerElements/paper-progress#^1.0",
+        "paper-toast": "PolymerElements/paper-toast#^1.0"
       },
       "resolutions": {
         "webcomponentsjs": "^0.7"

demo/firebase-storage-multiupload-demo.html

@@ -0,0 +1,201 @@
+<!--
+@license
+Copyright 2016 Google Inc. All Rights Reserved.
+Use of this source code is governed by a BSD-style
+license that can be found in the LICENSE file or at
+https://github.com/firebase/polymerfire/blob/master/LICENSE
+-->
+
+<link rel="import" href="../../polymer/polymer.html">
+<link rel="import" href="../../paper-progress/paper-progress.html">
+<link rel="import" href="../../paper-toast/paper-toast.html">
+<link rel="import" href="../polymerfire.html">
+
+<dom-module id="firebase-storage-multiupload-demo">
+  <template>
+    <firebase-app
+      auth-domain="polymerfire-test-6abc0.firebaseapp.com"
+      database-url="https://polymerfire-test-6abc0.firebaseio.com"
+      api-key="AIzaSyBxZI1BAgX9obocHQw_yhmHV9BIOpaNWZo"
+      storage-bucket="polymerfire-test-6abc0.appspot.com"></firebase-app>
+    <firebase-auth id="auth" user="{{user}}" provider="google" on-error="catchError"></firebase-auth>
+
+    <button on-tap="signIn">Sign In</button><br/>
+
+    <template is="dom-if" if="{{user}}">
+      <firebase-storage-multiupload
+        id="fs"
+        path="/users/{{user.uid}}/files"
+        files="[[files]]"
+        upload-tasks="{{uploadedFiles}}"
+        on-error="catchError"
+        force-unique
+        auto>
+      </firebase-storage-multiupload>
+
+      <input id="file-uploader" type="file" on-change="onFileUpload" multiple /> <br/>
+      <hr/>
+      <template is="dom-repeat" items="[[uploadedFiles]]">
+        <div style="padding: 20px">
+          <firebase-storage-upload-task
+              task="[[item]]"
+              id="task-[[index]]"
+              bytes-transferred="{{item.bytesTransferred}}"
+              total-bytes="{{item.totalBytes}}"
+              state="{{item.state}}"
+              download-url="{{item.downloadUrl}}"
+              metadata="{{item.metadata}}"
+              path="{{item.path}}"></firebase-storage-upload-task>
+
+
+
+          path from snapshot: [[item.snapshot.ref.fullPath]] <br/>
+          path from upload-task: [[item.path]] <br/>
+          storage uri: [[gsUri]] <br/>
+          state: [[item.state]] <br/>
+          metadata-contentType: [[item.metadata.contentType]] <br/>
+          <br/>
+
+          <template is="dom-if" if="[[!isEqual(item.state, 'success')]]">
+            <paper-progress value="{{item.bytesTransferred}}" min="0" max="{{item.totalBytes}}"></paper-progress>
+          </template>
+
+          <br/>
+
+
+          <template is="dom-if" if="{{isEqual(item.state, 'success')}}">
+
+            <firebase-storage-ref
+              path="{{item.path}}"
+              storage-uri="{{gsUri}}"
+              id="ref-[[index]]"
+              metadata="{{item.refMetadata}}"
+              download-url="{{item.refDownloadUrl}}"></firebase-storage-ref>
+
+            <a href="{{item.refDownloadUrl}}">
+              {{item.refDownloadUrl}}
+            </a><br/>
+            <button on-tap="download" value="{{index}}">Download</button>
+            <button on-tap="deleteFile" value="{{index}}">Delete</button>
+          </template>
+
+          <template is="dom-if" if="[[!isEqual(item.state, 'success')]]">
+
+
+            <template is="dom-if" if="[[isEqual(item.state, 'running')]]">
+              <button on-tap="cancel" value="{{index}}">Cancel</button>
+              <button on-tap="pause" value="{{index}}">pause</button>
+            </template>
+
+            <template is="dom-if" if="[[isEqual(item.state, 'paused')]]">
+              <button on-tap="resume" value="{{index}}">resume</button>
+            </template>
+          </template>
+          <br/>
+        </div>
+      </template>
+    </template>
+    <paper-toast id="toaster"></paper-toast>
+  </template>
+
+  <script>
+    (function() {
+      'use strict';
+
+      Polymer({
+        is: 'firebase-storage-multiupload-demo',
+
+        properties: {
+          user: Object,
+          files: {
+            type: Array,
+            notify: true,
+            value: [],
+          },
+          uploadTasks: {
+            type: Array,
+            observer: '_uploadTasksChanged'
+          },
+          uploadedFiles: {
+            type: Array,
+          }
+        },
+
+        catchError(e) {
+          this.$$('#toaster').show({
+            text: e.detail.message
+          });
+        },
+
+        cancel(e) {
+          this.$$('#task-' + e.target.value).cancel();
+        },
+
+        resume(e) {
+          this.$$('#task-' + e.target.value).resume();
+        },
+
+        pause(e) {
+          this.$$('#task-' + e.target.value).pause();
+        },
+
+        download(e) {
+          this.$$('#ref-' + e.target.value).getDownloadURL().then(function(d) {
+            console.log(d)
+            window.open(d, '_blank')
+          })
+        },
+
+        deleteFile(e) {
+          this.$$('#ref-' + e.target.value).delete().then(function(d) {
+            console.log(d)
+          })
+        },
+
+        // deleteFile(e) {
+        //   this.$$('#fsd').path = e.target.value;
+        //   this.$$('#fsd').destroy().then(function(x){
+        //     this.$$('#toaster').show({
+        //       text: 'Successfully deleted ' + e.target.value
+        //     });
+        //   }.bind(this)).catch(function(error){
+        //     console.log(error);
+        //     this.$$('#toaster').show({
+        //       text: error.message
+        //     });
+        //   })
+        // },
+
+        _uploadTasksChanged(uploadTasks) {
+          console.log(uploadTasks);
+        },
+
+        _uploadedFilesChanged(uploadedFiles) {
+          console.log(uploadedFiles);
+        },
+
+        onFileUpload(e) {
+          this.files = e.target.files;
+          console.log(this.files)
+        },
+
+        onFileUpload2(e) {
+          this.file = e.target.files[0];
+          this.$$('#fs2').upload();
+        },
+
+        isImage(c) {
+          return c && c.indexOf('image') === 0;
+        },
+
+        isEqual(a, b) {
+          return a === b;
+        },
+
+        signIn: function() {
+          this.$.auth.signInAnonymously();
+        }
+      });
+    })();
+  </script>
+</dom-module>

demo/firebase-storage.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<!--
+@license
+Copyright 2016 Google Inc. All Rights Reserved.
+Use of this source code is governed by a BSD-style
+license that can be found in the LICENSE file or at
+https://github.com/firebase/polymerfire/blob/master/LICENSE
+-->
+
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>firebase-storage-multiupload demo</title>
+    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+    <link rel="import" href="../../polymer/polymer.html">
+    <link rel="import" href="./firebase-storage-multiupload-demo.html">
+
+  </head>
+  <body>
+    <firebase-storage-multiupload-demo></firebase-storage-multiupload-demo>
+  </body>
+</html>

firebase-storage-behavior.html

@@ -0,0 +1,101 @@
+<!--
+@license
+Copyright 2016 Google Inc. All Rights Reserved.
+Use of this source code is governed by a BSD-style
+license that can be found in the LICENSE file or at
+https://github.com/firebase/polymerfire/blob/master/LICENSE
+-->
+
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="firebase-common-behavior.html">
+<link rel="import" href="firebase-storage-script.html">
+<script>
+  (function() {
+    'use strict';
+
+    /** @polymerBehavior Polymer.FirebaseStorageBehavior */
+    Polymer.FirebaseStorageBehaviorImpl = {
+      properties: {
+        /**
+          * Firebase storage instance
+          *
+          */
+        storage : {
+          type: Object,
+          computed: '__computeStorage(app)'
+        },
+
+        /**
+          * Firebase storage ref instance
+          *
+          */
+        ref: {
+          type: Object,
+          computed: '__computeRef(storage, path)'
+        },
+
+        /**
+         * Path to a Firebase storage root or endpoint. N.B. `path` is case sensitive.
+         */
+        path: {
+          type: String,
+          observer: '__pathChanged',
+          value: null
+        },
+
+        /**
+          * Forces every upload to be a unique file by adding a date of upload at the start of the file.
+          *
+          */
+        forceUnique: {
+          type: Boolean,
+          value: false
+        }
+      },
+
+      get zeroValue() {
+        return [];
+      },
+
+      __put: function(path, file, metadata) {
+        this._log('Putting Firebase file at', path ? this.path + '/' + path : this.path);
+        if (file) {
+          var newFilename = this.forceUnique ? Date.now().toString() + '-' + file.name : file.name;
+          var newPath = path ? path + '/' +  newFilename: newFilename;
+          return this.ref.child(newPath).put(file, metadata);
+        }
+        return path ? this.ref.child(path).delete() : this.ref.delete();
+      },
+
+      __putString: function(path, data, format, metadata) {
+        this._log('Putting Firebase file at', path ? this.path + '/' + path : this.path);
+        if (data) {
+          var ref = path ? this.storage.ref().child(path) : this.ref;
+          return ref.putString(data, format, metadata)
+        }
+        return path ? this.ref.child(path).delete() : this.ref.delete();
+      },
+
+      __computeStorage: function(app) {
+        return app ? app.storage() : null;
+      },
+
+      __computeRef: function(storage, path) {
+        if (storage == null ||
+            path == null ||
+            path.split('/').slice(1).indexOf('') >= 0) {
+          return null;
+        }
+        return storage.ref(path);
+      },
+
+      __pathChanged: function(path) {}
+    };
+
+    /** @polymerBehavior */
+    Polymer.FirebaseStorageBehavior = [
+      Polymer.FirebaseCommonBehavior,
+      Polymer.FirebaseStorageBehaviorImpl
+    ];
+  })();
+</script>