overhaul drag&drop code

documents can be dropped on other documents, files can be dropped
on folders
This commit is contained in:
Uwe Steinmann 2019-07-11 17:18:03 +02:00
parent 16e9d3748c
commit e1ae62ec7e
5 changed files with 260 additions and 124 deletions

View File

@ -545,7 +545,6 @@ function onAddClipboard(ev) { /* {{{ */
}
function sendFileToServer(formData,status) {
formData.append('command', 'uploaddocument');
var uploadURL = ajaxurl; //Upload URL
var extraData ={}; //Extra Data.
var jqXHR=$.ajax({
@ -641,18 +640,28 @@ function onAddClipboard(ev) { /* {{{ */
}
}
SeedDMSUpload.handleFileUpload = function(files,obj) {
var target = obj.data('target');
if(target) {
SeedDMSUpload.handleFileUpload = function(files,obj,statusbar) {
/* target is set for the quick upload area */
var target_id = obj.data('target');
var target_type = 'folder';
/* droptarget is set for folders and documents in lists */
var droptarget = obj.data('droptarget');
if(droptarget) {
target_type = droptarget.split("_")[0];
target_id = droptarget.split("_")[1];
}
if(target_type == 'folder' && target_id) {
for (var i = 0; i < files.length; i++) {
if(files[i].size <= maxFileSize) {
var fd = new FormData();
fd.append('folderid', target);
fd.append('formtoken', obj.data('formtoken'));
fd.append('targettype', target_type);
fd.append('folderid', target_id);
fd.append('formtoken', obj.data('uploadformtoken'));
fd.append('userfile', files[i]);
fd.append('command', 'uploaddocument');
// fd.append('path', files[i].webkitRelativePath);
var status = new createStatusbar(obj);
var status = new createStatusbar(statusbar);
status.setFileNameSize(files[i].name,files[i].size);
sendFileToServer(fd,status);
} else {
@ -666,6 +675,32 @@ function onAddClipboard(ev) { /* {{{ */
});
}
}
} else if(target_type == 'document' && target_id) {
/*
for (var i = 0; i < files.length; i++) {
if(files[i].size <= maxFileSize) {
var fd = new FormData();
fd.append('targettype', target_type);
fd.append('documentid', target_id);
fd.append('formtoken', obj.data('uploadformtoken'));
fd.append('userfile', files[i]);
fd.append('command', 'uploaddocument');
var status = new createStatusbar(statusbar);
status.setFileNameSize(files[i].name,files[i].size);
sendFileToServer(fd,status);
} else {
noty({
text: maxFileSizeMsg + '<br /><em>' + files[i].name + ' (' + files[i].size + ' Bytes)</em>',
type: 'error',
dismissQueue: true,
layout: 'topRight',
theme: 'defaultTheme',
timeout: 5000,
});
}
}
*/
}
}
}( window.SeedDMSUpload = window.SeedDMSUpload || {}, jQuery )); /* }}} */
@ -690,120 +725,209 @@ $(document).ready(function() { /* {{{ */
var files = e.originalEvent.dataTransfer.files;
//We need to send dropped files to Server
SeedDMSUpload.handleFileUpload(files,obj);
SeedDMSUpload.handleFileUpload(files,obj,obj);
});
$(document).on('dragenter', '.table-row-folder', function (e) {
$(document).on('dragenter', '.droptarget', function (e) {
e.stopPropagation();
e.preventDefault();
$(e.currentTarget).css('border', '2px dashed #0B85A1');
});
$(document).on('dragleave', '.table-row-folder', function (e) {
$(document).on('dragleave', '.droptarget', function (e) {
e.stopPropagation();
e.preventDefault();
$(e.currentTarget).css('border', '0px solid white');
});
$(document).on('dragover', '.table-row-folder', function (e) {
$(document).on('dragover', '.droptarget', function (e) {
e.stopPropagation();
e.preventDefault();
});
$(document).on('drop', '.table-row-folder', function (e) {
$(document).on('drop', '.droptarget', function (e) {
e.preventDefault();
e.stopPropagation();
$(e.currentTarget).css('border', '0px solid white');
attr_rel = $(e.currentTarget).attr('rel');
attr_rel = $(e.currentTarget).data('droptarget');
target_type = attr_rel.split("_")[0];
target_id = attr_rel.split("_")[1];
console.log(e.originalEvent.dataTransfer.getData("text"));
var source_info = JSON.parse(e.originalEvent.dataTransfer.getData("text"));
source_type = source_info.type;
source_id = source_info.id;
formtoken = source_info.formtoken;
// source_type = e.originalEvent.dataTransfer.getData("type");
// source_id = e.originalEvent.dataTransfer.getData("id");
// formtoken = e.originalEvent.dataTransfer.getData("formtoken");
if(source_type == 'document') {
bootbox.dialog(trans.confirm_move_document, [{
"label" : "<i class='icon-remove'></i> "+trans.move_document,
"class" : "btn-danger",
"callback": function() {
$.get('../op/op.Ajax.php',
{ command: 'movedocument', docid: source_id, targetfolderid: target_id, formtoken: formtoken },
function(data) {
if(data.success) {
$('#table-row-document-'+source_id).hide('slow');
noty({
text: data.message,
type: 'success',
dismissQueue: true,
layout: 'topRight',
theme: 'defaultTheme',
timeout: 1500,
});
} else {
noty({
text: data.message,
type: 'error',
dismissQueue: true,
layout: 'topRight',
theme: 'defaultTheme',
timeout: 3500,
});
}
},
'json'
);
}
}, {
"label" : trans.cancel,
"class" : "btn-cancel",
"callback": function() {
}
}]);
if(target_type == 'folder') {
var files = e.originalEvent.dataTransfer.files;
if(files.length > 0) {
console.log('Drop '+files.length+' files on '+target_type+' '+target_id);
SeedDMSUpload.handleFileUpload(files,$(e.currentTarget),$(e.currentTarget).find("span"));
} else {
var source_info = JSON.parse(e.originalEvent.dataTransfer.getData("text"));
source_type = source_info.type;
source_id = source_info.id;
formtoken = source_info.formtoken;
console.log('Drop '+source_type+' '+source_id+' on '+target_type+' '+target_id);
if(source_type == 'document') {
bootbox.dialog(trans.confirm_move_document, [{
"label" : "<i class='icon-remove'></i> "+trans.move_document,
"class" : "btn-danger",
"callback": function() {
$.get('../op/op.Ajax.php',
{ command: 'movedocument', docid: source_id, targetfolderid: target_id, formtoken: formtoken },
function(data) {
if(data.success) {
$('#table-row-document-'+source_id).hide('slow');
noty({
text: data.message,
type: 'success',
dismissQueue: true,
layout: 'topRight',
theme: 'defaultTheme',
timeout: 1500,
});
} else {
noty({
text: data.message,
type: 'error',
dismissQueue: true,
layout: 'topRight',
theme: 'defaultTheme',
timeout: 3500,
});
}
},
'json'
);
}
}, {
"label" : trans.cancel,
"class" : "btn-cancel",
"callback": function() {
}
}]);
url = "../out/out.MoveDocument.php?documentid="+source_id+"&targetid="+target_id;
// document.location = url;
} else if(source_type == 'folder' && source_id != target_id) {
bootbox.dialog(trans.confirm_move_folder, [{
"label" : "<i class='icon-remove'></i> "+trans.move_folder,
"class" : "btn-danger",
"callback": function() {
$.get('../op/op.Ajax.php',
{ command: 'movefolder', folderid: source_id, targetfolderid: target_id, formtoken: formtoken },
function(data) {
if(data.success) {
$('#table-row-folder-'+source_id).hide('slow');
noty({
text: data.message,
type: 'success',
dismissQueue: true,
layout: 'topRight',
theme: 'defaultTheme',
timeout: 1500,
});
} else {
noty({
text: data.message,
type: 'error',
dismissQueue: true,
layout: 'topRight',
theme: 'defaultTheme',
timeout: 3500,
});
}
},
'json'
);
}
}, {
"label" : trans.cancel,
"class" : "btn-cancel",
"callback": function() {
}
}]);
url = "../out/out.MoveDocument.php?documentid="+source_id+"&targetid="+target_id;
// document.location = url;
} else if(source_type == 'folder' && source_id != target_id) {
bootbox.dialog(trans.confirm_move_folder, [{
"label" : "<i class='icon-remove'></i> "+trans.move_folder,
"class" : "btn-danger",
"callback": function() {
$.get('../op/op.Ajax.php',
{ command: 'movefolder', folderid: source_id, targetfolderid: target_id, formtoken: formtoken },
function(data) {
if(data.success) {
$('#table-row-folder-'+source_id).hide('slow');
noty({
text: data.message,
type: 'success',
dismissQueue: true,
layout: 'topRight',
theme: 'defaultTheme',
timeout: 1500,
});
} else {
noty({
text: data.message,
type: 'error',
dismissQueue: true,
layout: 'topRight',
theme: 'defaultTheme',
timeout: 3500,
});
}
},
'json'
);
}
}, {
"label" : trans.cancel,
"class" : "btn-cancel",
"callback": function() {
}
}]);
url = "../out/out.MoveFolder.php?folderid="+source_id+"&targetid="+target_id;
// document.location = url;
url = "../out/out.MoveFolder.php?folderid="+source_id+"&targetid="+target_id;
// document.location = url;
}
}
} else if(target_type == 'document') {
var files = e.originalEvent.dataTransfer.files;
if(files.length > 0) {
console.log('Drop '+files.length+' files on '+target_type+' '+target_id);
SeedDMSUpload.handleFileUpload(files,$(e.currentTarget),$(e.currentTarget).find("span"));
} else {
var source_info = JSON.parse(e.originalEvent.dataTransfer.getData("text"));
source_type = source_info.type;
source_id = source_info.id;
formtoken = source_info.formtoken;
console.log('Drop '+source_type+' '+source_id+' on '+target_type+' '+target_id);
if(source_type == 'document') {
bootbox.dialog(trans.confirm_transfer_link_document, [{
"label" : "<i class='icon-remove'></i> "+trans.transfer_content,
"class" : "btn-danger",
"callback": function() {
$.get('../op/op.Ajax.php',
{ command: 'transfercontent', docid: source_id, targetdocumentid: target_id, formtoken: formtoken },
function(data) {
if(data.success) {
$('#table-row-document-'+source_id).hide('slow');
noty({
text: data.message,
type: 'success',
dismissQueue: true,
layout: 'topRight',
theme: 'defaultTheme',
timeout: 1500,
});
} else {
noty({
text: data.message,
type: 'error',
dismissQueue: true,
layout: 'topRight',
theme: 'defaultTheme',
timeout: 3500,
});
}
},
'json'
);
}
}, {
"label" : trans.link_document,
"class" : "btn-danger",
"callback": function() {
$.get('../op/op.Ajax.php',
{ command: 'linkdocument', docid: source_id, targetdocumentid: target_id, formtoken: formtoken },
function(data) {
if(data.success) {
noty({
text: data.message,
type: 'success',
dismissQueue: true,
layout: 'topRight',
theme: 'defaultTheme',
timeout: 1500,
});
} else {
noty({
text: data.message,
type: 'error',
dismissQueue: true,
layout: 'topRight',
theme: 'defaultTheme',
timeout: 3500,
});
}
},
'json'
);
}
}, {
"label" : trans.cancel,
"class" : "btn-cancel",
"callback": function() {
}
}]);
url = "../out/out.MoveDocument.php?documentid="+source_id+"&targetid="+target_id;
// document.location = url;
}
}
}
});
$(document).on('dragstart', '.table-row-folder', function (e) {
@ -816,9 +940,6 @@ $(document).ready(function() { /* {{{ */
formtoken : $(e.target).attr('formtoken')
};
e.originalEvent.dataTransfer.setData("text", JSON.stringify(dragStartInfo));
// e.originalEvent.dataTransfer.setData("id", attr_rel.split("_")[1]);
// e.originalEvent.dataTransfer.setData("type","folder");
// e.originalEvent.dataTransfer.setData("formtoken", $(e.target).attr('formtoken'));
});
$(document).on('dragstart', '.table-row-document', function (e) {
@ -831,9 +952,6 @@ $(document).ready(function() { /* {{{ */
formtoken : $(e.target).attr('formtoken')
};
e.originalEvent.dataTransfer.setData("text", JSON.stringify(dragStartInfo));
// e.originalEvent.dataTransfer.setData("id", attr_rel.split("_")[1]);
// e.originalEvent.dataTransfer.setData("type","document");
// e.originalEvent.dataTransfer.setData("formtoken", $(e.target).attr('formtoken'));
});
/* Dropping item on alert below clipboard */

View File

@ -398,7 +398,7 @@ background-image: linear-gradient(to bottom, #882222, #111111);;
for ($i = 0; $i < count($path); $i++) {
$txtpath .= "<li>";
if ($i +1 < count($path)) {
$txtpath .= "<a href=\"../out/out.ViewFolder.php?folderid=".$path[$i]->getID()."&showtree=".showtree()."\" rel=\"folder_".$path[$i]->getID()."\" class=\"table-row-folder\" formtoken=\"".createFormKey('movefolder')."\">".
$txtpath .= "<a href=\"../out/out.ViewFolder.php?folderid=".$path[$i]->getID()."&showtree=".showtree()."\" data-droptarget=\"folder_".$path[$i]->getID()."\" rel=\"folder_".$path[$i]->getID()."\" class=\"table-row-folder droptarget\" formtoken=\"".createFormKey('movefolder')."\">".
htmlspecialchars($path[$i]->getName())."</a>";
}
else {
@ -1589,7 +1589,7 @@ $(document).ready(function() {
if($path || $expandtree>=$level) {
if($path)
$pathfolder = array_shift($path);
$subfolders = $folder->getSubFolders($orderby[0], $orderdir);
$subfolders = $folder->getSubFolders(isset($orderby[0]) ? $orderby[0] : '', $orderdir);
$subfolders = SeedDMS_Core_DMS::filterAccess($subfolders, $user, $accessmode);
$children = array();
foreach($subfolders as $subfolder) {
@ -1597,7 +1597,7 @@ $(document).ready(function() {
if($expandtree>=$level || $pathfolder->getID() == $subfolder->getID()) {
$node['children'] = jqtree($path, $subfolder, $user, $accessmode, $showdocs, $expandtree, $orderby, $level+1);
if($showdocs) {
$documents = $subfolder->getDocuments($orderby[0], $orderdir);
$documents = $subfolder->getDocuments(isset($orderby[0]) ? $orderby[0] : '', $orderdir);
$documents = SeedDMS_Core_DMS::filterAccess($documents, $user, $accessmode);
foreach($documents as $document) {
$node2 = array('label'=>$document->getName(), 'id'=>$document->getID(), 'load_on_demand'=>false, 'is_folder'=>false);
@ -1609,7 +1609,7 @@ $(document).ready(function() {
}
return $children;
} else {
$subfolders = $folder->getSubFolders($orderby[0], $orderdir);
$subfolders = $folder->getSubFolders(isset($orderby[0]) ? $orderby[0] : '', $orderdir);
$subfolders = SeedDMS_Core_DMS::filterAccess($subfolders, $user, $accessmode);
$children = array();
foreach($subfolders as $subfolder) {
@ -1634,7 +1634,7 @@ $(document).ready(function() {
} else {
$node['children'] = jqtree($path, $folder, $this->params['user'], $accessmode, $showdocs, $expandtree, $orderby, 0);
if($showdocs) {
$documents = $folder->getDocuments($orderby[0], $orderdir);
$documents = $folder->getDocuments(isset($orderby[0]) ? $orderby[0] : '', $orderdir);
$documents = SeedDMS_Core_DMS::filterAccess($documents, $this->params['user'], $accessmode);
foreach($documents as $document) {
$node2 = array('label'=>$document->getName(), 'id'=>$document->getID(), 'load_on_demand'=>false, 'is_folder'=>false);
@ -1675,7 +1675,7 @@ $(function() {
onCreateLi: function(node, $li) {
// Add 'icon' span before title
if(node.is_folder)
$li.find('.jqtree-title').before('<i class="icon-folder-close-alt table-row-folder" rel="folder_' + node.id + '"></i> ').attr('rel', 'folder_' + node.id).attr('formtoken', '<?php echo createFormKey('movefolder'); ?>');
$li.find('.jqtree-title').before('<i class="icon-folder-close-alt table-row-folder droptarget" data-droptarget="folder_' + node.id + '" rel="folder_' + node.id + '"></i> ').attr('rel', 'folder_' + node.id).attr('formtoken', '<?php echo createFormKey('movefolder'); ?>').attr('data-uploadformtoken', '<?php echo createFormKey('adddocument'); ?>');
else
$li.find('.jqtree-title').before('<i class="icon-file"></i> ');
}
@ -2174,6 +2174,15 @@ $(document).ready( function() {
";
} /* }}} */
function documentListRowStart($document) { /* {{{ */
$docID = $document->getID();
return "<tr id=\"table-row-document-".$docID."\" class=\"table-row-document droptarget\" data-droptarget=\"document_".$docID."\" rel=\"document_".$docID."\" formtoken=\"".createFormKey('movedocument')."\" draggable=\"true\">";
} /* }}} */
function documentListRowEnd($document) { /* {{{ */
return "</tr>\n";
} /* }}} */
/**
* Return HTML of a single row in the document list table
*
@ -2197,7 +2206,7 @@ $(document).ready( function() {
$docID = $document->getID();
if(!$skipcont)
$content .= "<tr id=\"table-row-document-".$docID."\" class=\"table-row-document\" rel=\"document_".$docID."\" formtoken=\"".createFormKey('movedocument')."\" draggable=\"true\">";
$content .= $this->documentListRowStart($document);
if($version) {
$latestContent = $this->callHook('documentContent', $document, $version);
@ -2303,10 +2312,18 @@ $(document).ready( function() {
$content .= "</td>";
}
if(!$skipcont)
$content .= "</tr>\n";
$content .= $this->documentListRowEnd($document);
return $content;
} /* }}} */
function folderListRowStart($folder) { /* {{{ */
return "<tr id=\"table-row-folder-".$folder->getID()."\" draggable=\"true\" data-droptarget=\"folder_".$folder->getID()."\" rel=\"folder_".$folder->getID()."\" class=\"folder table-row-folder droptarget\" data-uploadformtoken=\"".createFormKey('adddocument')."\" formtoken=\"".createFormKey('movefolder')."\">";
} /* }}} */
function folderListRowEnd($folder) { /* {{{ */
return "</tr>\n";
} /* }}} */
function folderListRow($subFolder, $extracontent=array()) { /* {{{ */
$dms = $this->params['dms'];
$user = $this->params['user'];
@ -2321,9 +2338,9 @@ $(document).ready( function() {
if (strlen($comment) > 150) $comment = substr($comment, 0, 147) . "...";
$content = '';
$content .= "<tr id=\"table-row-folder-".$subFolder->getID()."\" draggable=\"true\" rel=\"folder_".$subFolder->getID()."\" class=\"folder table-row-folder\" formtoken=\"".createFormKey('movefolder')."\">";
$content .= "<td><a _rel=\"folder_".$subFolder->getID()."\" draggable=\"false\" href=\"../out/out.ViewFolder.php?folderid=".$subFolder->getID()."&showtree=".$showtree."\"><img draggable=\"false\" src=\"".$this->getMimeIcon(".folder")."\" width=\"24\" height=\"24\" border=0></a></td>\n";
$content .= "<td><a draggable=\"false\" _rel=\"folder_".$subFolder->getID()."\" href=\"../out/out.ViewFolder.php?folderid=".$subFolder->getID()."&showtree=".$showtree."\">" . htmlspecialchars($subFolder->getName()) . "</a>";
$content .= $this->folderListRowStart($subFolder);
$content .= "<td><a draggable=\"false\" href=\"../out/out.ViewFolder.php?folderid=".$subFolder->getID()."&showtree=".$showtree."\"><img draggable=\"false\" src=\"".$this->getMimeIcon(".folder")."\" width=\"24\" height=\"24\" border=0></a></td>\n";
$content .= "<td><a draggable=\"false\" href=\"../out/out.ViewFolder.php?folderid=".$subFolder->getID()."&showtree=".$showtree."\">" . htmlspecialchars($subFolder->getName()) . "</a>";
$content .= "<br /><span style=\"font-size: 85%; font-style: italic; color: #666;\">".getMLText('owner').": <b>".htmlspecialchars($owner->getFullName())."</b>, ".getMLText('creation_date').": <b>".date('Y-m-d', $subFolder->getDate())."</b></span>";
if($comment) {
$content .= "<br /><span style=\"font-size: 85%;\">".htmlspecialchars($comment)."</span>";
@ -2378,7 +2395,7 @@ $(document).ready( function() {
}
$content .= "</div>";
$content .= "</td>";
$content .= "</tr>\n";
$content .= $this->folderListRowEnd($subFolder);
return $content;
} /* }}} */

View File

@ -103,7 +103,8 @@ class SeedDMS_View_Clipboard extends SeedDMS_Bootstrap_Style {
$content = '';
$comment = $folder->getComment();
if (strlen($comment) > 150) $comment = substr($comment, 0, 147) . "...";
$content .= "<tr draggable=\"true\" rel=\"folder_".$folder->getID()."\" class=\"folder table-row-folder\" formtoken=\"".createFormKey('movefolder')."\">";
// $content .= "<tr draggable=\"true\" rel=\"folder_".$folder->getID()."\" class=\"folder table-row-folder\" formtoken=\"".createFormKey('movefolder')."\">";
$content .= $this->folderListRowStart($folder);
$content .= "<td><a draggable=\"false\" href=\"out.ViewFolder.php?folderid=".$folder->getID()."&showtree=".showtree()."\"><img draggable=\"false\" src=\"".$this->getMimeIcon(".folder")."\" width=\"24\" height=\"24\" border=0></a></td>\n";
$content .= "<td><a draggable=\"false\" href=\"out.ViewFolder.php?folderid=".$folder->getID()."&showtree=".showtree()."\">" . htmlspecialchars($folder->getName()) . "</a>";
if($comment) {
@ -138,7 +139,7 @@ class SeedDMS_View_Clipboard extends SeedDMS_Bootstrap_Style {
$version = $latestContent->getVersion();
$status = $latestContent->getStatus();
$content .= "<tr draggable=\"true\" rel=\"document_".$document->getID()."\" class=\"table-row-document\" formtoken=\"".createFormKey('movedocument')."\">";
$content .= $this->documentListRowStart($document);
if (file_exists($dms->contentDir . $latestContent->getPath())) {
$content .= "<td><a draggable=\"false\" href=\"../op/op.Download.php?documentid=".$document->getID()."&version=".$version."\">";

View File

@ -55,7 +55,7 @@ class SeedDMS_View_Search extends SeedDMS_Bootstrap_Style {
function js() { /* {{{ */
header('Content-Type: application/javascript; charset=UTF-8');
parent::jsTranslations(array('cancel', 'splash_move_document', 'confirm_move_document', 'move_document', 'splash_move_folder', 'confirm_move_folder', 'move_folder'));
parent::jsTranslations(array('cancel', 'splash_move_document', 'confirm_move_document', 'move_document', 'confirm_transfer_link_document', 'transfer_content', 'link_document', 'splash_move_folder', 'confirm_move_folder', 'move_folder'));
$this->printFolderChooserJs("form1");
$this->printDeleteFolderButtonJs();

View File

@ -94,7 +94,7 @@ class SeedDMS_View_ViewFolder extends SeedDMS_Bootstrap_Style {
$showtree = $this->params['showtree'];
header('Content-Type: application/javascript; charset=UTF-8');
parent::jsTranslations(array('cancel', 'splash_move_document', 'confirm_move_document', 'move_document', 'splash_move_folder', 'confirm_move_folder', 'move_folder'));
parent::jsTranslations(array('cancel', 'splash_move_document', 'confirm_move_document', 'move_document', 'confirm_transfer_link_document', 'transfer_content', 'link_document', 'splash_move_folder', 'confirm_move_folder', 'move_folder'));
?>
function folderSelected(id, name) {
window.location = '../out/out.ViewFolder.php?folderid=' + id;
@ -390,7 +390,7 @@ $('#loadmore').click(function(e) {
// $this->addFooterJS("SeedDMSUpload.setMaxFileSize(".SeedDMS_Core_File::parse_filesize(ini_get("upload_max_filesize")).");");
// $this->addFooterJS("SeedDMSUpload.setMaxFileSizeMsg('".getMLText("uploading_maxsize")."');");
?>
<div id="dragandrophandler" class="well alert" data-target="<?php echo $folder->getID(); ?>" data-formtoken="<?php echo createFormKey('adddocument'); ?>"><?php printMLText('drop_files_here'); ?></div>
<div id="dragandrophandler" class="well alert" data-droptarget="folder_<?php echo $folder->getID(); ?>" data-target="<?php echo $folder->getID(); ?>" data-uploadformtoken="<?php echo createFormKey('adddocument'); ?>"><?php printMLText('drop_files_here'); ?></div>
<?php
echo "</div>";
echo "</div>";