Update the file-upload library

services/web/app/views/project/editor/file-tree.pug

@@ -364,19 +364,34 @@ script(type='text/ng-template', id='newFolderModalTemplate')
 			span(ng-hide="state.inflight") #{translate("create")}
 			span(ng-show="state.inflight") #{translate("creating")}...
 
-script(type='text/template', id='qq-uploader')
-	div woot
-	<div class="qq-uploader">
-		<div class="qq-upload-drop-area"><span>{dragZoneText}</span></div>
-		<div class="qq-upload-button btn btn-primary btn-lg">
-			<div>{uploadButtonText}</div>
-		</div>
-		<span class="or btn-lg"> or </span>
-		<span class="drag-here btn-lg">#{dragAreaText}</span>
-		<span class="qq-drop-processing"><span>{dropProcessingText}</span><span class="qq-drop-processing-spinner"></span></span>
-		<div class="small">#{hintText}</div>
-		<ul class="qq-upload-list"></ul>
-	</div>
+//- script(type='text/template', id='qq-uploader-template')
+//- 	<div class="qq-uploader-selector">
+//- 		<div class="qq-upload-drop-area-selector"><span>{dragZoneText}</span></div>
+//- 		<div class="qq-upload-button-selector btn btn-primary btn-lg">
+//- 			<div>{uploadButtonText}</div>
+//- 		</div>
+//- 		<span class="or btn-lg"> or </span>
+//- 		<span class="drag-here btn-lg">{dragAreaText}</span>
+//- 		<span class="qq-drop-processing-selector"><span>{dropProcessingText}</span><span class="qq-drop-processing-spinner-selector"></span></span>
+//- 		<div class="small">{hintText}</div>
+//- 		<ul class="qq-upload-list-selector">
+//- 			<li>
+//- 				<div class="qq-progress-bar-container-selector">
+//- 					<div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-progress-bar-selector qq-progress-bar"></div>
+//- 				</div>
+//- 				<span class="qq-upload-spinner-selector qq-upload-spinner"></span>
+//- 				<img class="qq-thumbnail-selector" qq-max-size="100" qq-server-scale>
+//- 				<span class="qq-upload-file-selector qq-upload-file"></span>
+//- 				<span class="qq-edit-filename-icon-selector qq-edit-filename-icon" aria-label="Edit filename"></span>
+//- 				<input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
+//- 				<span class="qq-upload-size-selector qq-upload-size"></span>
+//- 				<button type="button" class="qq-btn qq-upload-cancel-selector qq-upload-cancel">Cancel</button>
+//- 				<button type="button" class="qq-btn qq-upload-retry-selector qq-upload-retry">Retry</button>
+//- 				<button type="button" class="qq-btn qq-upload-delete-selector qq-upload-delete">Delete</button>
+//- 				<span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>
+//- 			<\li>
+//- 		</ul>
+//- 	</div>
 
 script(type="text/ng-template", id="uploadFileModalTemplate")
 	.modal-header
@@ -415,7 +430,7 @@ script(type="text/ng-template", id="uploadFileModalTemplate")
 		control="control"
 		params="{'folder_id': parent_folder_id}"
 	)
-		span #{translate("upload_files")}
+		//- span #{translate("upload_files")}
 	.modal-footer
 		button.btn.btn-default(ng-click="cancel()") #{translate("cancel")}
 

services/web/public/coffee/directives/fineUpload.coffee

@@ -24,7 +24,6 @@ define [
 				control: "="
 			}
 			link: (scope, element, attrs) ->
-				console.log ">> element", element
 				multiple = scope.multiple or false
 				endpoint = scope.endpoint
 				if scope.allowedExtensions?
@@ -51,6 +50,38 @@ define [
 					autoUpload = scope.autoUpload
 				params     = scope.params or {}
 				params._csrf = window.csrfToken
+				templateElement = document.createElement('div')
+				templateElement.innerHTML = """
+				<div class="qq-uploader-selector">
+					<div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
+						<span class="qq-upload-drop-area-text-selector">Drop files here to upload</span>
+					</div>
+					<div class="qq-upload-button-selector btn btn-primary btn-lg">
+						<div>#{text.uploadButton}</div>
+					</div>
+					<span class="or btn-lg"> or </span>
+					<span class="drag-here btn-lg">#{dragAreaText}</span>
+					<span class="qq-drop-processing-selector"><span>Processing</span><span class="qq-drop-processing-spinner-selector"></span></span>
+					<div class="small">#{hintText}</div>
+					<ul class="qq-upload-list-selector">
+						<li>
+							<div class="qq-progress-bar-container-selector">
+								<div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-progress-bar-selector qq-progress-bar"></div>
+							</div>
+							<span class="qq-upload-spinner-selector qq-upload-spinner"></span>
+							<img class="qq-thumbnail-selector" qq-max-size="100" qq-server-scale>
+							<span class="qq-upload-file-selector qq-upload-file"></span>
+							<span class="qq-edit-filename-icon-selector qq-edit-filename-icon" aria-label="Edit filename"></span>
+							<input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
+							<span class="qq-upload-size-selector qq-upload-size"></span>
+							<button type="button" class="qq-btn qq-upload-cancel-selector qq-upload-cancel">Cancel</button>
+							<button type="button" class="qq-btn qq-upload-retry-selector qq-upload-retry">Retry</button>
+							<button type="button" class="qq-btn qq-upload-delete-selector qq-upload-delete">Delete</button>
+							<span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>
+						<\li>
+					</ul>
+				</div>
+				"""
 
 				q = new qq.FineUploader
 					element: element[0]
@@ -73,7 +104,7 @@ define [
 						onCancel: onCancel
 					text: text
 					# template: "qq-uploader"
-					template: document.getElementById('qq-uploader')
+					template: templateElement
 				window.q = q
 				scope.control?.q = q
 				return q

services/web/public/js/libs/fineuploader.js

@@ -6762,16 +6762,13 @@
             if (options.templateIdOrEl == null) {
                 throw new Error("You MUST specify either a template element or ID!");
             }
-					console.log(">> template", options.templateIdOrEl)
             if (qq.isString(options.templateIdOrEl)) {
-							console.log(">> is string")
                 scriptEl = document.getElementById(options.templateIdOrEl);
                 if (scriptEl === null) {
                     throw new Error(qq.format("Cannot find template script at ID '{}'!", options.templateIdOrEl));
                 }
                 scriptHtml = scriptEl.innerHTML;
             } else {
-							console.log(">> not  string")
                 if (options.templateIdOrEl.innerHTML === undefined) {
                     throw new Error("You have specified an invalid value for the template option!  " + "It must be an ID or an Element.");
                 }

services/web/public/stylesheets/components/fineupload.less

@@ -4,11 +4,11 @@
  *
  * Licensed under MIT license, GNU GPL 2 or later, GNU LGPL 2 or later, see license.txt.
  */
-.qq-uploader {
+.qq-uploader-selector {
     position: relative;
     width: 100%;
 }
-.qq-uploader {
+.qq-uploader-selector {
 	text-align: center;
 	.drag-here {
 		border: 1px dashed #666;
@@ -18,7 +18,7 @@
 		margin-top: 6px;
 	}
 }
-/*.qq-upload-button {
+/*.qq-upload-button-selector {
     display: block;
     width: 105px;
     padding: 7px 0;
@@ -27,13 +27,13 @@
     border-bottom: 1px solid #DDD;
     color: #FFF;
 }
-.qq-upload-button-hover {
+.qq-upload-button-hover-selector {
     background: #CC0000;
 }
-.qq-upload-button-focus {
+.qq-upload-button-focus-selector {
     outline: 1px dotted #000000;
 }*/
-.qq-upload-drop-area, .qq-upload-extra-drop-area {
+.qq-upload-drop-area-selector, .qq-upload-extra-drop-area-selector {
     position: absolute;
     top: 0;
     left: 0;
@@ -44,7 +44,7 @@
     background: @orange;
     text-align: center;
 }
-.qq-upload-drop-area span {
+.qq-upload-drop-area-selector span {
     display: block;
     position: absolute;
     top: 50%;
@@ -53,7 +53,7 @@
     font-size: 16px;
     color: white;
 }
-.qq-upload-extra-drop-area {
+.qq-upload-extra-drop-area-selector {
     position: relative;
     margin-top: 50px;
     font-size: 16px;
@@ -61,15 +61,15 @@
     height: 20px;
     min-height: 40px;
 }
-.qq-upload-drop-area-active {
+.qq-upload-drop-area-active-selector {
     background: darken(@orange, 15%);
 }
-.qq-upload-list {
+.qq-upload-list-selector {
     margin: 0;
     padding: 0;
     list-style: none;
 }
-.qq-upload-list li {
+.qq-upload-list-selector li {
     margin: 0;
 	margin-top: 10px;
     padding: 9px;
@@ -77,74 +77,74 @@
     font-size: 16px;
     background-color: @gray-lightest;
 }
-.qq-upload-file, .qq-upload-spinner, .qq-upload-size, .qq-upload-cancel, .qq-upload-retry, .qq-upload-failed-text, .qq-upload-finished, .qq-upload-delete {
+.qq-upload-file-selector, .qq-upload-spinner-selector, .qq-upload-size-selector, .qq-upload-cancel-selector, .qq-upload-retry-selector, .qq-upload-failed-text-selector, .qq-upload-finished-selector, .qq-upload-delete-selector {
     margin-right: 12px;
 }
-.qq-upload-file {
+.qq-upload-file-selector {
 }
-.qq-upload-spinner {
+.qq-upload-spinner-selector {
     display: inline-block;
     width: 15px;
     height: 15px;
     vertical-align: text-bottom;
 }
-.qq-drop-processing {
+.qq-drop-processing-selector {
     display: none;
 }
-.qq-drop-processing-spinner {
+.qq-drop-processing-spinner-selector {
     display: inline-block;
     background: url("processing.gif");
     width: 24px;
     height: 24px;
     vertical-align: text-bottom;
 }
-.qq-upload-finished {
+.qq-upload-finished-selector {
     display:none;
     width:15px;
     height:15px;
     vertical-align:text-bottom;
 }
-.qq-upload-retry, .qq-upload-delete {
+.qq-upload-retry-selector, .qq-upload-delete-selector {
     display: none;
     // color: #000000;
 }
-.qq-upload-cancel, .qq-upload-delete {
+.qq-upload-cancel-selector, .qq-upload-delete-selector {
 	// color: #000000;
 }
-.qq-upload-retryable .qq-upload-retry {
+.qq-upload-retryable-selector .qq-upload-retry-selector {
     display: inline;
 }
-.qq-upload-size, .qq-upload-cancel, .qq-upload-retry, .qq-upload-delete {
+.qq-upload-size-selector, .qq-upload-cancel-selector, .qq-upload-retry-selector, .qq-upload-delete-selector {
     font-size: 12px;
     font-weight: normal;
 }
-.qq-upload-failed-text {
+.qq-upload-failed-text-selector {
     display: none;
     font-style: italic;
     font-weight: bold;
 }
-.qq-upload-failed-icon {
+.qq-upload-failed-icon-selector {
     display:none;
     width:15px;
     height:15px;
     vertical-align:text-bottom;
 }
-.qq-upload-fail .qq-upload-failed-text {
+.qq-upload-fail-selector .qq-upload-failed-text-selector {
     display: inline;
 }
-.qq-upload-retrying .qq-upload-failed-text {
+.qq-upload-retrying-selector .qq-upload-failed-text-selector {
     display: inline;
     color: #D60000;
 }
-.qq-upload-list li.qq-upload-success {
+.qq-upload-list-selector li.qq-upload-success-selector {
     background-color: @green;
     color: #FFFFFF;
 }
-.qq-upload-list li.qq-upload-fail {
+.qq-upload-list-selector li.qq-upload-fail-selector {
     background-color: @red;
     color: #FFFFFF;
 }
-.qq-progress-bar {
+.qq-progress-bar-selector {
     width: 0%;
     height: @line-height-computed;
     margin-bottom: @line-height-computed / 2;