Author Topic: File upload with drag and drop  (Read 15443 times)

0 Members and 1 Guest are viewing this topic.

Offline Mars

  • Operator
  • Tireless poster
  • *****
  • Posts: 1863
    • View Profile
Re: File upload with drag and drop
« Reply #15 on: June 06, 2016, 12:41:22 PM »
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)
Quote
[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

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

Offline Fysack

  • Tireless poster
  • ****
  • Posts: 605
  • present picture
    • View Profile
    • Admin
Re: File upload with drag and drop
« Reply #16 on: September 30, 2016, 10:39:46 PM »
Mars 06 06 16 its its its, yea no words..
GOD CAN READ YOUR MIND