pkp#988 Basic working version of new file uploader

controllers/wizard/fileUpload/PKPFileUploadWizardHandler.inc.php

@@ -483,7 +483,10 @@ function _getUploadedFileInfo($uploadedFile) {
 		return array(
 			'uploadedFile' => array(
 				'fileId' => $uploadedFile->getFileId(),
-				'revision' => $uploadedFile->getRevision()
+				'revision' => $uploadedFile->getRevision(),
+				'name' => $uploadedFile->getLocalizedName() ? $uploadedFile->getLocalizedName() : $uploadedFile->getFileLabel(),
+				'type' => $uploadedFile->getDocumentType(),
+				'genreId' => $uploadedFile->getGenreId(),
 			)
 		);
 	}

js/controllers/UploaderHandler.js

@@ -50,31 +50,31 @@
 					silverlight_xap_url: options.baseUrl +
 							'/lib/pkp/lib/vendor/moxiecode/plupload/js/Moxie.xap'
 				}),
-				pluploader;
+			pluploader;
 
 		// Create the uploader with the puploader plug-in.
 		// Setup the upload widget.
-		$uploader.plupload(uploaderOptions);
+		this.pluploader = new plupload.Uploader(uploaderOptions);
+		this.pluploader.init();
+		this.updateStatus('waiting');
 
-		// Hack to fix the add files button in non-FF browsers
-		// courtesy of: http://stackoverflow.com/questions/5471141/
-		pluploader = $uploader.plupload('getUploader');
-		pluploader.refresh();
-		if (!/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)) {
-			// On my Iceweasel 9.0.1, running the hack below
-			// results in the "Add Files" button being unclickable
-			// (html5 runtime).
-			$uploader.find('div.plupload').css('z-index', 99999);
-		}
-
-		$uploader.find('div.plupload input').css('z-index', 99999);
+		// Cache re-used DOM references
+		this.$progress = $uploader.find('.pkpUploaderProgress .percentage');
+		this.$progressBar = $uploader.find('.pkpUploaderProgressBar');
+		this.$fileName = $uploader.find('.pkpUploaderFilename');
 
 		// Bind to the pluploader for some configuration
-		pluploader.bind('FilesAdded',
-				this.callbackWrapper(this.limitQueueSize));
-
-		pluploader.bind('QueueChanged',
+		this.pluploader.bind('FilesAdded',
+				this.callbackWrapper(this.startUpload));
+		this.pluploader.bind('UploadProgress',
+				this.callbackWrapper(this.updateProgress));
+		this.pluploader.bind('Error',
+				this.callbackWrapper(this.handleError));
+		this.pluploader.bind('FileUploaded',
+				this.callbackWrapper(this.uploadComplete));
+		this.pluploader.bind('QueueChanged',
 				this.callbackWrapper(this.refreshUploader));
+
 	};
 	$.pkp.classes.Helper.inherits(
 			$.pkp.controllers.UploaderHandler, $.pkp.classes.Handler);
@@ -84,20 +84,85 @@
 	// Public methods
 	//
 	/**
-	 * Limit the queue size of the uploader to one file only.
+	 * Initiate upload of a file
 	 * @param {Object} caller The original context in which the callback was called.
 	 * @param {Object} pluploader The pluploader object.
 	 * @param {Object} file The data of the uploaded file.
 	 *
 	 */
 	$.pkp.controllers.UploaderHandler.prototype.
-			limitQueueSize = function(caller, pluploader, file) {
+			startUpload = function(caller, pluploader, file) {
 
 		// Prevent > 1 files from being added.
 		if (pluploader.files.length > 1) {
-			pluploader.splice(0, 1);
-			pluploader.refresh();
+			pluploader.removeFile(pluploader.files[0]);
 		}
+
+		// Initiate the upload process
+		this.updateStatus('uploading');
+		pluploader.start();
+	};
+
+	/**
+	 * Update the progress indicator for a file
+	 * @param {Object} caller The original context in which the callback was called.
+	 * @param {Object} pluploader The pluploader object.
+	 * @param {Object} file The data of the uploaded file.
+	 *
+	 */
+	$.pkp.controllers.UploaderHandler.prototype.
+			updateProgress = function(caller, pluploader, file) {
+
+		this.$progress.html(file.percent);
+		this.$progressBar.css('width', file.percent + '%');
+	};
+
+	/**
+	 * Indicate the file upload has completed
+	 * @param {Object} caller The original context in which the callback was called.
+	 * @param {Object} pluploader The pluploader object.
+	 * @param {Object} file The data of the uploaded file.
+	 *
+	 */
+	$.pkp.controllers.UploaderHandler.prototype.
+			uploadComplete = function(caller, pluploader, file, response) {
+		var jsonData = this.handleJson($.parseJSON(response.response));
+
+		if (!jsonData.status) {
+			this.showError(jsonData.content);
+			return;
+		}
+
+		this.$fileName.html(jsonData.uploadedFile.name);
+		this.updateStatus('complete');
+		this.$progress.html(0);
+		this.$progressBar.css('width', 0);
+	};
+
+	/**
+	 * Handle error revents from plupload
+	 * @param {Object} caller The original context in which the callback was called.
+	 * @param {Object} pluploader The pluploader object.
+	 * @param {Object} file The data of the uploaded file.
+	 *
+	 */
+	$.pkp.controllers.UploaderHandler.prototype.
+			handleError = function(caller, pluploader, err) {
+		this.showError(err.message);
+	};
+
+	/**
+	 * Display an error if encountered during upload
+	 * @param {string} msg The error message
+	 *
+	 */
+	$.pkp.controllers.UploaderHandler.prototype.
+			showError = function(msg) {
+
+		this.$progress.html(0);
+		this.$progressBar.css('width', 0);
+		this.updateStatus('error');
+		this.getHtmlElement().find('.pkpUploaderError').html(msg);
 	};
 
 
@@ -114,6 +179,18 @@
 	};
 
 
+	/**
+	 * Update the status of the element in the DOM
+	 * @param {string} status The new status
+	 *
+	 */
+	$.pkp.controllers.UploaderHandler.prototype.
+			updateStatus = function(status) {
+		this.getHtmlElement().removeClass('loading waiting uploading error complete')
+			.addClass(status);
+	};
+
+
 	//
 	// Private static properties
 	//
@@ -124,13 +201,14 @@
 	 * @const
 	 */
 	$.pkp.controllers.UploaderHandler.DEFAULT_PROPERTIES_ = {
-		// General settings
 		runtimes: 'html5,flash,silverlight,html4',
 		max_file_size: $.pkp.cons.UPLOAD_MAX_FILESIZE,
 		multi_selection: false,
 		file_data_name: 'uploadedFile',
 		multipart: true,
-		headers: {'browser_user_agent': navigator.userAgent}
+		headers: {'browser_user_agent': navigator.userAgent},
+		browse_button: 'pkpUploaderButton',
+		drop_element: 'pkpUploaderDropZone'
 	};
 
 

js/controllers/form/FileUploadFormHandler.js

@@ -89,10 +89,9 @@
 	$.pkp.controllers.form.FileUploadFormHandler.prototype.
 			uploaderSetup = function($uploader) {
 
-		var pluploader = $uploader.plupload('getUploader');
-
+		var uploadHandler = $.pkp.classes.Handler.getHandler($uploader);
 		// Subscribe to uploader events.
-		pluploader.bind('FileUploaded',
+		uploadHandler.pluploader.bind('FileUploaded',
 				this.callbackWrapper(this.handleUploadResponse));
 	};
 

js/controllers/wizard/WizardHandler.js

@@ -146,7 +146,7 @@
 
 		// The default implementation enables the continue button
 		// as soon as the form validates.
-		this.getContinueButton().button('enable');
+		this.enableContinueButton();
 	};
 
 
@@ -162,7 +162,7 @@
 
 		// The default implementation disables the continue button
 		// as if the form no longer validates.
-		this.getContinueButton().button('disable');
+		this.disableContinueButton();
 	};
 
 
@@ -266,7 +266,7 @@
 		if ($form) {
 			// Try to submit the form.
 			if ($form.submit()) {
-				this.getContinueButton().button('disable');
+				this.disableContinueButton();
 				this.getProgressIndicator().show();
 			}
 
@@ -322,12 +322,12 @@
 		// continue button to finish.
 		$continueButton = this.getContinueButton();
 		if (targetStep === lastStep) {
-			$continueButton.button('option', 'label',
+			$continueButton.text(
 					/** @type {string} */ (this.getFinishButtonText()));
 		}
 
 		this.getProgressIndicator().hide();
-		$continueButton.button('enable');
+		this.enableContinueButton();
 	};
 
 
@@ -355,7 +355,7 @@
 
 			// Reset the continue button label.
 			$continueButton = this.getContinueButton();
-			$continueButton.button('option', 'label',
+			$continueButton.text(
 					/** @type {string} */ (this.getContinueButtonText()));
 		}
 
@@ -545,8 +545,8 @@
 
 		if (options.cancelButtonText) {
 			// Add cancel button.
-			$cancelButton = $(['<a id="cancelButton" href="#">',
-				options.cancelButtonText, '</a>'].join(''));
+			$cancelButton = $('<a id="cancelButton" href="#"></a>')
+				.text(options.cancelButtonText);
 			$wizardButtons.append($cancelButton);
 
 			// Attach the cancel request handler.
@@ -556,9 +556,8 @@
 
 		if (options.continueButtonText) {
 			// Add continue/finish button.
-			$continueButton = $(['<button id="continueButton"',
-				'class="button pkp_helpers_align_right">', options.continueButtonText,
-				'</button>'].join('')).button();
+			$continueButton = $('<button id="continueButton" class="pkp_button"></button>')
+				.text(options.continueButtonText);
 			$wizardButtons.append($continueButton);
 
 			$progressIndicator = $(
@@ -586,5 +585,27 @@
 	};
 
 
+	/**
+	 * Disable the continue button
+	 *
+	 * @private
+	 */
+	$.pkp.controllers.wizard.WizardHandler.prototype.disableContinueButton =
+			function() {
+		this.getContinueButton().attr('disabled', 'disabled');
+	};
+
+
+	/**
+	 * Enable the continue button
+	 *
+	 * @private
+	 */
+	$.pkp.controllers.wizard.WizardHandler.prototype.enableContinueButton =
+			function() {
+		this.getContinueButton().removeAttr('disabled');
+	};
+
+
 /** @param {jQuery} $ jQuery closure. */
 }(jQuery));

js/controllers/wizard/fileUpload/FileUploadWizardHandler.js

@@ -43,7 +43,7 @@
 		this.bind('fileUploaded', this.handleFileUploaded);
 
 		// Initially disable the continue button.
-		this.getContinueButton().button('disable');
+		this.disableContinueButton();
 	};
 	$.pkp.classes.Helper.inherits(
 			$.pkp.controllers.wizard.fileUpload.FileUploadWizardHandler,
@@ -169,9 +169,9 @@
 		// continue button to finish.
 		if (targetStep === lastStep) {
 			$continueButton = this.getContinueButton();
-			$continueButton.button('option', 'label',
+			$continueButton.text(
 					/** @type {string} */ (this.getFinishButtonText()));
-			$continueButton.button('enable');
+			this.enableContinueButton();
 		}
 	};
 

js/controllers/wizard/fileUpload/form/FileUploadFormHandler.js

@@ -115,11 +115,12 @@
 	$.pkp.controllers.wizard.fileUpload.form.FileUploadFormHandler.prototype.
 			uploaderSetup = function($uploader) {
 
-		var pluploader = $uploader.plupload('getUploader');
+		var uploadHandler = $.pkp.classes.Handler.getHandler($uploader);
+
 		// Subscribe to uploader events.
-		pluploader.bind('BeforeUpload',
+		uploadHandler.pluploader.bind('BeforeUpload',
 				this.callbackWrapper(this.prepareFileUploadRequest));
-		pluploader.bind('FileUploaded',
+		uploadHandler.pluploader.bind('FileUploaded',
 				this.callbackWrapper(this.handleUploadResponse));
 	};
 
@@ -186,20 +187,16 @@
 			// Trigger the file uploaded event.
 			this.trigger('fileUploaded', jsonData.uploadedFile);
 
-			if (jsonData.content === '') {
-				// remove the 'add files' button to prevent repeated uploads.
-				// Note: we must disable the type="file" element or else Chrome
-				// will let a user click through the disabled button and add
-				// new files.
-				$uploadForm.find(':file').attr('disabled', 'disabled');
-				$uploadForm.find('a.plupload_add').button('disable');
-				// Trigger formValid to enable to continue button
-				this.trigger('formValid');
-			} else {
-				// Display the revision confirmation form.
+			// Display the revision confirmation form.
+			if (jsonData.content !== '') {
 				this.getHtmlElement().replaceWith(jsonData.content);
 			}
 		}
+
+		// Trigger validation on the form. This doesn't happen automatically
+		// until `blur` is triggered on the file input field, requiring the
+		// user to click before any disabled form functions become available.
+		this.getHtmlElement().valid();
 	};
 
 

locale/en_US/common.xml

@@ -190,6 +190,7 @@
 	<message key="common.overdue">Overdue</message>
 	<message key="common.pageNumber">Page {$pageNumber}</message>
 	<message key="common.pageHeaderLogo.altText">Page Header Logo</message>
+	<message key="common.percentage">{$percentage}%</message>
 	<message key="common.plugin">Plugin</message>
 	<message key="common.pluginEnabled">The plugin "{$pluginName}" has been enabled.</message>
 	<message key="common.pluginDisabled">The plugin "{$pluginName}" has been disabled.</message>

locale/en_US/submission.xml

@@ -138,6 +138,8 @@
 	<message key="submission.shortAuthor">{$author} et al.</message>
 	<message key="submission.mySubmissions">My Authored</message>
 	<message key="submission.addFile">Upload File</message>
+	<message key="submission.changeFile">Change File</message>
+	<message key="submission.dragFile">Drag and drop a file here to begin upload</message>
 	<message key="submission.agencies">Agencies</message>
 	<message key="submission.abstractViews">Abstract Views</message>
 	<message key="submission.accepted">Accepted</message>

styles/controllers/modal.less

@@ -165,4 +165,9 @@
 	background: @bg;
 	border-bottom-left-radius: @radius;
 	border-bottom-right-radius: @radius;
+	text-align: right;
+
+	#cancelButton {
+		float: left;
+	}
 }