the attached scripts are from another author, do not ask me to explain them
I just modified the model by default to include a drag and drop to surcharge traditional upload, the only constraint is that it is not possible to obtain a final report download, and it is necessary to reload the web page to refresh the file list
Procedure of establishment
Create a real folder named "scripts" and add it to VFS root, select it, go to his properties (ALT+ENTER), select flags tab, unckeck 'browsable' and check the two previous 'hidden', then click on 'OK'
then you have to extract the 3 files from the archive to the "scripts" folder on your disk,
you can use the joined tpl
or modify yours as follows
update this section with the blue line ( if you do not want the old version, remove red lines)
[box upload]
{.if| {.get|can upload.} |{:
<fieldset id='upload'>
<legend><img src="/~img32"> {.!Upload.}</legend>
{.$box dragdrop.}
<form action="." method='post' enctype="multipart/form-data" style='text-align:right;'>
<input type='file' name='file' multiple style='display:block;' />
<input type='submit' value='{.!Upload.}' style='margin-top:0.5em;' />
</form>
</fieldset>
:}.}
at the end of the template, add this section
[box dragdrop]
<form class="upload" action="." method="POST" enctype="multipart/form-data">
<input type="file" name="file" multiple>
<button>Upload</button>
<div>Drag and Drop files</div>
</form>
<hr>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" id="theme">
<link rel="stylesheet" href="/scripts/jquery.fileupload-ui.css">
<table class="upload_files"></table>
<table class="download_files"></table>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
<script src="/scripts/jquery.fileupload.js"></script>
<script src="/scripts/jquery.fileupload-ui.js"></script>
<script>
/*global $ */
$(function () {
$('.upload').fileUploadUI({
uploadTable: $('.upload_files'),
downloadTable: $('.download_files'),
buildUploadRow: function (files, index) {
var file = files[index];
return $(
'<tr style="display:none">' +
'<td>' + file.name + '<\/td>' +
'<td class="file_upload_progress"><div><\/div><\/td>' +
'<td class="file_upload_cancel">' +
'<div class="ui-state-default ui-corner-all ui-state-hover" title="Cancel">' +
'<span class="ui-icon ui-icon-cancel"><\/span>' +
'<\/div>' +
'<\/td>' +
'<\/tr>'
);
},
buildDownloadRow: function (file) {
return $(
'<tr style="display:none"><td>' + file.name + '<\/td><\/tr>'
);
},
initCallBack: function (files, index, xhr, callBack, nodes) {
callBack({
formData: function () {
return [{name: 'name1', value: 'value1'}, {name: 'name2', value: 'value2'}];
}
});
},
load: function(event, files, index, xhr, settings) {
if (settings.uploadRow) {
settings.uploadRow.fadeOut(function () {
$(this).remove();
});
}
var json, downloadRow;
try {
if (xhr) {
json = $.parseJSON(xhr.responseText);
} else {
json = $.parseJSON($(event.target).contents().text());
}
} catch (e) {
settings.originalEvent = event;
this.error(e, files, index, xhr, settings);
}
if (json) {
downloadRow = uploadHandler.buildDownloadRow(json);
if (downloadRow) {
downloadRow.appendTo(uploadHandler.downloadTable).fadeIn();
}
}
},
error: function(event, files, index, xhr, settings) {
/* Your error handling code */
}
});
});
</script>
I would just remind you that it is possible to drag & drop files directly on the BROWSE button in the default template and then click on the UPLOAD button to valid uploads
I almost forgot to mention that I used the attached dragdrop.tpl file to update the default template whose content has been modified to use the path /scripts/.....
if you intend to use dragdrop.tpl in the state, it is necessary that the contents of the archive to be placed in the same folder as the TPL