rejetto forum

File upload with drag and drop

dj · 17 · 30014

0 Members and 1 Guest are viewing this topic.

Offline dj

  • Tireless poster
  • ****
    • Posts: 291
  • 👣 🐾
    • View Profile
    • PWAs
put this html5 file in your upload-folder


« Last Edit: February 11, 2014, 02:17:44 PM by dj »


Offline r2fi

  • Occasional poster
  • *
    • Posts: 3
    • View Profile
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! ;)


Offline bmartino1

  • Tireless poster
  • ****
    • Posts: 911
  • I'm only trying to help i mean no offense.
    • View Profile
    • My HFS Google Drive Shared Link
thank you for this info, it will com in handy if i ever want to start in that direction! Good job
Files I have snagged and share can be found on my google drive:

https://drive.google.com/drive/folders/1qb4INX2pzsjmMT06YEIQk9Nv5jMu33tC?usp=sharing


DSGJ

  • Guest
I really needed this for my remake/updated version of the LIVE template.
So many thanks for making this!


Offline MelkiyProd.

  • Occasional poster
  • *
    • Posts: 70
  • Languages: English, Русский, Українська.
    • View Profile
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.
« Last Edit: January 08, 2015, 03:20:58 PM by MelkiyProd. »


Offline dj

  • Tireless poster
  • ****
    • Posts: 291
  • 👣 🐾
    • View Profile
    • PWAs
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)
« Last Edit: January 29, 2015, 09:38:53 AM by dj »


Offline mole

  • Occasional poster
  • *
    • Posts: 2
    • View Profile
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:
« Last Edit: March 25, 2015, 09:57:14 PM by mole »


Offline Fysack

  • Tireless poster
  • ****
    • Posts: 598
  • present picture
    • View Profile
    • Admin
hehe it so goood to see that this world is still alive  :-*  :-* :'(
GOD CAN READ YOUR MIND


Offline casey

  • Occasional poster
  • *
    • Posts: 7
    • View Profile
Oh Man! You are TOO TOO good ! Thanks to share! Hope this will be fully integrate to futur version of HFS !  ;)


Offline Fysack

  • Tireless poster
  • ****
    • Posts: 598
  • present picture
    • View Profile
    • Admin

Offline giggy

  • Occasional poster
  • *
    • Posts: 26
    • View Profile
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?


Offline bmartino1

  • Tireless poster
  • ****
    • Posts: 911
  • I'm only trying to help i mean no offense.
    • View Profile
    • My HFS Google Drive Shared Link
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....)
Files I have snagged and share can be found on my google drive:

https://drive.google.com/drive/folders/1qb4INX2pzsjmMT06YEIQk9Nv5jMu33tC?usp=sharing



Offline dj

  • Tireless poster
  • ****
    • Posts: 291
  • 👣 🐾
    • View Profile
    • PWAs
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
« Last Edit: April 07, 2016, 03:04:50 PM by dj »


Offline Chris Harris

  • Occasional poster
  • *
    • Posts: 38
    • View Profile
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