mirror of
https://github.com/Karaka-Management/oms-Media.git
synced 2026-02-16 17:28:41 +00:00
Use js modules
This commit is contained in:
parent
903cf417c0
commit
e084c7004a
154
Controller.js
154
Controller.js
|
|
@ -1,92 +1,86 @@
|
||||||
(function (jsOMS)
|
import { Autoloader } from '../../jsOMS/Autoloader.js';
|
||||||
{
|
import { Application } from '../../Web/Backend/js/backend.js';
|
||||||
"use strict";
|
import { Upload } from './Models/Upload.js';
|
||||||
|
|
||||||
jsOMS.Autoloader.defineNamespace('jsOMS.Modules');
|
Autoloader.defineNamespace('jsOMS.Modules');
|
||||||
|
|
||||||
jsOMS.Modules.Media = class {
|
jsOMS.Modules.Media = class {
|
||||||
/**
|
/**
|
||||||
* @constructor
|
* @constructor
|
||||||
*
|
*
|
||||||
* @since 1.0.0
|
* @since 1.0.0
|
||||||
*/
|
*/
|
||||||
constructor (app)
|
constructor (app)
|
||||||
{
|
{
|
||||||
this.app = app;
|
this.app = app;
|
||||||
};
|
};
|
||||||
|
|
||||||
bind (id)
|
bind (id)
|
||||||
{
|
{
|
||||||
const e = typeof id === 'undefined' ? document.getElementsByTagName('form') : [document.getElementById(id)],
|
const e = typeof id === 'undefined' ? document.getElementsByTagName('form') : [document.getElementById(id)],
|
||||||
length = e.length;
|
length = e.length;
|
||||||
|
|
||||||
for (let i = 0; i < length; ++i) {
|
for (let i = 0; i < length; ++i) {
|
||||||
this.bindElement(e[i]);
|
this.bindElement(e[i]);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
bindElement (form)
|
bindElement (form)
|
||||||
{
|
{
|
||||||
if (typeof form === 'undefined' || !form) {
|
if (typeof form === 'undefined' || !form) {
|
||||||
jsOMS.Log.Logger.instance.error('Invalid form: ' + form, 'MediaController');
|
jsOMS.Log.Logger.instance.error('Invalid form: ' + form, 'MediaController');
|
||||||
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const self = this;
|
const self = this;
|
||||||
|
|
||||||
if (!form.querySelector('input[type=file]')
|
if (!form.querySelector('input[type=file]')
|
||||||
|| !document.querySelector('input[type=file][form=' + form.id + ']')
|
|| !document.querySelector('input[type=file][form=' + form.id + ']')
|
||||||
) {
|
) {
|
||||||
try {
|
try {
|
||||||
// Inject media upload into form view
|
// Inject media upload into form view
|
||||||
this.app.uiManager.getFormManager().get(form.id).injectSubmit(function (e, requestId)
|
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]'
|
||||||
|
);
|
||||||
|
const uploader = new Upload(self.app.responseManager);
|
||||||
|
|
||||||
|
uploader.setSuccess(e.id, function (type, response)
|
||||||
{
|
{
|
||||||
// todo: what if a form needs multiple different upload fields which should not be mixed
|
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);
|
||||||
/** global: jsOMS */
|
|
||||||
const fileFields = document.querySelectorAll(
|
|
||||||
'#' + e.id + ' input[type=file], '
|
|
||||||
+ 'input[form=' + e.id + '][type=file]'
|
|
||||||
);
|
|
||||||
const 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.');
|
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 ()
|
window.omsApp.moduleManager.get('Media').bind();
|
||||||
{
|
|
||||||
"use strict";
|
|
||||||
|
|
||||||
window.omsApp.moduleManager.get('Media').bind();
|
|
||||||
});
|
|
||||||
|
|
|
||||||
327
Models/Upload.js
327
Models/Upload.js
|
|
@ -6,178 +6,171 @@
|
||||||
* @version 1.0.0
|
* @version 1.0.0
|
||||||
* @since 1.0.0
|
* @since 1.0.0
|
||||||
*/
|
*/
|
||||||
(function (jsOMS)
|
export class Upload {
|
||||||
{
|
/**
|
||||||
"use strict";
|
* @constructor
|
||||||
|
*
|
||||||
|
* @param {Object} responseManager Response manager
|
||||||
|
*
|
||||||
|
* @since 1.0.0
|
||||||
|
*/
|
||||||
|
constructor (responseManager)
|
||||||
|
{
|
||||||
|
this.responseManager = responseManager;
|
||||||
|
this.success = [];
|
||||||
|
|
||||||
jsOMS.Autoloader.defineNamespace('jsOMS.Modules.Models.Media');
|
this.uri = '';
|
||||||
|
this.allowedTypes = [];
|
||||||
|
this.maxFileSize = 0;
|
||||||
|
this.files = [];
|
||||||
|
};
|
||||||
|
|
||||||
jsOMS.Modules.Models.Media.Upload = class {
|
/**
|
||||||
/**
|
* Set max allowed file size.
|
||||||
* @constructor
|
*
|
||||||
*
|
* @param {int} size Max file size
|
||||||
* @param {Object} responseManager Response manager
|
*
|
||||||
*
|
* @return {void}
|
||||||
* @since 1.0.0
|
*
|
||||||
*/
|
* @since 1.0.0
|
||||||
constructor (responseManager)
|
*/
|
||||||
|
setMaxFileSize (size)
|
||||||
|
{
|
||||||
|
this.maxFileSize = size;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 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 Request(),
|
||||||
|
formData = new FormData(),
|
||||||
|
self = this;
|
||||||
|
|
||||||
|
this.files.forEach(function (element, index)
|
||||||
{
|
{
|
||||||
this.responseManager = responseManager;
|
formData.append('file' + index, element);
|
||||||
this.success = [];
|
});
|
||||||
|
|
||||||
this.uri = '';
|
request.setData(formData);
|
||||||
this.allowedTypes = [];
|
request.setType(RequestType.FILE);
|
||||||
this.maxFileSize = 0;
|
request.setUri(this.uri);
|
||||||
this.files = [];
|
request.setMethod(RequestMethod.POST);
|
||||||
};
|
request.setRequestHeader('HTTP_X_REQUESTED_WITH', 'XMLHttpRequest');
|
||||||
|
request.setSuccess(function (xhr)
|
||||||
/**
|
|
||||||
* Set max allowed file size.
|
|
||||||
*
|
|
||||||
* @param {int} size Max file size
|
|
||||||
*
|
|
||||||
* @return {void}
|
|
||||||
*
|
|
||||||
* @since 1.0.0
|
|
||||||
*/
|
|
||||||
setMaxFileSize (size)
|
|
||||||
{
|
{
|
||||||
this.maxFileSize = size;
|
try {
|
||||||
};
|
const response = JSON.parse(xhr.response);
|
||||||
|
|
||||||
/**
|
if (!self.success[formId]) {
|
||||||
* Get max allowed file size.
|
self.responseManager.run(null, response);
|
||||||
*
|
} else {
|
||||||
* @return {int} Max file size
|
self.success[formId](null, response);
|
||||||
*
|
|
||||||
* @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);
|
||||||
|
Logger.instance.error(e);
|
||||||
|
Logger.instance.error('Invalid media upload response: ' + xhr.response);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
request.send();
|
request.send();
|
||||||
};
|
};
|
||||||
}
|
};
|
||||||
}(window.jsOMS = window.jsOMS || {}));
|
|
||||||
Loading…
Reference in New Issue
Block a user