diff --git a/Controller.js b/Controller.js index 87f53a9..6b20d52 100644 --- a/Controller.js +++ b/Controller.js @@ -4,72 +4,84 @@ jsOMS.Autoloader.defineNamespace('jsOMS.Modules'); - jsOMS.Modules.Media = function (app) - { - this.app = app; - }; + jsOMS.Modules.Media = class { + /** + * @constructor + * + * @since 1.0.0 + */ + constructor (app) + { + this.app = app; + }; - jsOMS.Modules.Media.prototype.bind = function (id) - { - const e = typeof id === 'undefined' ? document.getElementsByTagName('form') : [document.getElementById(id)], - length = e.length; + bind (id) + { + const e = typeof id === 'undefined' ? document.getElementsByTagName('form') : [document.getElementById(id)], + length = e.length; - for (let i = 0; i < length; ++i) { - this.bindElement(e[i]); - } - }; - - jsOMS.Modules.Media.prototype.bindElement = function (form) - { - if (typeof form === 'undefined' || !form) { - // todo: do logging here - - return; - } - - const self = this; - - if (!form.querySelector('input[type=file]') || !document.querySelector('input[type=file][form=' + form.id + ']')) { - try { - // Inject media upload into form view - this.app.uiManager.getFormManager().get(form.id).injectSubmit(function (e, requestId) - { - /** global: jsOMS */ - let fileFields = document.querySelectorAll( - '#' + e.id + ' input[type=file], ' - + 'input[form=' + e.id + '][type=file]' - ), - uploader = new jsOMS.Modules.Models.Media.Upload(self.app.responseManager); - - uploader.setSuccess(e.id, function (type, response) - { - document.querySelector('input[form=' + e.id + '][type=file]+input[form=' + e.id + '][type=hidden]').value = JSON.stringify(response); - self.app.eventManager.trigger(form.id, requestId); - }); - - uploader.setUri('{/base}/{/lang}/api/media'); - - const length = fileFields.length; - let fileLength = 0; - - for (let i = 0; i < length; ++i) { - fileLength = fileFields[i].files.length; - for (let j = 0; j < fileLength; ++j) { - uploader.addFile(fileFields[i].files[j]); - } - } - - if (uploader.count() < 1) { - return; - } - - uploader.upload(e.id); - }); - } catch (e) { - this.app.logger.info('Tried to add media upload support for form without an ID.'); + for (let i = 0; i < length; ++i) { + this.bindElement(e[i]); } - } - }; + }; + + bindElement (form) + { + if (typeof form === 'undefined' || !form) { + jsOMS.Log.Logger.instance.error('Invalid form: ' + form, 'MediaController'); + + return; + } + + const self = this; + + if (!form.querySelector('input[type=file]') + || !document.querySelector('input[type=file][form=' + form.id + ']') + ) { + try { + // Inject media upload into form view + this.app.uiManager.getFormManager().get(form.id).injectSubmit(function (e, requestId) + { + // todo: what if a form needs multiple different upload fields which should not be mixed + + /** global: jsOMS */ + const fileFields = document.querySelectorAll( + '#' + e.id + ' input[type=file], ' + + 'input[form=' + e.id + '][type=file]' + ), + uploader = new jsOMS.Modules.Models.Media.Upload(self.app.responseManager); + + uploader.setSuccess(e.id, function (type, response) + { + document.querySelector('input[form=' + e.id + '][type=file]+input[form=' + e.id + '][type=hidden]').value = JSON.stringify(response); + self.app.eventManager.trigger(form.id, requestId); + }); + + uploader.setUri('{/base}/{/lang}/api/media'); + + const length = fileFields.length; + let fileLength = 0; + + for (let i = 0; i < length; ++i) { + fileLength = fileFields[i].files.length; + for (let j = 0; j < fileLength; ++j) { + uploader.addFile(fileFields[i].files[j]); + } + } + + if (uploader.count() < 1) { + self.app.eventManager.trigger(form.id, requestId); + return; + } + + uploader.upload(e.id); + }); + } catch (e) { + this.app.logger.info('Tried to add media upload support for form without an ID.'); + } + } + }; + } }(window.jsOMS = window.jsOMS || {})); jsOMS.ready(function () diff --git a/Controller/ApiController.php b/Controller/ApiController.php index 742a22e..a097f0c 100644 --- a/Controller/ApiController.php +++ b/Controller/ApiController.php @@ -16,11 +16,12 @@ namespace Modules\Media\Controller; use Modules\Media\Models\Media; use Modules\Media\Models\MediaMapper; - use Modules\Media\Models\UploadFile; use Modules\Media\Models\UploadStatus; + use phpOMS\Message\RequestAbstract; use phpOMS\Message\ResponseAbstract; +use phpOMS\System\MimeType; /** * Media class. diff --git a/Models/Upload.js b/Models/Upload.js index 07f3a5f..daf45a6 100644 --- a/Models/Upload.js +++ b/Models/Upload.js @@ -1,102 +1,183 @@ +/** + * Media uploader. + * + * @copyright Dennis Eichhorn + * @license OMS License 1.0 + * @version 1.0.0 + * @since 1.0.0 + */ (function (jsOMS) { "use strict"; jsOMS.Autoloader.defineNamespace('jsOMS.Modules.Models.Media'); - jsOMS.Modules.Models.Media.Upload = function (responseManager) - { - this.responseManager = responseManager; - this.success = []; - - this.uri = ''; - this.allowedTypes = []; - this.maxFileSize = 0; - this.files = []; - }; - - jsOMS.Modules.Models.Media.Upload.prototype.setMaxFileSize = function (size) - { - this.maxFileSize = size; - }; - - jsOMS.Modules.Models.Media.Upload.prototype.getMaxFileSize = function (size) - { - return this.maxFileSize; - }; - - jsOMS.Modules.Models.Media.Upload.prototype.setSuccess = function (id, callback) - { - this.success[id] = callback; - }; - - jsOMS.Modules.Models.Media.Upload.prototype.setUri = function (uri) - { - this.uri = uri; - }; - - jsOMS.Modules.Models.Media.Upload.prototype.setAllowedTypes = function (allowed) - { - this.allowedTypes = allowed; - }; - - jsOMS.Modules.Models.Media.Upload.prototype.addAllowedType = function (allowed) - { - this.allowedTypes.push(allowed); - }; - - jsOMS.Modules.Models.Media.Upload.prototype.setMaxFileSize = function (size) - { - this.maxFileSize = size; - }; - - jsOMS.Modules.Models.Media.Upload.prototype.addFile = function (file) - { - this.files.push(file); - }; - - jsOMS.Modules.Models.Media.Upload.prototype.count = function () - { - return this.files.length; - }; - - // todo: maybe do file upload together with data upload in FormData. - // let the module forward the files to the media module?! - jsOMS.Modules.Models.Media.Upload.prototype.upload = function (formId) - { - // TODO: validate file type + file size - - const request = new jsOMS.Message.Request.Request(), - formData = new FormData(), - self = this; - - this.files.forEach(function (element, index) + jsOMS.Modules.Models.Media.Upload = class { + /** + * @constructor + * + * @param {Object} responseManager Response manager + * + * @since 1.0.0 + */ + constructor (responseManager) { - formData.append('file' + index, element); - }); + this.responseManager = responseManager; + this.success = []; - request.setData(formData); - request.setType(jsOMS.Message.Request.RequestType.FILE); - request.setUri(this.uri); - request.setMethod(jsOMS.Message.Request.RequestMethod.POST); - request.setRequestHeader('HTTP_X_REQUESTED_WITH', 'XMLHttpRequest'); - request.setSuccess(function (xhr) + this.uri = ''; + this.allowedTypes = []; + this.maxFileSize = 0; + this.files = []; + }; + + /** + * Set max allowed file size. + * + * @param {int} size Max file size + * + * @return {void} + * + * @since 1.0.0 + */ + setMaxFileSize (size) { - try { - const response = JSON.parse(xhr.response); + this.maxFileSize = size; + }; - if (!self.success[formId]) { - self.responseManager.run(null, response); - } else { - self.success[formId](null, response); + /** + * Get max allowed file size. + * + * @return {int} Max file size + * + * @since 1.0.0 + */ + getMaxFileSize () + { + return this.maxFileSize; + }; + + /** + * Set success callback. + * + * @param {string} id Form id + * @param {function} callback Function callback on success + * + * @return {void} + * + * @since 1.0.0 + */ + setSuccess (id, callback) + { + this.success[id] = callback; + }; + + /** + * Set upload uri. + * + * @param {string} uri Upload destination + * + * @return {void} + * + * @since 1.0.0 + */ + setUri (uri) + { + this.uri = uri; + }; + + /** + * Set allowed upload file types. + * + * @param {array} allowed Allowed upload file types + * + * @return {void} + * + * @since 1.0.0 + */ + setAllowedTypes (allowed) + { + this.allowedTypes = allowed; + }; + + /** + * Add allowed upload file type + * + * @param {string} allowed Allowed upload file type + * + * @return {void} + * + * @since 1.0.0 + */ + addAllowedType (allowed) + { + this.allowedTypes.push(allowed); + }; + + /** + * Add file to upload + * + * @param {string} file File to upload + * + * @return {void} + * + * @since 1.0.0 + */ + addFile (file) + { + this.files.push(file); + }; + + /** + * Get count of file to upload + * + * @return {int} + * + * @since 1.0.0 + */ + count () + { + return this.files.length; + }; + + // todo: maybe do file upload together with data upload in FormData. + // let the module forward the files to the media module?! + upload (formId) + { + // TODO: validate file type + file size + + const request = new jsOMS.Message.Request.Request(), + formData = new FormData(), + self = this; + + this.files.forEach(function (element, index) + { + formData.append('file' + index, element); + }); + + request.setData(formData); + request.setType(jsOMS.Message.Request.RequestType.FILE); + request.setUri(this.uri); + request.setMethod(jsOMS.Message.Request.RequestMethod.POST); + request.setRequestHeader('HTTP_X_REQUESTED_WITH', 'XMLHttpRequest'); + request.setSuccess(function (xhr) + { + try { + const response = JSON.parse(xhr.response); + + if (!self.success[formId]) { + self.responseManager.run(null, response); + } else { + self.success[formId](null, response); + } + } catch (e) { + console.log(e); + jsOMS.Log.Logger.instance.error(e); + jsOMS.Log.Logger.instance.error('Invalid media upload response: ' + xhr.response); } - } catch (e) { - console.log(e); - jsOMS.Log.Logger.instance.error(e); - jsOMS.Log.Logger.instance.error('Invalid media upload response: ' + xhr.response); - } - }); + }); - request.send(); - }; + request.send(); + }; + } }(window.jsOMS = window.jsOMS || {})); diff --git a/Theme/Backend/Components/Upload/upload.tpl.php b/Theme/Backend/Components/Upload/upload.tpl.php index cde2683..2104abc 100644 --- a/Theme/Backend/Components/Upload/upload.tpl.php +++ b/Theme/Backend/Components/Upload/upload.tpl.php @@ -10,7 +10,10 @@
- +