Merge branch 't/13533b'

Author: Piotr Jasiun

CHANGES.md

@@ -9,6 +9,7 @@ Fixed Issues:
 * [#13142](http://dev.ckeditor.com/ticket/13142): [Edge] Fixed: CTRL+A, backspace results in an empty div.
 * [#13599](http://dev.ckeditor.com/ticket/13599): Fixed: Cross-editor D&D of inline widget ends up in error/artifacts.
 * [#13640](http://dev.ckeditor.com/ticket/13640): [IE] Fixed: Dropping a widget outside body is not handled correctly.
+* [#13533](http://dev.ckeditor.com/ticket/13533): Fixed: No progress during upload.
 
 Other Changes:
 

plugins/filetools/plugin.js

@@ -276,6 +276,7 @@
 		}
 
 		this.uploaded = 0;
+		this.uploadTotal = null;
 
 		this.status = 'created';
 
@@ -343,6 +344,23 @@
 	 * @property {Number} total
 	 */
 
+	/**
+	 * The total size of upload data in bytes.
+	 * If `xhr.upload` object is present this value will indicate total size of the request payload, not only the file
+	 * size itself. If `xhr.upload` object is not available and real upload size cannot be obtained - this value will
+	 * be equal to {@link #total}. It has null value until upload size is known.
+	 *
+	 * 		loader.on( 'update', function() {
+	 * 			// Wait till uploadTotal is present.
+	 * 			if ( loader.uploadTotal ) {
+	 * 				console.log( 'uploadTotal: ' + loader.uploadTotal );
+	 * 			}
+	 * 		});
+	 *
+	 * @readonly
+	 * @property {Number} uploadTotal
+	 */
+
 	/**
 	 * The error message or additional information received from the server.
 	 *
@@ -518,22 +536,43 @@
 				xhr.abort();
 			};
 
-			xhr.onabort = function() {
-				loader.changeStatus( 'abort' );
-			};
+			xhr.onerror = onError;
+			xhr.onabort = onAbort;
+
+			// #13533 - When xhr.upload is present attach onprogress, onerror and onabort functions to get actual upload
+			// information.
+			if ( xhr.upload ) {
+				xhr.upload.onprogress = function( evt ) {
+					if ( evt.lengthComputable ) {
+						// Set uploadTotal with correct data.
+						if ( !loader.uploadTotal ) {
+							loader.uploadTotal = evt.total;
+						}
+						loader.uploaded = evt.loaded;
+						loader.update();
+					}
+				};
 
-			xhr.onerror = function() {
-				loader.message = loader.lang.filetools.networkError;
-				loader.changeStatus( 'error' );
-			};
+				xhr.upload.onerror = onError;
+				xhr.upload.onabort = onAbort;
 
-			xhr.onprogress = function( evt ) {
-				loader.uploaded = evt.loaded;
+			} else {
+				// #13533 - If xhr.upload is not supported - fire update event anyway and set uploadTotal to file size.
+				loader.uploadTotal = loader.total;
 				loader.update();
-			};
+			}
 
 			xhr.onload = function() {
-				loader.uploaded = loader.total;
+				// #13433 - Call update at the end of the upload. When xhr.upload object is not supported there will be
+				// no update events fired during the whole process.
+				loader.update();
+
+				// #13433 - Check if loader was not aborted during last update.
+				if ( loader.status == 'abort' ) {
+					return;
+				}
+
+				loader.uploaded = loader.uploadTotal;
 
 				if ( xhr.status < 200 || xhr.status > 299 ) {
 					loader.message = loader.lang.filetools[ 'httpError' + xhr.status ];
@@ -563,6 +602,24 @@
 					}
 				}
 			};
+
+			function onError() {
+				// Prevent changing status twice, when HHR.error and XHR.upload.onerror could be called together.
+				if ( loader.status == 'error' ) {
+					return;
+				}
+
+				loader.message = loader.lang.filetools.networkError;
+				loader.changeStatus( 'error' );
+			}
+
+			function onAbort() {
+				// Prevent changing status twice, when HHR.onabort and XHR.upload.onabort could be called together.
+				if ( loader.status == 'abort' ) {
+					return;
+				}
+				loader.changeStatus( 'abort' );
+			}
 		},
 
 		/**

plugins/uploadwidget/plugin.js

@@ -442,33 +442,16 @@
 	 * @param {CKEDITOR.fileTools.fileLoader} loader The file loader instance.
 	 */
 	function bindNotifications( editor, loader ) {
-		var aggregator = editor._.uploadWidgetNotificaionAggregator;
-
-		// Create one notification agregator for all types of upload widgets for the editor.
-		if ( !aggregator || aggregator.isFinished() ) {
-			aggregator = editor._.uploadWidgetNotificaionAggregator = new CKEDITOR.plugins.notificationAggregator(
-				editor, editor.lang.uploadwidget.uploadMany, editor.lang.uploadwidget.uploadOne );
-
-			aggregator.once( 'finished', function() {
-				var tasks = aggregator.getTaskCount();
-
-				if ( tasks === 0 ) {
-					aggregator.notification.hide();
-				} else {
-					aggregator.notification.update( {
-						message: tasks == 1 ?
-							editor.lang.uploadwidget.doneOne :
-							editor.lang.uploadwidget.doneMany.replace( '%1', tasks ),
-						type: 'success',
-						important: 1
-					} );
-				}
-			} );
-		}
-
-		var task = aggregator.createTask( { weight: loader.total } );
+		var aggregator,
+			task = null;
 
 		loader.on( 'update', function() {
+			// Value of uploadTotal is known after upload start. Task will be created when uploadTotal is present.
+			if ( !task && loader.uploadTotal ) {
+				createAggregator();
+				task = aggregator.createTask( { weight: loader.uploadTotal } );
+			}
+
 			if ( task && loader.status == 'uploading' ) {
 				task.update( loader.uploaded );
 			}
@@ -487,6 +470,32 @@
 			task && task.cancel();
 			editor.showNotification( editor.lang.uploadwidget.abort, 'info' );
 		} );
+
+		function createAggregator() {
+			aggregator = editor._.uploadWidgetNotificaionAggregator;
+
+			// Create one notification aggregator for all types of upload widgets for the editor.
+			if ( !aggregator || aggregator.isFinished() ) {
+				aggregator = editor._.uploadWidgetNotificaionAggregator = new CKEDITOR.plugins.notificationAggregator(
+					editor, editor.lang.uploadwidget.uploadMany, editor.lang.uploadwidget.uploadOne );
+
+				aggregator.once( 'finished', function() {
+					var tasks = aggregator.getTaskCount();
+
+					if ( tasks === 0 ) {
+						aggregator.notification.hide();
+					} else {
+						aggregator.notification.update( {
+							message: tasks == 1 ?
+								editor.lang.uploadwidget.doneOne :
+								editor.lang.uploadwidget.doneMany.replace( '%1', tasks ),
+							type: 'success',
+							important: 1
+						} );
+					}
+				} );
+			}
+		}
 	}
 
 	// Two plugins extend this object.