UI-1025: Updated all the media upload in SmartPBX to use the jquery.fileUpload plugin

i18n/en-US.json

@@ -82,7 +82,10 @@
 			"silence": "Silence",
 			"defaultRingback": "Default Ringback",
 			"emptyUploadAlert": "Please select a file to upload",
-			"fileTooBigAlert": "You can not upload a file with a size exceeding 5MB"
+			"fileTooBigAlert": "You can not upload a file with a size exceeding 5MB",
+			"__comment": "UI-1025: Updating media file uploads throughout the UI",
+			"__version": "3.20_s3",
+			"audioUploadButton": "Select an audio file"
 		},
 		"nextAction": {
 			"title": "Next Action",
@@ -511,7 +514,10 @@
 			"dropdownLabel": "Music on Hold:",
 			"silence": "Silence",
 			"emptyUploadAlert": "Please select a file to upload",
-			"fileTooBigAlert": "You can not upload a file with a size exceeding 5MB"
+			"fileTooBigAlert": "You can not upload a file with a size exceeding 5MB",
+			"__comment": "UI-1025: Updating media file uploads throughout the UI",
+			"__version": "3.20_s3",
+			"audioUploadButton": "Select an audio file"
 		},
 		"hotdesk": {
 			"id": "Hotdesk ID",
@@ -620,7 +626,10 @@
 				"line4": "Record your greetings / menu."
 			},
 			"pressKey": "Press",
-			"for": "for"
+			"for": "for",
+			"__comment": "UI-1025: Updating media file uploads throughout the UI",
+			"__version": "3.20_s3",
+			"fileUploadButton": "Choose File"
 		},
 		"open": "Open",
 		"closed": "Closed",
@@ -747,7 +756,10 @@
 			"silence": "Silence",
 			"default": "Default Music",
 			"emptyUploadAlert": "Please select a file to upload",
-			"fileTooBigAlert": "You can not upload a file with a size exceeding 5MB"
+			"fileTooBigAlert": "You can not upload a file with a size exceeding 5MB",
+			"__comment": "UI-1025: Updating media file uploads throughout the UI",
+			"__version": "3.20_s3",
+			"audioUploadButton": "Select an audio file"
 		},
 		"callerId": {
 			"title": "Company Caller ID",

submodules/groups/groups.css

@@ -523,12 +523,22 @@
 	margin: 0;
 	width: 330px;
 }
-.feature-popup-container[data-feature="ringback"] .upload-div button {
+.feature-popup-container[data-feature="ringback"] .upload-div button.upload-action {
 	margin-left: 10px;
 	padding-left: 13px;
 	padding-right: 13px;
 }
 
+.feature-popup-container[data-feature="ringback"] .upload-div .file-upload {
+	margin: 0;
+}
+.feature-popup-container[data-feature="ringback"] .upload-div .file-upload > input {
+	margin: 0;
+	width: 105px;
+}
+.feature-popup-container[data-feature="ringback"] .upload-div .file-upload > button {
+	width: 220px;
+}
 
 /* Next Action Feature */
 .feature-popup-container[data-feature="next_action"] {

submodules/groups/groups.js

@@ -547,7 +547,8 @@ define(function(require){
 		groupsRenderRingback: function(data) {
 			var self = this,
 				silenceMediaId = 'silence_stream://300000',
-				ringGroupNode = data.baseCallflow.flow;
+				ringGroupNode = data.baseCallflow.flow,
+				mediaToUpload = undefined;
 
 			while(ringGroupNode.module !== 'ring_group' && '_' in ringGroupNode.children) {
 				ringGroupNode = ringGroupNode.children['_'];
@@ -564,9 +565,8 @@ define(function(require){
 					switchFeature = featureTemplate.find('.switch').bootstrapSwitch(),
 					popup,
 					closeUploadDiv = function(newMedia) {
-						var uploadInput = featureTemplate.find('.upload-input');
-						uploadInput.wrap('<form>').closest('form').get(0).reset();
-						uploadInput.unwrap();
+						mediaToUpload = undefined;
+						featureTemplate.find('.upload-div input').val('');
 						featureTemplate.find('.upload-div').slideUp(function() {
 							featureTemplate.find('.upload-toggle').removeClass('active');
 						});
@@ -577,6 +577,24 @@ define(function(require){
 						}
 					};
 
+				featureTemplate.find('.upload-input').fileUpload({
+					inputOnly: true,
+					wrapperClass: 'file-upload input-append',
+					btnText: self.i18n.active().groups.ringback.audioUploadButton,
+					btnClass: 'btn',
+					maxSize: 5,
+					success: function(results) {
+						mediaToUpload = results[0];
+					},
+					error: function(errors) {
+						if(errors.hasOwnProperty('size') && errors.size.length > 0) {
+							monster.ui.alert(self.i18n.active().groups.ringback.fileTooBigAlert);
+						}
+						featureTemplate.find('.upload-div input').val('');
+						mediaToUpload = undefined;
+					}
+				});
+
 				featureTemplate.find('.cancel-link').on('click', function() {
 					popup.dialog('close').remove();
 				});
@@ -598,19 +616,16 @@ define(function(require){
 				});
 
 				featureTemplate.find('.upload-submit').on('click', function() {
-					var file = featureTemplate.find('.upload-input')[0].files[0];
-						fileReader = new FileReader();
-
-					fileReader.onloadend = function(evt) {
+					if(mediaToUpload) {
 						self.callApi({
 							resource: 'media.create',
 							data: {
 								accountId: self.accountId,
 								data: {
 									streamable: true,
-									name: file.name,
+									name: mediaToUpload.name,
 									media_source: "upload",
-									description: file.name
+									description: mediaToUpload.name
 								}
 							},
 							success: function(data, status) {
@@ -620,7 +635,7 @@ define(function(require){
 									data: {
 										accountId: self.accountId,
 										mediaId: media.id,
-										data: evt.target.result
+										data: mediaToUpload.file
 									},
 									success: function(data, status) {
 										closeUploadDiv(media);
@@ -633,22 +648,12 @@ define(function(require){
 												mediaId: media.id,
 												data: {}
 											},
-											success: function(data, status) {
-
-											}
+											success: function(data, status) {}
 										});
 									}
 								});
 							}
 						});
-					};
-
-					if(file) {
-						if(file.size >= (Math.pow(2,20) * 5)) { //If size bigger than 5MB
-							monster.ui.alert(self.i18n.active().groups.ringback.fileTooBigAlert);
-						} else {
-							fileReader.readAsDataURL(file);
-						}
 					} else {
 						monster.ui.alert(self.i18n.active().groups.ringback.emptyUploadAlert);
 					}

submodules/myOffice/myOffice.css

@@ -383,11 +383,21 @@
 	margin: 0;
 	width: 330px;
 }
-#my_office_music_on_hold_popup .upload-div button {
+#my_office_music_on_hold_popup .upload-div button.upload-action {
 	margin-left: 10px;
 	padding-left: 13px;
 	padding-right: 13px;
 }
+#my_office_music_on_hold_popup .upload-div .file-upload {
+	margin: 0;
+}
+#my_office_music_on_hold_popup .upload-div .file-upload > input {
+	margin: 0;
+	width: 92px;
+}
+#my_office_music_on_hold_popup .upload-div .file-upload > button {
+	width: 220px;
+}
 
 /********** Caller ID Popup **********/
 #my_office_caller_id_popup .emergency-form {

submodules/myOffice/myOffice.js

@@ -594,9 +594,8 @@ define(function(require){
 				popup = args.popup,
 				account = args.account,
 				closeUploadDiv = function(newMedia) {
-					var uploadInput = popupTemplate.find('.upload-input');
-					uploadInput.wrap('<form>').closest('form').get(0).reset();
-					uploadInput.unwrap();
+					mediaToUpload = undefined;
+					popupTemplate.find('.upload-div input').val('');
 					popupTemplate.find('.upload-div').slideUp(function() {
 						popupTemplate.find('.upload-toggle').removeClass('active');
 					});
@@ -607,6 +606,24 @@ define(function(require){
 					}
 				};
 
+			popupTemplate.find('.upload-input').fileUpload({
+				inputOnly: true,
+				wrapperClass: 'file-upload input-append',
+				btnText: self.i18n.active().myOffice.musicOnHold.audioUploadButton,
+				btnClass: 'btn',
+				maxSize: 5,
+				success: function(results) {
+					mediaToUpload = results[0];
+				},
+				error: function(errors) {
+					if(errors.hasOwnProperty('size') && errors.size.length > 0) {
+						monster.ui.alert(self.i18n.active().myOffice.musicOnHold.fileTooBigAlert);
+					}
+					popupTemplate.find('.upload-div input').val('');
+					mediaToUpload = undefined;
+				}
+			});
+
 			popupTemplate.find('.cancel-link').on('click', function() {
 				popup.dialog('close').remove();
 			});
@@ -624,19 +641,16 @@ define(function(require){
 			});
 
 			popupTemplate.find('.upload-submit').on('click', function() {
-				var file = popupTemplate.find('.upload-input')[0].files[0];
-					fileReader = new FileReader();
-
-				fileReader.onloadend = function(evt) {
+				if(mediaToUpload) {
 					self.callApi({
 						resource: 'media.create',
 						data: {
 							accountId: self.accountId,
 							data: {
 								streamable: true,
-								name: file.name,
+								name: mediaToUpload.name,
 								media_source: "upload",
-								description: file.name
+								description: mediaToUpload.name
 							}
 						},
 						success: function(data, status) {
@@ -646,7 +660,7 @@ define(function(require){
 								data: {
 									accountId: self.accountId,
 									mediaId: media.id,
-									data: evt.target.result
+									data: mediaToUpload.file
 								},
 								success: function(data, status) {
 									closeUploadDiv(media);
@@ -659,22 +673,12 @@ define(function(require){
 											mediaId: media.id,
 											data: {}
 										},
-										success: function(data, status) {
-
-										}
+										success: function(data, status) {}
 									});
 								}
 							});
 						}
 					});
-				};
-
-				if(file) {
-					if(file.size >= (Math.pow(2,20) * 5)) { //If size bigger than 5MB
-						monster.ui.alert(self.i18n.active().myOffice.musicOnHold.fileTooBigAlert);
-					} else {
-						fileReader.readAsDataURL(file);
-					}
 				} else {
 					monster.ui.alert(self.i18n.active().myOffice.musicOnHold.emptyUploadAlert);
 				}

submodules/strategy/strategy.css

@@ -627,8 +627,8 @@
 }
 
 #strategy_menu_popup_accordion .greeting-option-header:not(.collapsed) {
-	border-bottom-left-radius: none;
-	border-bottom-right-radius: none;
+	border-bottom-left-radius: 0px;
+	border-bottom-right-radius: 0px;
 }
 
 #strategy_menu_popup_accordion .greeting-option-header i {
@@ -656,3 +656,22 @@
 #strategy_menu_popup_accordion .greeting-option-actions button:not(:first-of-type) {
 	margin-right: 10px;
 }
+
+#strategy_menu_popup_accordion .greeting-option .upload-container {
+	display: flex;
+}
+#strategy_menu_popup_accordion .greeting-option .upload-container input[type="text"] {
+	margin: 0;
+	width: auto;
+	box-shadow: none;
+	border-radius: 2px 0px 0px 2px;
+	margin-right: -1px;
+	flex-grow: 1;
+}
+#strategy_menu_popup_accordion .greeting-option .upload-container button {
+	border-top-left-radius: 0px;
+	border-bottom-left-radius: 0px;
+	width: 170px;
+	padding-top: 4px;
+	padding-bottom: 4px;
+}

submodules/strategy/strategy.js

@@ -1360,7 +1360,26 @@ define(function(require){
 				greeting = params.greeting,
 				container = popup.find('#strategy_menu_popup'),
 				ttsGreeting = container.find('#strategy_menu_popup_tts_greeting'),
-				uploadGreeting = container.find('#strategy_menu_popup_upload_greeting');
+				uploadGreeting = container.find('#strategy_menu_popup_upload_greeting'),
+				mediaToUpload = undefined;
+
+			container.find('.upload-input').fileUpload({
+				inputOnly: true,
+				wrapperClass: 'upload-container',
+				btnText: self.i18n.active().strategy.popup.fileUploadButton,
+				btnClass: 'monster-button-secondary',
+				maxSize: 5,
+				success: function(results) {
+					mediaToUpload = results[0];
+				},
+				error: function(errors) {
+					if(errors.hasOwnProperty('size') && errors.size.length > 0) {
+						monster.ui.alert(self.i18n.active().strategy.alertMessages.fileTooBigAlert);
+					}
+					container.find('.upload-container input').val('');
+					mediaToUpload = undefined;
+				}
+			});
 
 			container.on('click', '.number-text', function(e) {
 				var $this = $(this);
@@ -1473,9 +1492,7 @@ define(function(require){
 			});
 
 			uploadGreeting.find('.update-greeting').on('click', function(e) {
-				var fileReader = new FileReader(),
-					file = uploadGreeting.find('input[type="file"]')[0].files[0],
-					uploadFile = function(file, greetingId, callback) {
+				var uploadFile = function(file, greetingId, callback) {
 						self.callApi({
 							resource: 'media.upload',
 							data: {
@@ -1489,10 +1506,10 @@ define(function(require){
 						});
 					};
 
-				fileReader.onloadend = function(evt) {
+				if(mediaToUpload) {
 					if(greeting && greeting.id) {
 						greeting.type = 'virtual_receptionist';
-						greeting.description = file.name;
+						greeting.description = mediaToUpload.name;
 						greeting.media_source = "upload";
 						delete greeting.tts;
 
@@ -1505,7 +1522,7 @@ define(function(require){
 							},
 							success: function(data, status) {
 								greeting = data.data;
-								uploadFile(evt.target.result, data.data.id, function() {
+								uploadFile(mediaToUpload.file, greeting.id, function() {
 									container.find('.greeting-option').removeClass('active');
 									uploadGreeting.parents('.greeting-option').addClass('active');
 									uploadGreeting.collapse('hide');
@@ -1522,12 +1539,12 @@ define(function(require){
 									name: callflowName,
 									type: 'virtual_receptionist',
 									media_source: "upload",
-									description: file.name
+									description: mediaToUpload.name
 								}
 							},
 							success: function(data, status) {
 								greeting = data.data;
-								menu.media.greeting = data.data.id;
+								menu.media.greeting = greeting.id;
 								self.callApi({
 									resource: 'menu.update',
 									data: {
@@ -1540,7 +1557,7 @@ define(function(require){
 									}
 								});
 
-								uploadFile(evt.target.result, data.data.id, function() {
+								uploadFile(mediaToUpload.file, greeting.id, function() {
 									container.find('.greeting-option').removeClass('active');
 									uploadGreeting.parents('.greeting-option').addClass('active');
 									uploadGreeting.collapse('hide');
@@ -1548,14 +1565,6 @@ define(function(require){
 							}
 						});
 					}
-				};
-
-				if(file) {
-					if(file.size >= (Math.pow(2,20) * 5)) { //If size bigger than 5MB
-						monster.ui.alert(self.i18n.active().strategy.alertMessages.fileTooBigAlert);
-					} else {
-						fileReader.readAsDataURL(file);
-					}
 				} else {
 					monster.ui.alert(self.i18n.active().strategy.alertMessages.emptyUploadGreeting);
 				}

submodules/users/users.css

@@ -742,11 +742,21 @@
 	margin: 0;
 	width: 330px;
 }
-.feature-popup-container[data-feature="music_on_hold"] .upload-div button {
+.feature-popup-container[data-feature="music_on_hold"] .upload-div button.upload-action {
 	margin-left: 10px;
 	padding-left: 13px;
 	padding-right: 13px;
 }
+.feature-popup-container[data-feature="music_on_hold"] .upload-div .file-upload {
+	margin: 0;
+}
+.feature-popup-container[data-feature="music_on_hold"] .upload-div .file-upload > input {
+	margin: 0;
+	width: 92px;
+}
+.feature-popup-container[data-feature="music_on_hold"] .upload-div .file-upload > button {
+	width: 220px;
+}
 
 .feature-popup-container[data-feature="faxing"] {
 	overflow: hidden;

submodules/users/users.js

@@ -2216,7 +2216,8 @@ define(function(require){
 
 		usersRenderMusicOnHold: function(currentUser) {
 			var self = this,
-				silenceMediaId = 'silence_stream://300000';
+				silenceMediaId = 'silence_stream://300000',
+				mediaToUpload = undefined;
 
 			self.usersListMedias(function(medias) {
 				var templateData = {
@@ -2229,9 +2230,8 @@ define(function(require){
 					switchFeature = featureTemplate.find('.switch').bootstrapSwitch(),
 					popup,
 					closeUploadDiv = function(newMedia) {
-						var uploadInput = featureTemplate.find('.upload-input');
-						uploadInput.wrap('<form>').closest('form').get(0).reset();
-						uploadInput.unwrap();
+						mediaToUpload = undefined;
+						featureTemplate.find('.upload-div input').val('');
 						featureTemplate.find('.upload-div').slideUp(function() {
 							featureTemplate.find('.upload-toggle').removeClass('active');
 						});
@@ -2242,6 +2242,24 @@ define(function(require){
 						}
 					};
 
+				featureTemplate.find('.upload-input').fileUpload({
+					inputOnly: true,
+					wrapperClass: 'file-upload input-append',
+					btnText: self.i18n.active().users.music_on_hold.audioUploadButton,
+					btnClass: 'btn',
+					maxSize: 5,
+					success: function(results) {
+						mediaToUpload = results[0];
+					},
+					error: function(errors) {
+						if(errors.hasOwnProperty('size') && errors.size.length > 0) {
+							monster.ui.alert(self.i18n.active().users.music_on_hold.fileTooBigAlert);
+						}
+						featureTemplate.find('.upload-div input').val('');
+						mediaToUpload = undefined;
+					}
+				});
+
 				featureTemplate.find('.cancel-link').on('click', function() {
 					popup.dialog('close').remove();
 				});
@@ -2263,19 +2281,16 @@ define(function(require){
 				});
 
 				featureTemplate.find('.upload-submit').on('click', function() {
-					var file = featureTemplate.find('.upload-input')[0].files[0];
-						fileReader = new FileReader();
-
-					fileReader.onloadend = function(evt) {
+					if(mediaToUpload) {
 						self.callApi({
 							resource: 'media.create',
 							data: {
 								accountId: self.accountId,
 								data: {
 									streamable: true,
-									name: file.name,
+									name: mediaToUpload.name,
 									media_source: "upload",
-									description: file.name
+									description: mediaToUpload.name
 								}
 							},
 							success: function(data, status) {
@@ -2285,7 +2300,7 @@ define(function(require){
 									data: {
 										accountId: self.accountId,
 										mediaId: media.id,
-										data: evt.target.result
+										data: mediaToUpload.file
 									},
 									success: function(data, status) {
 										closeUploadDiv(media);
@@ -2298,21 +2313,12 @@ define(function(require){
 												mediaId: media.id,
 												data: {}
 											},
-											success: function(data, status) {
-											}
+											success: function(data, status) {}
 										});
 									}
 								});
 							}
 						});
-					};
-
-					if(file) {
-						if(file.size >= (Math.pow(2,20) * 5)) { //If size bigger than 5MB
-							monster.ui.alert(self.i18n.active().users.music_on_hold.fileTooBigAlert);
-						} else {
-							fileReader.readAsDataURL(file);
-						}
 					} else {
 						monster.ui.alert(self.i18n.active().users.music_on_hold.emptyUploadAlert);
 					}

views/groups-feature-ringback.html

@@ -24,8 +24,8 @@
 		</div>
 		<div class="upload-div">
 			<input type="file" class="upload-input" accept="audio/*">
-			<button type="button" class="btn btn-success upload-submit"><i class="icon-upload-alt"></i></button>
-			<button type="button" class="btn btn-danger upload-cancel"><i class="icon-remove"></i></button>
+			<button type="button" class="btn btn-success upload-action upload-submit"><i class="icon-upload-alt"></i></button>
+			<button type="button" class="btn btn-danger upload-action upload-cancel"><i class="icon-remove"></i></button>
 		</div>
 	</div>
 

views/myOffice-musicOnHoldPopup.html

@@ -26,8 +26,8 @@
 		</div>
 		<div class="upload-div">
 			<input type="file" class="upload-input" accept="audio/*">
-			<button type="button" class="btn btn-success upload-submit"><i class="icon-upload-alt"></i></button>
-			<button type="button" class="btn btn-danger upload-cancel"><i class="icon-remove"></i></button>
+			<button type="button" class="btn btn-success upload-action upload-submit"><i class="icon-upload-alt"></i></button>
+			<button type="button" class="btn btn-danger upload-action upload-cancel"><i class="icon-remove"></i></button>
 		</div>
 	</div>
 

views/strategy-menuPopup.html

@@ -43,7 +43,7 @@
 						</div>
 						<div class="collapse" id="strategy_menu_popup_upload_greeting">
 							<div class="greeting-option-content">
-								<input type="file">
+								<input type="file" class="upload-input" accept="audio/*">
 								<div class="greeting-option-actions clearfix">
 									<button class="update-greeting pull-right monster-button-mini monster-button-primary">{{i18n.update}}</button>
 									<button class="cancel-greeting pull-right monster-button-mini">{{i18n.cancel}}</button>

views/users-feature-music_on_hold.html

@@ -24,8 +24,8 @@
 		</div>
 		<div class="upload-div">
 			<input type="file" class="upload-input" accept="audio/*">
-			<button type="button" class="btn btn-success upload-submit"><i class="icon-upload-alt"></i></button>
-			<button type="button" class="btn btn-danger upload-cancel"><i class="icon-remove"></i></button>
+			<button type="button" class="btn btn-success upload-action upload-submit"><i class="icon-upload-alt"></i></button>
+			<button type="button" class="btn btn-danger upload-action upload-cancel"><i class="icon-remove"></i></button>
 		</div>
 	</div>