Add file state indicator and progress bar animation

app/assets/css/rtmedia.css

@@ -223,11 +223,26 @@ form .rtmedia-container .rtm-plupload-list li,
   z-index: 1;
   position: relative;
 }
+#rtmedia-uploader-form .rtm-plupload-list li.upload-success,
+form .rtmedia-container .rtm-plupload-list li.upload-success,
+#rtmedia_uploader_filelist li.upload-success {
+  border: 1px solid dodgerblue;
+}
 #rtmedia-uploader-form .rtm-plupload-list li.upload-error,
 form .rtmedia-container .rtm-plupload-list li.upload-error,
 #rtmedia_uploader_filelist li.upload-error {
   border: 1px solid red;
 }
+#rtmedia-uploader-form .rtm-plupload-list li.upload-progress,
+form .rtmedia-container .rtm-plupload-list li.upload-progress,
+#rtmedia_uploader_filelist li.upload-progress {
+  border: 1px solid green;
+}
+#rtmedia-uploader-form .rtm-plupload-list li.upload-queue,
+form .rtmedia-container .rtm-plupload-list li.upload-queue,
+#rtmedia_uploader_filelist li.upload-queue {
+  border: 1px solid yellow;
+}
 #rtmedia-uploader-form .rtm-plupload-list img,
 form .rtmedia-container .rtm-plupload-list img,
 #rtmedia_uploader_filelist img {
@@ -353,6 +368,8 @@ button#rtmedia-add-media-button-post-update .dashicons {
   line-height: 15px;
   text-align: center;
   word-wrap: initial;
+  -webkit-transition: width 0.5s ease-out;
+          transition: width 0.5s ease-out;
 }
 
 .rtm-form .rtm-field-wrap {

app/assets/css/sass/_rtm.scss

@@ -75,9 +75,21 @@ form .rtmedia-container .rtm-plupload-list,
 		z-index: 1;
 		position: relative;
 
+		&.upload-success {
+			border: 1px solid dodgerblue;
+		}
+
 		&.upload-error {
 			border: 1px solid red;
 		}
+
+		&.upload-progress {
+			border: 1px solid green;
+		}
+
+		&.upload-queue {
+			border: 1px solid yellow;
+		}
 	}
 
 	img {
@@ -201,6 +213,7 @@ button#rtmedia-add-media-button-post-update {
 	line-height: 15px;
 	text-align: center;
 	word-wrap: initial;
+	transition: width .5s ease-out;
 }
 
 .rtm-form {

app/assets/js/rtMedia-uploader.js

@@ -1,8 +1,11 @@
 jQuery(document).ready(function($) {
+    window.uploaderObjs = {};
+
     var rtFileModel = Backbone.Model.extend({
         defaults: {
             name: '',
-            file: null
+            file: null,
+            error: false
         },
 
         set: function (key, val, options) {
@@ -20,6 +23,7 @@ jQuery(document).ready(function($) {
 
             this.set('file', file);
             this.set('name', file.name);
+            this.set('error', !!file.error);
 
             this.on('edit', this.editFileData, this);
         },
@@ -29,13 +33,17 @@ jQuery(document).ready(function($) {
         },
 
         destroy: function () {
+            if( this.get('file').status === plupload.UPLOADING ) {
+                return;
+            }
+
             this.collection.remove(this);
         }
     });
 
     var rtFileView = Backbone.View.extend({
-        tagName: 'div',
-        className: 'rtm-preview-file-item',
+        tagName: 'li',
+        className: 'plupload_file ui-state-default plupload_queue_li',
 
         events: {
             'click .rtm-edit-box .rtm-open-edit-box': 'openEditBox',
@@ -44,7 +52,6 @@ jQuery(document).ready(function($) {
         },
 
         template: _.template(`
-              <li class="plupload_file ui-state-default plupload_queue_li" id="<%= id %>" title="">
                 <div id="file_thumb_<%= id %>" class="plupload_file_thumb"></div>
                 <div class="plupload_file_status">
                     <div class="plupload_file_progress ui-widget-header"></div>
@@ -73,11 +80,11 @@ jQuery(document).ready(function($) {
                 <div class="plupload_file_size">
                   <%= plupload.formatSize(size).toUpperCase() %>
                 </div>
-              </li>
         `),
 
         initialize: function () {
             this.listenTo(this.model, 'change', this.render);
+            this.listenTo(this.model, 'remove', this.remove );
             this.render();
         },
 
@@ -86,10 +93,10 @@ jQuery(document).ready(function($) {
             this.$el.html( this.template( file ) );
 
             this.setThumbnail();
-            console.log( file, 'prog' );
             this.setProgress( file.percent || 0 );
             this.closeEditBox();
             this.setButton();
+            this.setStatus();
 
             return this;
         },
@@ -174,6 +181,23 @@ jQuery(document).ready(function($) {
             this.$el.find('.rtm-error').attr('title', err_msg).show();
         },
 
+        setStatus: function () {
+            var file = this.model.get('file');
+            var status = file.status;
+
+            this.$el.removeClass('upload-success upload-progress upload-queue upload-error');
+
+            if (status === plupload.DONE) {
+                this.$el.addClass('upload-success');
+            } else if (status === plupload.UPLOADING) {
+                this.$el.addClass('upload-progress');
+            } else if (status === plupload.QUEUED) {
+                this.$el.addClass('upload-queue');
+            } else if (status === plupload.FAILED || file.error) {
+                this.$el.addClass('upload-error');
+            }
+        },
+
         closeEditBox: function () {
             this.$el.find('.rtm-edit-box').children().show();
             this.$el.find('.rtm-file-edit').hide();
@@ -201,7 +225,6 @@ jQuery(document).ready(function($) {
 
         removeFile: function () {
             this.model.destroy();
-            this.remove();
         }
     });
 
@@ -210,12 +233,6 @@ jQuery(document).ready(function($) {
 
         modelId: function (attributes) {
             return attributes.file.name;
-        },
-
-        initialize: function() {
-            this.on('remove', function( model ) {
-                console.log( 'Bye Bye', model );
-            });
         }
     });
 
@@ -326,14 +343,16 @@ jQuery(document).ready(function($) {
                 'rtmedia_js_upload_file',
                 {
                     src: 'uploader',
-                    terms_element: this.$el.find( '.rtmedia_upload_terms_conditions' )
+                    terms_element: this.$el.find( '#rtmedia_upload_terms_conditions' )
                 }
             );
 
             if ( allow_upload === false ) {
                 return false;
             }
 
+            this.$el.find('.rt_alert_msg').remove();
+
             this.uploader.start();
         },
 
@@ -343,17 +362,20 @@ jQuery(document).ready(function($) {
             files.forEach( function( file ) {
                 var isDuplicate = self.collection.findWhere( { name: file.name } );
 
-                var hook_result = rtMediaHook.call( 'rtmedia_js_file_added', [ uploader, file ] );
+                if ( isDuplicate ) {
+                    uploader.removeFile( file );
+                    return;
+                }
 
-                console.log( file );
+                var hook_result = rtMediaHook.call( 'rtmedia_js_file_added', [ uploader, file ] );
 
                 if( hook_result === false ) {
-                    window.alert( 'Upload Size exceed!' );
-                }
-
-                if ( hook_result === false || isDuplicate ) {
                     uploader.removeFile( file );
-                    return;
+                    file.status = plupload.FAILED;
+
+                    file.error = {
+                        message: window.plupload_error_message || 'Invalid File!'
+                    };
                 }
 
                 self.collection.add( { file: file } );
@@ -367,11 +389,8 @@ jQuery(document).ready(function($) {
 
             if ( model ) {
                 model.set( 'file', file );
-                console.log( 'model', model );
             }
 
-            console.log( file );
-
             if( ! window.onbeforeunload ) {
                 window.onbeforeunload = function() {
                     return rtmedia_upload_progress_error_message;
@@ -380,8 +399,6 @@ jQuery(document).ready(function($) {
         },
 
         onUploadError: function( uploader, error ) {
-            console.log( error );
-
             if( error.file ) {
                 var file = error.file;
                 file.error = error;
@@ -453,18 +470,17 @@ jQuery(document).ready(function($) {
 
             if ( response.status === 200 || response.status === 302 ) {
                 this.upload_count++;
-
-                rtMediaHook.call( 'rtmedia_js_after_file_upload', [ uploader, file, response.response ] );
             } else {
-                var model = this.collection.findWhere( { name: file.name } );
-
                 file.error = {
                     code: -700,
                     message: rtmedia_upload_failed_msg
                 };
-
-                model.set( 'file', file );
             }
+
+            rtMediaHook.call( 'rtmedia_js_after_file_upload', [ uploader, file, response.response ] );
+
+            var model = this.collection.findWhere( { name: file.name } );
+            model.set( 'file', file );
         }
 
     });
@@ -473,9 +489,11 @@ jQuery(document).ready(function($) {
      * Attach View and Model to all uploader instances
      */
     $('.rtmedia-container-wrapper__uploader').each(function() {
-        new rtFileUploader( {
+        var uploader = new rtFileUploader( {
             containerId: $(this).attr('id'),
             el: $(this)
         } );
+
+        window.uploaderObjs[ $(this).attr('id') ] = uploader;
     });
 });