diff --git a/src/ui/uploads/upload-progress-bar.html b/src/ui/uploads/upload-progress-bar.html
index 3db3b363..8efb5fb9 100644
--- a/src/ui/uploads/upload-progress-bar.html
+++ b/src/ui/uploads/upload-progress-bar.html
@@ -1,5 +1,5 @@
-<div ng-class="completed ? 'progress progress-complete' : 'progress'">
-  <div class="progress-bar" role="progressbar" aria-valuenow="{{percentage}}" aria-valuemin="0" aria-valuemax="100" ng-style="{'width': percentage + '%'}">
+<div ng-class="{progress: true, 'progress-complete': completed}">
+  <div ng-class="{'progress-bar progress-bar-success': true, 'progress-bar-danger': error}" role="progressbar" aria-valuenow="{{percentage}}" aria-valuemin="0" aria-valuemax="100" ng-style="{'width': percentage + '%'}">
     <span class="sr-only">{{percentage}}% Complete</span>
   </div>
 </div>
diff --git a/src/ui/uploads/upload-progress-bar.js b/src/ui/uploads/upload-progress-bar.js
index e019fbdc..9ed80e38 100644
--- a/src/ui/uploads/upload-progress-bar.js
+++ b/src/ui/uploads/upload-progress-bar.js
@@ -9,11 +9,23 @@ ngModule.directive('avUploadProgressBar', () => ({
   templateUrl,
   link(scope) {
     scope.percentage = 0;
+    scope.completed = false;
+
     const update = () => {
       scope.percentage = scope.upload.percentage;
-      scope.completed = scope.percentage === 100;
+    };
+
+    const error = () => {
+      scope.error = true;
+    };
+
+    const success = () => {
+      scope.percentage = 100;
+      scope.completed = true;
     };
 
     scope.upload.onProgress.push(() => scope.$applyAsync(update));
+    scope.upload.onSuccess.push(() => scope.$applyAsync(success));
+    scope.upload.onError.push(() => scope.$applyAsync(error));
   }
 }));