fixes

Author: pdgago

bower.json

@@ -6,7 +6,8 @@
     "polymer": "Polymer/polymer#^1.4.0",
     "input-file": "git@github.com:sharedlabs/input-file.git",
     "overlay-container": "git@github.com:sharedlabs/overlay-container.git",
-    "iron-image": "PolymerElements/iron-image#^1.2.5"
+    "iron-image": "PolymerElements/iron-image#^1.2.5",
+    "paper-progress": "PolymerElements/paper-progress#^1.0.11"
   },
   "devDependencies": {
     "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",

file-uploader-progress.html

@@ -2,6 +2,7 @@
 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
 <link rel="import" href="../iron-image/iron-image.html">
 <link rel="import" href="../overlay-container/animated-overlay-behavior.html">
+<link rel="import" href="../paper-progress/paper-progress.html">
 
 <!--
 `file-uploader`
@@ -69,33 +70,25 @@
         font-size: 13px;
       }
 
-      .progress-bar-container {
+      #paperProgress {
+        bottom: 0;
         height: 4px;
-        background: #ddd;
-        width: 100%;
-        position: absolute;
         left: 0;
-        bottom: 0;
-      }
-
-      .progress-bar {
-        height: 100%;
-        transform-origin: left top;
-        background: var(--file-uploader-progress-color, #2196f3);
+        position: absolute;
+        width: 100%;        
+        --paper-progress-active-color: var(--file-uploader-progress-color, #2196f3);
       }
     </style>
 
     <div class="content">
       <iron-image sizing="cover" src$="[[_currentFileDataURL]]"></iron-image>
 
       <div class="details">
-        <div class="caption">Uploading to</div>
+        <div class="caption">Uploading...</div>
         <div class="uploading-to-text">[[uploadingToText]]</div>
-        <div class="caption">[[_computeNthFileUploading(_currentFile)]] of [[files.length]]</div>
+        <div class="caption">[[_computeCurrentUploadIndex(_currentFile)]] of [[files.length]]</div>
         <button on-tap="_stopTapped">Stop<paper-ripple></paper-ripple></button>
-        <div class="progress-bar-container">
-          <div class="progress-bar" style$="[[_computeProgressBarStyle(progress)]]"></div>
-        </div>
+        <paper-progress id="paperProgress" indeterminate></paper-progress>
       </div>
     </div>
 
@@ -112,38 +105,37 @@
 
     properties: {
 
-      // @override the OverlayBehavior property
-      noCancelOnEscKey: {
-        type: Boolean,
-        value: true
-      },
-
-      // @override the OverlayBehavior property
-      noCancelOnPopState: {
-        type: Boolean,
-        value: true
-      },
-
       // General upload progress
       progress: {
         type: Number,
+        notify: true,
         observer: '_progressChanged',
       },
 
-      // array of files
+      // Array of files
       files: {
-        type: Array,
-        // observer: '_filesChanged',
+        type: Array
       },
 
-      // array of files progress weakmap
+      // Weakmap of files progress weakmap
       filesProgress: {
         type: Object,
       },
 
       uploadingToText: {
         type: String,
-        value: 'My news widget'
+      },
+
+      // @override the OverlayBehavior property
+      noCancelOnEscKey: {
+        type: Boolean,
+        value: true
+      },
+
+      // @override the OverlayBehavior property
+      noCancelOnPopState: {
+        type: Boolean,
+        value: true
       },
 
       /**
@@ -178,49 +170,50 @@
       }
     },
 
-    _filesChanged(change) {
-      const files = change.base;
-      this.opened = files && files.length;
-    },
-
     _progressChanged() {
       this.refresh();
     },
 
+    _filesChanged() {
+      this.opened = this.files && this.files.length;
+    },
+
     _currentFileChanged(currentFile) {
       if (currentFile) {
         const isImage = /image\/.*/.exec(currentFile.type);
+
         if (isImage) {
           this._currentFileDataURL = URL.createObjectURL(currentFile);
         }
       }
     },
 
-    _computeNthFileUploading(currentFile) {
-      return this._getUploadedFiles().length + 1;
-    },
-
-    _computeProgressBarStyle(progress) {
-      return `transform: scaleX(${progress / 100})`;
-    },
-
     _stopTapped() {
-      this.fire('stop');
+      this.fire('upload-stop');
     },
 
+    /**
+     * Return the file that is currently being uploaded.
+     */
     _getFileInProgress() {
       return (this.files || []).filter(file => {
         const progress = this.filesProgress.get(file);
         const isUploading = typeof progress === 'number' && progress < 100;
-        // console.log(file.name, progress)
         return isUploading;
       })[0];
     },
 
+    /**
+     * Return already uploaded files.
+     */
     _getUploadedFiles() {
       return (this.files || []).filter(file => {
         return this.filesProgress.get(file) === 100;
       });
+    },
+
+    _computeCurrentUploadIndex(currentFile) {
+      return this._getUploadedFiles().length + 1;
     }
 
   });