rejetto forum
Software => HFS ~ HTTP File Server => HTML & templates => Topic started 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)
-
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! ;)
-
thank you for this info, it will com in handy if i ever want to start in that direction! Good job
-
I really needed this for my remake/updated version of the LIVE template.
So many thanks for making this!
-
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.
-
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)
-
find:
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:
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:
-
hehe it so goood to see that this world is still alive :-* :-* :'(
-
Oh Man! You are TOO TOO good ! Thanks to share! Hope this will be fully integrate to futur version of HFS ! ;)
-
im so agree casey
-
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?
-
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 thank you.
-
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
-
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
-
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)
[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
[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
-
Mars 06 06 16 its its its, yea no words..