Jingga/oms-Media
1
0
Fork 0
mirror of https://github.com/Karaka-Management/oms-Media.git synced 2026-02-18 18:28:40 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Draft uploader

Browse Source
This commit is contained in:
Dennis Eichhorn 2019-02-03 00:10:41 +01:00
parent cc70ccf0ca
commit 818acf1a59
4 changed files with 254 additions and 157 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
Controller.js
View File

@ -4,12 +4,18 @@
jsOMS.Autoloader.defineNamespace('jsOMS.Modules'); jsOMS.Autoloader.defineNamespace('jsOMS.Modules');
jsOMS.Modules.Media = function (app) jsOMS.Modules.Media = class {
/**
* @constructor
*
* @since 1.0.0
*/
constructor (app)
{ {
this.app = app; this.app = app;
}; };
jsOMS.Modules.Media.prototype.bind = function (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;
@ -19,23 +25,27 @@
} }
}; };
jsOMS.Modules.Media.prototype.bindElement = function (form) bindElement (form)
{ {
if (typeof form === 'undefined' || !form) { if (typeof form === 'undefined' || !form) {
// todo: do logging here 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 + ']')) { if (!form.querySelector('input[type=file]')
|| !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 */ /** global: jsOMS */
let fileFields = document.querySelectorAll( const fileFields = document.querySelectorAll(
'#' + e.id + ' input[type=file], ' '#' + e.id + ' input[type=file], '
+ 'input[form=' + e.id + '][type=file]' + 'input[form=' + e.id + '][type=file]'
), ),
@ -60,6 +70,7 @@
} }
if (uploader.count() < 1) { if (uploader.count() < 1) {
self.app.eventManager.trigger(form.id, requestId);
return; return;
} }
@ -70,6 +81,7 @@
} }
} }
}; };
}
}(window.jsOMS = window.jsOMS || {})); }(window.jsOMS = window.jsOMS || {}));
jsOMS.ready(function () jsOMS.ready(function ()

3
Controller/ApiController.php
View File

@ -16,11 +16,12 @@ namespace Modules\Media\Controller;
use Modules\Media\Models\Media; use Modules\Media\Models\Media;
use Modules\Media\Models\MediaMapper; use Modules\Media\Models\MediaMapper;
use Modules\Media\Models\UploadFile; use Modules\Media\Models\UploadFile;
use Modules\Media\Models\UploadStatus; use Modules\Media\Models\UploadStatus;
use phpOMS\Message\RequestAbstract; use phpOMS\Message\RequestAbstract;
use phpOMS\Message\ResponseAbstract; use phpOMS\Message\ResponseAbstract;
use phpOMS\System\MimeType;
/** /**
* Media class. * Media class.

111
Models/Upload.js
View File

@ -1,10 +1,26 @@
/**
* Media uploader.
*
* @copyright Dennis Eichhorn
* @license OMS License 1.0
* @version 1.0.0
* @since 1.0.0
*/
(function (jsOMS) (function (jsOMS)
{ {
"use strict"; "use strict";
jsOMS.Autoloader.defineNamespace('jsOMS.Modules.Models.Media'); jsOMS.Autoloader.defineNamespace('jsOMS.Modules.Models.Media');
jsOMS.Modules.Models.Media.Upload = function (responseManager) jsOMS.Modules.Models.Media.Upload = class {
/**
* @constructor
*
* @param {Object} responseManager Response manager
*
* @since 1.0.0
*/
constructor (responseManager)
{ {
this.responseManager = responseManager; this.responseManager = responseManager;
this.success = []; this.success = [];
@ -15,54 +31,118 @@
this.files = []; this.files = [];
}; };
jsOMS.Modules.Models.Media.Upload.prototype.setMaxFileSize = function (size) /**
* Set max allowed file size.
*
* @param {int} size Max file size
*
* @return {void}
*
* @since 1.0.0
*/
setMaxFileSize (size)
{ {
this.maxFileSize = size; this.maxFileSize = size;
}; };
jsOMS.Modules.Models.Media.Upload.prototype.getMaxFileSize = function (size) /**
* Get max allowed file size.
*
* @return {int} Max file size
*
* @since 1.0.0
*/
getMaxFileSize ()
{ {
return this.maxFileSize; return this.maxFileSize;
}; };
jsOMS.Modules.Models.Media.Upload.prototype.setSuccess = function (id, callback) /**
* 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; this.success[id] = callback;
}; };
jsOMS.Modules.Models.Media.Upload.prototype.setUri = function (uri) /**
* Set upload uri.
*
* @param {string} uri Upload destination
*
* @return {void}
*
* @since 1.0.0
*/
setUri (uri)
{ {
this.uri = uri; this.uri = uri;
}; };
jsOMS.Modules.Models.Media.Upload.prototype.setAllowedTypes = function (allowed) /**
* Set allowed upload file types.
*
* @param {array} allowed Allowed upload file types
*
* @return {void}
*
* @since 1.0.0
*/
setAllowedTypes (allowed)
{ {
this.allowedTypes = allowed; this.allowedTypes = allowed;
}; };
jsOMS.Modules.Models.Media.Upload.prototype.addAllowedType = function (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); this.allowedTypes.push(allowed);
}; };
jsOMS.Modules.Models.Media.Upload.prototype.setMaxFileSize = function (size) /**
{ * Add file to upload
this.maxFileSize = size; *
}; * @param {string} file File to upload
*
jsOMS.Modules.Models.Media.Upload.prototype.addFile = function (file) * @return {void}
*
* @since 1.0.0
*/
addFile (file)
{ {
this.files.push(file); this.files.push(file);
}; };
jsOMS.Modules.Models.Media.Upload.prototype.count = function () /**
* Get count of file to upload
*
* @return {int}
*
* @since 1.0.0
*/
count ()
{ {
return this.files.length; return this.files.length;
}; };
// todo: maybe do file upload together with data upload in FormData. // todo: maybe do file upload together with data upload in FormData.
// let the module forward the files to the media module?! // let the module forward the files to the media module?!
jsOMS.Modules.Models.Media.Upload.prototype.upload = function (formId) upload (formId)
{ {
// TODO: validate file type + file size // TODO: validate file type + file size
@ -99,4 +179,5 @@
request.send(); request.send();
}; };
}
}(window.jsOMS = window.jsOMS || {})); }(window.jsOMS = window.jsOMS || {}));

11
Theme/Backend/Components/Upload/upload.tpl.php
View File

@ -10,7 +10,10 @@
<div class="ipt-wrap"> <div class="ipt-wrap">
<div class="ipt-first"> <div class="ipt-first">
<div class="advancedInput wf-100" id="iMediaInput"> <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"> <div id="iMediaInput-dropdown" class="dropdown" data-active="true">
<table id="a1" class="table darkred"> <table id="a1" class="table darkred">
<thead> <thead>
@ -21,7 +24,7 @@
<tbody> <tbody>
<template id="iMediaInput-rowElement" class="rowTemplate"> <template id="iMediaInput-rowElement" class="rowTemplate">
<tr tabindex="-1"> <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="/name" data-tpl-value="/name" data-value=""></td>
<td data-tpl-text="/extension"></td> <td data-tpl-text="/extension"></td>
</tr> </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>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>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> <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"> <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="/id" data-tpl-value="/id" data-value=""></td>
<td data-tpl-text="/name" data-tpl-value="/name" data-value=""></td> <td data-tpl-text="/name" data-tpl-value="/name" data-value=""></td>
<td data-tpl-text="/extension"></td> <td data-tpl-text="/extension"></td>