forked from verdnatura/hedera-web
Subida de fotos múltiple
This commit is contained in:
Juan Ferrer Toribio
parent
871a089114
commit
da007ff7c0
|
|
@ -2,36 +2,203 @@
|
|||
Hedera.Photos = new Class
|
||||
({
|
||||
Extends: Hedera.Form
|
||||
,filesData: []
|
||||
,uploadCount: 0
|
||||
,errors: false
|
||||
|
||||
,activate: function ()
|
||||
{
|
||||
this.$('schema').value = 'catalog';
|
||||
this.$('photo-id').focus ();
|
||||
|
||||
var self = this;
|
||||
this.$('html-form').onsubmit = function ()
|
||||
{ self._onSubmit (); return false; };
|
||||
}
|
||||
|
||||
,_onSubmit: function ()
|
||||
{
|
||||
this.$('schema-field').value = this.$('schema').value;
|
||||
this.$('submit').disabled = true;
|
||||
|
||||
this.conn.sendFormMultipart (this.$('html-form'),
|
||||
this._onResponse.bind (this));
|
||||
,addFiles: function (files)
|
||||
{
|
||||
if (!files)
|
||||
return;
|
||||
|
||||
for (var i = 0; i < files.length; i++)
|
||||
this.addFile (files[i]);
|
||||
}
|
||||
|
||||
,_onResponse: function (json, error)
|
||||
|
||||
,addFile: function (file)
|
||||
{
|
||||
this.$('submit').disabled = false;
|
||||
var doc = document;
|
||||
var div = doc.createElement ('div');
|
||||
|
||||
if (error)
|
||||
throw error;
|
||||
var button = new Htk.Button ({
|
||||
tip: 'Remove',
|
||||
icon: 'delete'
|
||||
});
|
||||
button.on ('click', this.onFileRemove, this);
|
||||
div.appendChild (button.node);
|
||||
|
||||
this.$('photo-id').value = '';
|
||||
this.$('photo-id').focus ();
|
||||
Htk.Toast.showMessage (_('ImageAdded'));
|
||||
var thumb = doc.createElement ('img');
|
||||
thumb.file = file;
|
||||
thumb.className = 'thumb';
|
||||
div.appendChild (thumb);
|
||||
|
||||
var reader = new FileReader ();
|
||||
reader.onload = function (e) { thumb.src = e.target.result; };
|
||||
reader.readAsDataURL(file);
|
||||
|
||||
var name = doc.createElement ('input');
|
||||
name.type = 'text';
|
||||
name.value = getFileName (file.name);
|
||||
div.appendChild (name);
|
||||
|
||||
var status = doc.createElement ('span');
|
||||
status.className = 'status';
|
||||
div.appendChild (status);
|
||||
|
||||
var fileData = {
|
||||
div: div,
|
||||
file: file,
|
||||
name: name,
|
||||
status: status,
|
||||
sent: false,
|
||||
loading : false
|
||||
};
|
||||
this.filesData.push (fileData);
|
||||
button.value = fileData;
|
||||
|
||||
this.$('file-list').appendChild (div);
|
||||
}
|
||||
|
||||
,onUploadClick: function ()
|
||||
{
|
||||
var filesData = this.filesData;
|
||||
var formData = new FormData();
|
||||
var count = 0;
|
||||
|
||||
for (var i = 0; i < filesData.length; i++)
|
||||
{
|
||||
var fileData = filesData[i];
|
||||
|
||||
if (!(fileData.sent || fileData.loading))
|
||||
{
|
||||
formData.set ('image', fileData.file);
|
||||
formData.set ('name', fileData.name.value);
|
||||
formData.set ('schema', this.$('schema').value);
|
||||
formData.set ('srv', 'json:image/upload');
|
||||
this.conn.sendFormData (formData,
|
||||
this.onFileUpload.bind (this, fileData));
|
||||
|
||||
fileData.loading = true;
|
||||
this.uploadCount++;
|
||||
count++;
|
||||
}
|
||||
}
|
||||
|
||||
if (count === 0)
|
||||
Htk.Toast.showWarning ('There are no files to upload');
|
||||
}
|
||||
|
||||
,onFileUpload: function (fileData, data, error)
|
||||
{
|
||||
fileData.loading = false;
|
||||
|
||||
if (data)
|
||||
{
|
||||
var iconName = 'ok';
|
||||
var title = _('ImageAdded');
|
||||
fileData.sent = true;
|
||||
fileData.name.disabled = true;
|
||||
}
|
||||
else
|
||||
{
|
||||
var iconName = 'error';
|
||||
var title = error.message;
|
||||
this.errors = true;
|
||||
}
|
||||
|
||||
var status = fileData.status;
|
||||
Vn.Node.removeChilds (status);
|
||||
|
||||
var icon = new Htk.Icon ({icon: iconName});
|
||||
status.appendChild (icon.node);
|
||||
status.title = title;
|
||||
|
||||
this.uploadCount--;
|
||||
|
||||
if (this.uploadCount === 0)
|
||||
{
|
||||
if (!this.errors)
|
||||
Htk.Toast.showMessage (_('Upload finished successfully'));
|
||||
else
|
||||
Htk.Toast.showError (_('Some errors happened on upload'));
|
||||
|
||||
this.errors = false;
|
||||
}
|
||||
}
|
||||
|
||||
,onFileRemove: function (button)
|
||||
{
|
||||
var fileData = button.value;
|
||||
this.$('file-list').removeChild (fileData.div);
|
||||
|
||||
for (var i = 0; i < this.filesData.length; i++)
|
||||
if (this.filesData[i] === fileData)
|
||||
{
|
||||
this.filesData.splice (i, 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
,onClearClick: function ()
|
||||
{
|
||||
this.filesData = [];
|
||||
Vn.Node.removeChilds (this.$('file-list'));
|
||||
}
|
||||
|
||||
,onDropzoneClick: function ()
|
||||
{
|
||||
this.$('file').click ();
|
||||
}
|
||||
|
||||
,onFileChange: function ()
|
||||
{
|
||||
this.addFiles (this.$('file').files);
|
||||
}
|
||||
|
||||
,onDragEnter: function (event)
|
||||
{
|
||||
Vn.Node.addClass (this.$('dropzone'), 'dragover');
|
||||
}
|
||||
|
||||
,onDragLeave: function (event)
|
||||
{
|
||||
Vn.Node.removeClass (this.$('dropzone'), 'dragover');
|
||||
}
|
||||
|
||||
,onDragOver: function (event)
|
||||
{
|
||||
event.preventDefault ();
|
||||
}
|
||||
|
||||
,onDragEnd: function (event)
|
||||
{
|
||||
Vn.Node.removeClass (this.$('dropzone'), 'dragover');
|
||||
event.dataTransfer.clearData ();
|
||||
}
|
||||
|
||||
,onDrop: function (event)
|
||||
{
|
||||
event.preventDefault ();
|
||||
this.addFiles (event.dataTransfer.files);
|
||||
}
|
||||
});
|
||||
|
||||
function getFileName (path)
|
||||
{
|
||||
var barIndex = path.lastIndexOf ('/');
|
||||
if (barIndex === -1)
|
||||
barIndex = path.lastIndexOf ('\\');
|
||||
if (barIndex === -1)
|
||||
barIndex = 0;
|
||||
|
||||
var dotIndex = path.lastIndexOf ('.');
|
||||
if (dotIndex === -1)
|
||||
dotIndex = 0;
|
||||
|
||||
return path.substr (barIndex, dotIndex);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,27 +5,69 @@
|
|||
}
|
||||
.photos .box
|
||||
{
|
||||
max-width: 30em;
|
||||
max-width: 25em;
|
||||
padding: 2em;
|
||||
}
|
||||
.photos .form
|
||||
|
||||
/* Dropzone */
|
||||
|
||||
.photos .dropzone
|
||||
{
|
||||
margin: 0 auto;
|
||||
max-width: 25em;
|
||||
background-color: white;
|
||||
border-style: dashed;
|
||||
border-radius: .4em;
|
||||
border-color: #2196F3;
|
||||
padding: 2em 1em;
|
||||
text-align: center;
|
||||
color: #666;
|
||||
cursor: pointer;
|
||||
}
|
||||
.photos iframe
|
||||
.photos .dropzone.dragover
|
||||
{
|
||||
color: #CCC;
|
||||
border-style: solid;
|
||||
}
|
||||
.photos input[type=file]
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
/* File list */
|
||||
|
||||
.photos input[type=submit]
|
||||
.photos .file-list
|
||||
{
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
padding: 0.6em;
|
||||
margin-top: 1.5em;
|
||||
font-size: 1.2em;
|
||||
margin-top: 1em;
|
||||
}
|
||||
.photos .file-list > div
|
||||
{
|
||||
height: 2.5em;
|
||||
}
|
||||
.photos .file-list .thumb
|
||||
{
|
||||
max-height: 2em;
|
||||
max-width: 2em;
|
||||
vertical-align: middle;
|
||||
margin: 0 1em;
|
||||
}
|
||||
.photos .file-list input
|
||||
{
|
||||
max-width: 10em;
|
||||
}
|
||||
.photos .file-list .status
|
||||
{
|
||||
margin-left: .5em;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
|
||||
.photos .footer
|
||||
{
|
||||
margin-top: 1.5em;
|
||||
text-align: center;
|
||||
}
|
||||
.photos .footer > button
|
||||
{
|
||||
font-size: 1.2em;
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,36 +4,40 @@
|
|||
</div>
|
||||
<div id="form" class="photos">
|
||||
<div class="box">
|
||||
<div class="form">
|
||||
<form
|
||||
id="html-form"
|
||||
enctype="multipart/form-data">
|
||||
<input type="hidden" name="srv" value="json:image/upload"/>
|
||||
<div class="form-group">
|
||||
<label><t>Id</t></label>
|
||||
<input type="number" name="id" id="photo-id"/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label><t>ImageName</t></label>
|
||||
<input type="text" name="name"/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label><t>Collection</t></label>
|
||||
<htk-combo id="schema">
|
||||
<db-model property="model">
|
||||
<custom>
|
||||
SELECT name, `desc` FROM image_schema ORDER BY `desc`
|
||||
</custom>
|
||||
</db-model>
|
||||
</htk-combo>
|
||||
<input type="hidden" name="schema" id="schema-field"/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label><t>ImageFile</t></label>
|
||||
<input type="file" name="image"/>
|
||||
</div>
|
||||
<input id="submit" type="submit" class="thin"/>
|
||||
</form>
|
||||
<div class="form-group">
|
||||
<label><t>Collection</t></label>
|
||||
<htk-combo id="schema">
|
||||
<db-model property="model">
|
||||
<custom>
|
||||
SELECT name, `desc` FROM image_schema ORDER BY `desc`
|
||||
</custom>
|
||||
</db-model>
|
||||
</htk-combo>
|
||||
</div>
|
||||
<div id="dropzone" class="dropzone"
|
||||
on-dragenter="onDragEnter"
|
||||
on-dragleave="onDragLeave"
|
||||
on-mouseout="onDragLeave"
|
||||
on-dragover="onDragOver"
|
||||
on-drop="onDrop"
|
||||
on-dragend="onDragEnd"
|
||||
on-click="onDropzoneClick">
|
||||
Click or drop files here!
|
||||
</div>
|
||||
<input
|
||||
id="file"
|
||||
type="file"
|
||||
multiple="true"
|
||||
name="image"
|
||||
on-change="onFileChange"/>
|
||||
<div id="file-list" class="file-list"/>
|
||||
<div class="footer">
|
||||
<button class="thin" on-click="onClearClick">
|
||||
<t>Clear all</t>
|
||||
</button>
|
||||
<button class="thin" on-click="onUploadClick">
|
||||
<t>Upload files</t>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -183,7 +183,7 @@ module.exports = new Class
|
|||
|
||||
if (this.token)
|
||||
formData.append ('token', this.token);
|
||||
|
||||
|
||||
var request = new XMLHttpRequest ();
|
||||
request.open ('post', form.action, true);
|
||||
request.onreadystatechange =
|
||||
|
|
@ -193,6 +193,20 @@ module.exports = new Class
|
|||
this._addRequest ();
|
||||
}
|
||||
|
||||
,sendFormData: function (formData, callback)
|
||||
{
|
||||
if (this.token)
|
||||
formData.append ('token', this.token);
|
||||
|
||||
var request = new XMLHttpRequest ();
|
||||
request.open ('post', '', true);
|
||||
request.onreadystatechange =
|
||||
this._onStateChange.bind (this, request, callback);
|
||||
request.send (formData);
|
||||
|
||||
this._addRequest ();
|
||||
}
|
||||
|
||||
/*
|
||||
* Called when REST response is received.
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ require_once (__DIR__.'/util.php');
|
|||
/**
|
||||
* Syncronizes the data directory with the database, this may take
|
||||
* some time.
|
||||
**/
|
||||
*/
|
||||
class Sync extends Vn\Lib\Method
|
||||
{
|
||||
private $trashSubdir;
|
||||
|
|
@ -20,7 +20,7 @@ class Sync extends Vn\Lib\Method
|
|||
|
||||
function run ()
|
||||
{
|
||||
$db = $this->getSysConn ()
|
||||
$db = $this->getSysConn ();
|
||||
|
||||
set_time_limit (0);
|
||||
$this->$trashSubdir = date ('YmdHis');
|
||||
|
|
@ -111,7 +111,7 @@ class Sync extends Vn\Lib\Method
|
|||
* Moves a data directory to the trash.
|
||||
*
|
||||
* @param string $file The file to move to the trash
|
||||
**/
|
||||
*/
|
||||
function moveTrash ($file)
|
||||
{
|
||||
$trashBasedir = "{$this->dataDir}/.trash/". $this->$trashSubdir;
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ require_once (__DIR__.'/util.php');
|
|||
* @param string $file The file name
|
||||
* @param integer $width The width of the thumb
|
||||
* @param integer $height The height of the thumb
|
||||
**/
|
||||
*/
|
||||
class Thumb extends Vn\Web\RestRequest
|
||||
{
|
||||
function run ()
|
||||
|
|
@ -64,7 +64,6 @@ class Thumb extends Vn\Web\RestRequest
|
|||
throw new Exception ('Size not allowed');
|
||||
|
||||
// Creates the thumb.
|
||||
|
||||
|
||||
$util = new Util ($this->app);
|
||||
$baseDir = "{$util->dataDir}/$schema";
|
||||
|
|
|
|||
|
|
@ -7,80 +7,34 @@ use Vn\Lib\UserException;
|
|||
|
||||
/**
|
||||
* Uploads a file creating its corresponding sizes.
|
||||
**/
|
||||
*/
|
||||
class Upload extends Vn\Web\JsonRequest
|
||||
{
|
||||
const PARAMS = [
|
||||
'name',
|
||||
'schema'
|
||||
];
|
||||
|
||||
function run ($db)
|
||||
{
|
||||
$util = new Util ($this->app);
|
||||
|
||||
// Checks schema.
|
||||
|
||||
$regexp = '/[^a-z0-9_]/';
|
||||
|
||||
if (empty ($_REQUEST['schema']) || preg_match ($regexp, $_REQUEST['schema']) !== 0)
|
||||
throw new UserException (s('Bad schema name'));
|
||||
|
||||
$schema = $_REQUEST['schema'];
|
||||
$name = $_REQUEST['name'];
|
||||
|
||||
// Checks schema
|
||||
|
||||
$info = $util->loadInfo ($schema);
|
||||
|
||||
if (!$info)
|
||||
throw new UserException (s('Schema not exists'));
|
||||
|
||||
// Checks file name and identifier.
|
||||
// Checks file name
|
||||
|
||||
$query = sprintf (
|
||||
'SHOW INDEX FROM `%1$s`.`%2$s` WHERE Key_name = \'PRIMARY\''
|
||||
,$info['schema']
|
||||
,$info['table']
|
||||
);
|
||||
$pk = $db->getRow ($query);
|
||||
|
||||
if (!empty ($_REQUEST['id']) && empty ($_REQUEST['name']))
|
||||
{
|
||||
$query = sprintf (
|
||||
'SELECT `%3$s` FROM `%1$s`.`%2$s` WHERE `%4$s` = #id'
|
||||
,$info['schema']
|
||||
,$info['table']
|
||||
,$info['column']
|
||||
,$pk['Column_name']
|
||||
);
|
||||
$_REQUEST['name'] = $db->getValue ($query,
|
||||
['id' => $_REQUEST['id']]);
|
||||
}
|
||||
|
||||
if (empty ($_REQUEST['name']) || preg_match ($regexp, $_REQUEST['name']) !== 0)
|
||||
if (preg_match ('/[^a-z0-9_]/', $_REQUEST['name']) !== 0)
|
||||
throw new UserException (s('Bad file name'));
|
||||
|
||||
// Checks permissions.
|
||||
|
||||
if (!empty ($_REQUEST['id']))
|
||||
{
|
||||
$filterColumn = $pk['Column_name'];
|
||||
$filterValue = $_REQUEST['id'];
|
||||
}
|
||||
else
|
||||
{
|
||||
$filterColumn = $info['column'];
|
||||
$filterValue = $_REQUEST['name'];
|
||||
}
|
||||
|
||||
$query = sprintf (
|
||||
'UPDATE `%1$s`.`%2$s` SET `%3$s` = #name WHERE `%4$s` = #filter LIMIT 1'
|
||||
,$info['schema']
|
||||
,$info['table']
|
||||
,$info['column']
|
||||
,$filterColumn
|
||||
);
|
||||
$params = [
|
||||
'name' => $_REQUEST['name'],
|
||||
'filter' => $filterValue
|
||||
];
|
||||
|
||||
if (!$db->query ($query, $params))
|
||||
throw new UserException (s('Permission denied'));
|
||||
|
||||
// Checks for file errors.
|
||||
// Checks for file errors
|
||||
|
||||
if (empty ($_FILES['image']['name']))
|
||||
throw new UserException (s('File not choosed'));
|
||||
|
|
@ -123,14 +77,15 @@ class Upload extends Vn\Web\JsonRequest
|
|||
if ($_FILES['image']['size'] > $maxSize * 1048576)
|
||||
throw new UserException (sprintf (s('File size error'), $maxSize));
|
||||
|
||||
// Resizes and saves the image.
|
||||
// Resizes and saves the image
|
||||
|
||||
$fileName = "{$_REQUEST['name']}.png";
|
||||
$tmpName = $_FILES['image']['tmp_name'];
|
||||
$fileName = "{$name}.png";
|
||||
$schemaPath = "{$util->dataDir}/$schema";
|
||||
$fullFile = "$schemaPath/full/$fileName";
|
||||
$symbolicSrc = "../full/$fileName";
|
||||
|
||||
$image = Image::create ($_FILES['image']['tmp_name']);
|
||||
$image = Image::create ($tmpName);
|
||||
Image::resizeSave ($image, $fullFile, $info['max_height'], $info['max_width']);
|
||||
|
||||
foreach ($info['sizes'] as $size => $i)
|
||||
|
|
@ -140,7 +95,7 @@ class Upload extends Vn\Web\JsonRequest
|
|||
}
|
||||
|
||||
imagedestroy ($image);
|
||||
unlink ($_FILES['image']['tmp_name']);
|
||||
unlink ($tmpName);
|
||||
return TRUE;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue