mirror of
https://github.com/Karaka-Management/oms-Media.git
synced 2026-02-08 05:28:41 +00:00
Draft uploader
This commit is contained in:
parent
cc70ccf0ca
commit
818acf1a59
138
Controller.js
138
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 ()
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
259
Models/Upload.js
259
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 || {}));
|
||||
|
|
|
|||
|
|
@ -10,7 +10,10 @@
|
|||
<div class="ipt-wrap">
|
||||
<div class="ipt-first">
|
||||
<div class="advancedInput wf-100" id="iMediaInput">
|
||||
<input autocomplete="off" class="input" id="mediaInput" name="mediaFile" type="text" emptyAfterSelect="true" data-autocomplete="true" data-value="/name/0" data-src="http://127.0.0.1/en/api/media/find?search={#mediaInput}">
|
||||
<input autocomplete="off" class="input" id="mediaInput" name="mediaFile" type="text"
|
||||
data-emptyAfter="true"
|
||||
data-autocomplete="false"
|
||||
data-src="http://127.0.0.1/en/api/media/find?search={#mediaInput}">
|
||||
<div id="iMediaInput-dropdown" class="dropdown" data-active="true">
|
||||
<table id="a1" class="table darkred">
|
||||
<thead>
|
||||
|
|
@ -21,7 +24,7 @@
|
|||
<tbody>
|
||||
<template id="iMediaInput-rowElement" class="rowTemplate">
|
||||
<tr tabindex="-1">
|
||||
<td data-tpl-text="/id" data-tpl-value="/id" data-value="">s</td>
|
||||
<td data-tpl-text="/id" data-tpl-value="/id" data-value=""></td>
|
||||
<td data-tpl-text="/name" data-tpl-value="/name" data-value=""></td>
|
||||
<td data-tpl-text="/extension"></td>
|
||||
</tr>
|
||||
|
|
@ -49,9 +52,9 @@
|
|||
<td>ID<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<td>Name<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<td>Extension<i class="sort-asc fa fa-chevron-up"></i><i class="sort-desc fa fa-chevron-down"></i>
|
||||
<tbody id="iMediaInput-tags" class="tags" data-limit="0" data-active="true">
|
||||
<tbody id="iMediaInput-tags" class="tags" data-limit="0" data-active="true" data-form="<?= $this->form; ?>">
|
||||
<template id="iMediaInput-tagTemplate">
|
||||
<tr data-tpl-value="/id" data-value="" data-uuid="">
|
||||
<tr data-tpl-value="/id" data-value="" data-uuid="" data-name="media-list">
|
||||
<td data-tpl-text="/id" data-tpl-value="/id" data-value=""></td>
|
||||
<td data-tpl-text="/name" data-tpl-value="/name" data-value=""></td>
|
||||
<td data-tpl-text="/extension"></td>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user