rejetto forum

Software => HFS ~ HTTP File Server => HTML & templates => Topic started by: dj on January 28, 2014, 10:58:20 AM

Title: File upload with drag and drop
Post by: dj on January 28, 2014, 10:58:20 AM
put this html5 file in your upload-folder

(http://home.arcor.de/Juergen.Dorsch/drag.jpg)
Title: Re: File upload with drag and drop
Post by: r2fi on February 07, 2014, 06:13:00 PM
Very useful and cool. Thank you for sharing. I just finished implementing it into my reversed version of Terayon and it works like a charm.

Great job! ;)
Title: Re: File upload with drag and drop
Post by: bmartino1 on February 14, 2014, 04:49:21 PM
thank you for this info, it will com in handy if i ever want to start in that direction! Good job
Title: Re: File upload with drag and drop
Post by: DSGJ on December 23, 2014, 04:03:08 PM
I really needed this for my remake/updated version of the LIVE template.
So many thanks for making this!
Title: Re: File upload with drag and drop
Post by: MelkiyProd. on January 08, 2015, 02:58:13 PM
Nice, but I have same questions. How to tie it with confirmation button upload? And russian characters aren't supported, how to fix it? And else - Need to show - my [upload-results], not to "Alert" list. Thank you.
Title: Re: File upload with drag and drop
Post by: dj on January 13, 2015, 07:17:44 AM
with confirmation button

Tip: in chrome you can drag a file to the standard HFS Upload form and in FF you can even drag multiple files

added table (thanks mole)
Title: Re: File upload with drag and drop
Post by: mole on January 28, 2015, 10:41:20 PM
find:
Code: [Select]
xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    //alert(file.name+" ok"); // handle response.  //xhr.responseText
                    var txt = document.createElement("div");
                    txt.innerHTML = "<a href='"+file.name+"'>"+file.name+"</a> ok "+file.size/1000+"kB"
                    document.querySelector('body').appendChild(txt);
                   
                }
            };
replace with:
Code: [Select]
      xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                //alert(file.name+" ok"); // handle response.  //xhr.responseText
                var txt = document.createElement("tr");
                txt.innerHTML = "<td><a href='" + file.name + "'>" + file.name + "</a></td><td>" + Math.ceil((file.size / 1000) * 100) / 100 + " KB</td><td> OK </td>"
                document.querySelector('tbody').appendChild(txt);

            }
        };
result:
Title: Re: File upload with drag and drop
Post by: Fysack on January 31, 2015, 12:47:46 AM
hehe it so goood to see that this world is still alive  :-*  :-* :'(
Title: Re: File upload with drag and drop
Post by: casey on February 12, 2015, 05:39:10 AM
Oh Man! You are TOO TOO good ! Thanks to share! Hope this will be fully integrate to futur version of HFS !  ;)
Title: Re: File upload with drag and drop
Post by: Fysack on May 08, 2015, 10:27:54 PM
im so agree casey
Title: Re: File upload with drag and drop
Post by: giggy on November 03, 2015, 01:52:15 AM
I really needed this drag and drop feature but how can I do that?

I am sorry but I do not understand what you mean by "put it in upload-folder."
Where do I exactly put it in?
Title: Re: File upload with drag and drop
Post by: bmartino1 on November 04, 2015, 02:37:33 AM
Hello giggy,

To clarify, depending on what you click to download, it depends on how you want it setup

for this example i will use the uploads_thums.zip
download link:
http://www.rejetto.com/forum/html-templates/file-upload-with-drag-and-drop/?action=dlattach;attach=7042

i like to localiz hfs for easier premision and control, i will therefore ausem you ahve HFS at locations described lattter
I asume you will have this as a min base line:
C:\HFS\hfs.exe
C:\HFS\Upload
C:\HFS\upload_thumb.zip

extract the html doc form the zip and place it into the Upload folder
C:\HFS\Upload\upload_thumb.htm

Open HFS
Add upload folder to HFS
Click OK to anyone for access (or define you user accounts for protection at this time....)
add the file under the folder for easy access latter...
See picture

go to that htm file:
http://localhost/upload/upload_thumb.htm

drag and drop, file should be upladed to the root folder
C:\HFS\Upload\ ( *.* - the file you uploaded....)
Title: Re: File upload with drag and drop
Post by: giggy on November 07, 2015, 12:36:53 PM
I thank you.
Title: File upload with drag and drop - now generates image thumbnails
Post by: dj on January 18, 2016, 06:28:05 PM
now generates image thumbnails
slideshow

add file, template and folder to your upload-folder

V2 generates also video thumbnails (from first frame)
V2.2 limit by size, RSS, show duration (?com)
V2.3 mobil-friendly, mark favorite ★
mobil-light.tpl with build-in picture(and audio)viewer, swipe
Title: Re: File upload with drag and drop
Post by: Chris Harris on June 06, 2016, 08:08:08 AM
I added hfs.diff.tpl and then selected this template. I then get a blank screen??

When switch to another template all works again.

I have done something wrong!!
Chris
Title: Re: File upload with drag and drop
Post by: Mars 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
Title: Re: File upload with drag and drop
Post by: Fysack on September 30, 2016, 10:39:46 PM
Mars 06 06 16 its its its, yea no words..