File upload with drag and drop

[dj]

put this html5 file in your upload-folder

[r2fi]

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!

[bmartino1]

thank you for this info, it will com in handy if i ever want to start in that direction! Good job

[DSGJ]

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

[MelkiyProd.]

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.

[dj]

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)

[mole]

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:

[Fysack]

hehe it so goood to see that this world is still alive   

[casey]

Oh Man! You are TOO TOO good ! Thanks to share! Hope this will be fully integrate to futur version of HFS ! 

[Fysack]

im so agree casey

[giggy]

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?

[bmartino1]

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....)

[giggy]

I thank you.

[dj]

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

[Chris Harris]

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