mirror of
https://github.com/Karaka-Management/oms-Media.git
synced 2026-02-09 05:58: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)
|
||||
{
|
||||
"use strict";
|
||||
import { Autoloader } from '../../jsOMS/Autoloader.js';
|
||||
import { Application } from '../../Web/Backend/js/backend.js';
|
||||
import { Upload } from './Models/Upload.js';
|
||||
|
||||
jsOMS.Autoloader.defineNamespace('jsOMS.Modules');
|
||||
Autoloader.defineNamespace('jsOMS.Modules');
|
||||
|
||||
jsOMS.Modules.Media = class {
|
||||
/**
|
||||
* @constructor
|
||||
*
|
||||
* @since 1.0.0
|
||||
*/
|
||||
constructor (app)
|
||||
{
|
||||
this.app = app;
|
||||
};
|
||||
jsOMS.Modules.Media = class {
|
||||
/**
|
||||
* @constructor
|
||||
*
|
||||
* @since 1.0.0
|
||||
*/
|
||||
constructor (app)
|
||||
{
|
||||
this.app = app;
|
||||
};
|
||||
|
||||
bind (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]);
|
||||
}
|
||||
};
|
||||
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');
|
||||
bindElement (form)
|
||||
{
|
||||
if (typeof form === 'undefined' || !form) {
|
||||
jsOMS.Log.Logger.instance.error('Invalid form: ' + form, 'MediaController');
|
||||
|
||||
return;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
const self = this;
|
||||
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)
|
||||
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]'
|
||||
);
|
||||
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
|
||||
|
||||
/** 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);
|
||||
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);
|
||||
});
|
||||
} 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 ()
|
||||
{
|
||||
"use strict";
|
||||
|
||||
window.omsApp.moduleManager.get('Media').bind();
|
||||
});
|
||||
window.omsApp.moduleManager.get('Media').bind();
|
||||
|
|
|
|||
327
Models/Upload.js
327
Models/Upload.js
|
|
@ -6,178 +6,171 @@
|
|||
* @version 1.0.0
|
||||
* @since 1.0.0
|
||||
*/
|
||||
(function (jsOMS)
|
||||
{
|
||||
"use strict";
|
||||
export class Upload {
|
||||
/**
|
||||
* @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 {
|
||||
/**
|
||||
* @constructor
|
||||
*
|
||||
* @param {Object} responseManager Response manager
|
||||
*
|
||||
* @since 1.0.0
|
||||
*/
|
||||
constructor (responseManager)
|
||||
/**
|
||||
* Set max allowed file size.
|
||||
*
|
||||
* @param {int} size Max file size
|
||||
*
|
||||
* @return {void}
|
||||
*
|
||||
* @since 1.0.0
|
||||
*/
|
||||
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;
|
||||
this.success = [];
|
||||
formData.append('file' + index, element);
|
||||
});
|
||||
|
||||
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)
|
||||
request.setData(formData);
|
||||
request.setType(RequestType.FILE);
|
||||
request.setUri(this.uri);
|
||||
request.setMethod(RequestMethod.POST);
|
||||
request.setRequestHeader('HTTP_X_REQUESTED_WITH', 'XMLHttpRequest');
|
||||
request.setSuccess(function (xhr)
|
||||
{
|
||||
this.maxFileSize = size;
|
||||
};
|
||||
try {
|
||||
const response = JSON.parse(xhr.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);
|
||||
if (!self.success[formId]) {
|
||||
self.responseManager.run(null, response);
|
||||
} else {
|
||||
self.success[formId](null, response);
|
||||
}
|
||||
});
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
Logger.instance.error(e);
|
||||
Logger.instance.error('Invalid media upload response: ' + xhr.response);
|
||||
}
|
||||
});
|
||||
|
||||
request.send();
|
||||
};
|
||||
}
|
||||
}(window.jsOMS = window.jsOMS || {}));
|
||||
request.send();
|
||||
};
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user