diff --git a/i18n/en-US.json b/i18n/en-US.json index 15bbe85..d499b8c 100644 --- a/i18n/en-US.json +++ b/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", diff --git a/submodules/groups/groups.css b/submodules/groups/groups.css index f1c1267..f8b89de 100644 --- a/submodules/groups/groups.css +++ b/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"] { diff --git a/submodules/groups/groups.js b/submodules/groups/groups.js index 5c0074c..2bbe1eb 100644 --- a/submodules/groups/groups.js +++ b/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('
').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); } diff --git a/submodules/myOffice/myOffice.css b/submodules/myOffice/myOffice.css index 97162f4..0911d54 100644 --- a/submodules/myOffice/myOffice.css +++ b/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 { diff --git a/submodules/myOffice/myOffice.js b/submodules/myOffice/myOffice.js index d04e475..1a39286 100644 --- a/submodules/myOffice/myOffice.js +++ b/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('').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); } diff --git a/submodules/strategy/strategy.css b/submodules/strategy/strategy.css index 38eb472..13e2b1d 100644 --- a/submodules/strategy/strategy.css +++ b/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; +} \ No newline at end of file diff --git a/submodules/strategy/strategy.js b/submodules/strategy/strategy.js index a0166a5..1cdf272 100644 --- a/submodules/strategy/strategy.js +++ b/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); } diff --git a/submodules/users/users.css b/submodules/users/users.css index 8a0df52..1ceddbc 100644 --- a/submodules/users/users.css +++ b/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; diff --git a/submodules/users/users.js b/submodules/users/users.js index 7a84727..4427d1f 100644 --- a/submodules/users/users.js +++ b/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('').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); } diff --git a/views/groups-feature-ringback.html b/views/groups-feature-ringback.html index 2a238bf..834c339 100644 --- a/views/groups-feature-ringback.html +++ b/views/groups-feature-ringback.html @@ -24,8 +24,8 @@
- - + +
diff --git a/views/myOffice-musicOnHoldPopup.html b/views/myOffice-musicOnHoldPopup.html index 271fe4a..d7befff 100644 --- a/views/myOffice-musicOnHoldPopup.html +++ b/views/myOffice-musicOnHoldPopup.html @@ -26,8 +26,8 @@
- - + +
diff --git a/views/strategy-menuPopup.html b/views/strategy-menuPopup.html index 912ca89..4300d37 100644 --- a/views/strategy-menuPopup.html +++ b/views/strategy-menuPopup.html @@ -43,7 +43,7 @@
- +
diff --git a/views/users-feature-music_on_hold.html b/views/users-feature-music_on_hold.html index 9083957..2d59868 100644 --- a/views/users-feature-music_on_hold.html +++ b/views/users-feature-music_on_hold.html @@ -24,8 +24,8 @@
- - + +