rejetto forum

File upload with drag and drop

dj · 17 · 25065

0 Members and 1 Guest are viewing this topic.

Offline Mars

  • Operator
  • Tireless poster
  • *****
    • Posts: 2057
    • View Profile
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;' />


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>
         <div>Drag and Drop files</div>

<link rel="stylesheet" href="" id="theme">
<link rel="stylesheet" href="/scripts/jquery.fileupload-ui.css">
<table class="upload_files"></table>
<table class="download_files"></table>
<script src=""></script>
<script src=""></script>
<script src="/scripts/jquery.fileupload.js"></script>
<script src="/scripts/jquery.fileupload-ui.js"></script>
/*global $ */
$(function () {
        uploadTable: $('.upload_files'),
        downloadTable: $('.download_files'),
        buildUploadRow: function (files, index) {
            var file = files[index];
            return $(
                '<tr style="display:none">' +
                '<td>' + + '<\/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>' +
        buildDownloadRow: function (file) {
            return $(
                '<tr style="display:none"><td>' + + '<\/td><\/tr>'
      initCallBack: function (files, index, xhr, callBack, nodes) {
            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 () {
         var json, downloadRow;
         try {
            if (xhr) {
               json = $.parseJSON(xhr.responseText);
            } else {
               json = $.parseJSON($(;
         } catch (e) {
            settings.originalEvent = event;
            this.error(e, files, index, xhr, settings);
         if (json) {
            downloadRow = uploadHandler.buildDownloadRow(json);
            if (downloadRow) {
      error: function(event, files, index, xhr, settings) {
        /* Your error handling code */

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
« Last Edit: June 06, 2016, 01:14:50 PM by Mars »

Offline Fysack

  • Tireless poster
  • ****
    • Posts: 644
  • present picture
    • View Profile
    • Admin
Mars 06 06 16 its its its, yea no words..