Update state managment and progress-label style.

css/backbone.upload-manager.css

@@ -23,6 +23,22 @@
     overflow: hidden;
     position: relative;
 }
+.upload-manager .message.error {
+    color: #BD362F;
+}
+.upload-manager .message.done {
+    color: #57ba48;
+}
+.upload-manager div.progress {
+    position: relative;
+}
+.upload-manager div.progress div.progress-label {
+    position: absolute; 
+    width: 100%; 
+    text-align: center;
+    text-shadow: 0 0 3px rgba(0, 0, 0, 0.9);
+    color: #fff;
+}
 .upload-manager i {
     background: url("../images/sprite.png");
     display: inline-block;

js/backbone.upload-manager.js

@@ -76,14 +76,23 @@
                 self.files.add(file);
 
                 // Create the view
-                var file_view = new Backbone.UploadManager.FileView($.extend(self.options, {model: file}));
-                $('#file-list', self.el).append(file_view.deferedRender().el);
+                self.renderFile(file);
             });
 
             // When collection changes
             this.files.on('all', this.update, this);
         },
 
+        /**
+         * Render a file.
+         * 
+         */
+        renderFile: function (file)
+        {
+            var file_view = new Backbone.UploadManager.FileView($.extend(this.options, {model: file}));
+            $('#file-list', self.el).append(file_view.deferedRender().el);
+        },
+
         /**
          * Update the view without full rendering.
          * 
@@ -192,13 +201,20 @@
                     file.start();
                 });
             });
+
+            // Render current files
+            $.each(this.files, function (i, file) {
+                self.renderFile(file);
+            });
         }
     }, {
         /**
          * This model represents a file.
          * 
          */
         File: Backbone.Model.extend({
+            state: "pending",
+
             /**
              * Start upload.
              * 
@@ -207,6 +223,7 @@
             {
                 if (this.isPending()) {
                     this.get('processor').submit();
+                    this.state = "running";
 
                     // Dispatch event
                     this.trigger('filestarted', this);
@@ -223,6 +240,7 @@
                 this.destroy();
 
                 // Dispatch event
+                this.state = "canceled";
                 this.trigger('filecanceled', this);
             },
 
@@ -243,6 +261,7 @@
             fail: function (error)
             {
                 // Dispatch event
+                this.state = "error";
                 this.trigger('filefailed', error);
             },
 
@@ -253,6 +272,7 @@
             done: function (result)
             {
                 // Dispatch event
+                this.state = "error";
                 this.trigger('filedone', result);
             },
 
@@ -262,7 +282,7 @@
              */
             isPending: function ()
             {
-                return this.getState() == undefined || this.getState() == "pending";
+                return this.getState() == "pending";
             },
 
             /**
@@ -271,7 +291,7 @@
              */
             isRunning: function ()
             {
-                return !this.isPending() && !this.isDone();
+                return this.getState() == "running";
             },
 
             /**
@@ -280,7 +300,7 @@
              */
             isDone: function ()
             {
-                return this.getState() == "done" || this.isError();
+                return this.getState() == "done";
             },
 
             /**
@@ -289,7 +309,7 @@
              */
             isError: function ()
             {
-                return this.getState() == "rejected";
+                return this.getState() == "error" || this.getState == "canceled";
             },
 
             /**
@@ -298,7 +318,7 @@
              */
             getState: function ()
             {
-                return this.get('processor').state();
+                return this.state;
             }
         }),
 
@@ -397,7 +417,7 @@
                 } else if (this.model.isRunning()) {
                     when_pending.add(when_done).addClass('hidden');
                     when_running.removeClass('hidden');
-                } else if (this.model.isDone()) {
+                } else if (this.model.isDone() || this.model.isError()) {
                     when_pending.add(when_running).addClass('hidden');
                     when_done.removeClass('hidden');
                 }

sample/index.html

@@ -40,6 +40,7 @@
 
             // Create the upload manager object
 	        var uploadManager = new Backbone.UploadManager({
+	            uploadUrl: 'http://upload-manager.sroze.io/upload',
 	            templates: {
 	                main: '../templates/upload-manager.main',
 	                file: '../templates/upload-manager.file'