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

0 Members and 1 Guest are viewing this topic.

Offline dj

  • Experienced poster
  • ***
  • Posts: 60
    • View Profile
File upload with drag and drop
« on: January 28, 2014, 10:58:20 AM »
put this html5 file in your upload-folder


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

Follow members gave a thank to your post:


Offline r2fi

  • Occasional poster
  • *
  • Posts: 3
    • View Profile
Re: File upload with drag and drop
« Reply #1 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! ;)

Offline bmartino1

  • Insane poster
  • *****
  • Posts: 777
  • I'm only trying to help i mean no offense.
    • View Profile
    • none - google translate
Re: File upload with drag and drop
« Reply #2 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
I'm only trying to help i mean no offense.
thank you for your time and patience,
Bmartino1

DSGJ

  • Guest
Re: File upload with drag and drop
« Reply #3 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!

Offline MelkiyProd.

  • Experienced poster
  • ***
  • Posts: 69
  • Languages: English, Русский, Українська.
    • View Profile
Re: File upload with drag and drop
« Reply #4 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.
« Last Edit: January 08, 2015, 03:20:58 PM by MelkiyProd. »

Offline dj

  • Experienced poster
  • ***
  • Posts: 60
    • View Profile
Re: File upload with drag and drop
« Reply #5 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)
« Last Edit: January 29, 2015, 09:38:53 AM by dj »

Follow members gave a thank to your post:


Offline mole

  • Occasional poster
  • *
  • Posts: 2
    • View Profile
Re: File upload with drag and drop
« Reply #6 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:
« Last Edit: March 25, 2015, 09:57:14 PM by mole »

Follow members gave a thank to your post:


Offline Fysack

  • Insane poster
  • *****
  • Posts: 590
  • present picture
    • View Profile
    • Admin
Re: File upload with drag and drop
« Reply #7 on: January 31, 2015, 12:47:46 AM »
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
Re: File upload with drag and drop
« Reply #8 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 !  ;)

Offline Fysack

  • Insane poster
  • *****
  • Posts: 590
  • present picture
    • View Profile
    • Admin
Re: File upload with drag and drop
« Reply #9 on: May 08, 2015, 10:27:54 PM »
im so agree casey
GOD CAN READ YOUR MIND

Offline giggy

  • Regular poster
  • **
  • Posts: 23
    • View Profile
Re: File upload with drag and drop
« Reply #10 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?

Offline bmartino1

  • Insane poster
  • *****
  • Posts: 777
  • I'm only trying to help i mean no offense.
    • View Profile
    • none - google translate
Re: File upload with drag and drop
« Reply #11 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....)
I'm only trying to help i mean no offense.
thank you for your time and patience,
Bmartino1

Follow members gave a thank to your post:


Offline giggy

  • Regular poster
  • **
  • Posts: 23
    • View Profile
Re: File upload with drag and drop
« Reply #12 on: November 07, 2015, 12:36:53 PM »
I thank you.

Offline dj

  • Experienced poster
  • ***
  • Posts: 60
    • View Profile
File upload with drag and drop - now generates image thumbnails
« Reply #13 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
« Last Edit: April 07, 2016, 03:04:50 PM by dj »

Follow members gave a thank to your post:


Offline Chris Harris

  • Regular poster
  • **
  • Posts: 21
    • View Profile
Re: File upload with drag and drop
« Reply #14 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