diff options
| -rw-r--r-- | Zotlabs/Storage/Browser.php | 3 | ||||
| -rw-r--r-- | view/js/mod_cloud.js | 98 | ||||
| -rw-r--r-- | view/theme/redbasic/css/style.css | 23 | ||||
| -rw-r--r-- | view/tpl/cloud_actionspanel.tpl | 213 |
4 files changed, 142 insertions, 195 deletions
diff --git a/Zotlabs/Storage/Browser.php b/Zotlabs/Storage/Browser.php index 713d75108..e719530b5 100644 --- a/Zotlabs/Storage/Browser.php +++ b/Zotlabs/Storage/Browser.php @@ -306,7 +306,8 @@ class Browser extends DAV\Browser\Plugin { '$folder_submit' => t('Create'), '$upload_header' => t('Upload file'), '$upload_submit' => t('Upload'), - '$quota' => $quota + '$quota' => $quota, + '$dragdroptext' => t('Drop files here to immediately upload') )); } diff --git a/view/js/mod_cloud.js b/view/js/mod_cloud.js new file mode 100644 index 000000000..71e916446 --- /dev/null +++ b/view/js/mod_cloud.js @@ -0,0 +1,98 @@ +/** + * JavaScript for mod/cloud + */ + +$(document).ready(function () { + // call initialization file + if (window.File && window.FileList && window.FileReader) { + DragDropUploadInit(); + } +}); + +// +// initialize +function DragDropUploadInit() { + + var fileselect = $("#fileselect"), + filedrag = $("#filedrag"); + + // file select + fileselect.on("change", DragDropUploadFileSelectHandler); + + // is XHR2 available? + var xhr = new XMLHttpRequest(); + if (xhr.upload) { + + // file drop + filedrag.on("dragover", DragDropUploadFileHover); + filedrag.on("dragleave", DragDropUploadFileHover); + filedrag.on("drop", DragDropUploadFileSelectHandler); + filedrag.show(); + + } + + window.filesToUpload = 0; + window.fileUploadsCompleted = 0; + + +} + +// file drag hover +function DragDropUploadFileHover(e) { + e.stopPropagation(); + e.preventDefault(); + e.target.className = (e.type == "dragover" ? "hover" : ""); +} + +// file selection +function DragDropUploadFileSelectHandler(e) { + + // cancel event and hover styling + DragDropUploadFileHover(e); + + // fetch FileList object + var files = e.target.files || e.originalEvent.dataTransfer.files; + $("#file-upload-list").empty(); + // process all File objects + for (var i = 0, f; f = files[i]; i++) { + $("#file-upload-list").append( + "<p>" + "<span id='upload-progress-" + i + "'></span> -> File: <strong>" + f.name + + "</strong> type: <strong>" + f.type + + "</strong> size: <strong>" + f.size + + "</strong> bytes</p>" + ); + DragDropUploadFile(f, i); + } + +} + +// upload files +function DragDropUploadFile(file, idx) { + + window.filesToUpload = window.filesToUpload + 1; + + var xhr = new XMLHttpRequest(); + xhr.withCredentials = true; // Include the SESSION cookie info for authentication + (xhr.upload || xhr).addEventListener('progress', function (e) { + var done = e.position || e.loaded; + var total = e.totalSize || e.total; + // Dynamically update the percentage complete displayed in the file upload list + $('#upload-progress-' + idx).html(Math.round(done / total * 100) + '%'); + }); + xhr.addEventListener('load', function (e) { + //console.log('xhr upload complete', e); + window.fileUploadsCompleted = window.fileUploadsCompleted + 1; + // When all the uploads have completed, refresh the page + if (window.filesToUpload > 0 && window.fileUploadsCompleted === window.filesToUpload) { + window.fileUploadsCompleted = window.filesToUpload = 0; + // After uploads complete, refresh browser window to display new files + window.location.href = window.location.href; + } + }); + // POST to the entire cloud path + xhr.open('post', window.location.pathname, true); + + var data = new FormData(document.getElementById("ajax-upload-files")); + data.append('file', file); + xhr.send(data); +} diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css index 6cc3e2f10..6fde5e39e 100644 --- a/view/theme/redbasic/css/style.css +++ b/view/theme/redbasic/css/style.css @@ -2040,4 +2040,25 @@ dl.bb-dl > dd > li { #wiki-preview img { max-width: 100%; -}
\ No newline at end of file +} + +#filedrag +{ + display: none; + font-weight: bold; + text-align: center; + padding: 1em 0; + margin: 1em 0; + color: #555; + border: 2px dashed #555; + border-radius: 7px; + cursor: default; +} + +#filedrag.hover +{ + color: #f00; + border-color: #f00; + border-style: solid; + box-shadow: inset 0 3px 4px #888; +} diff --git a/view/tpl/cloud_actionspanel.tpl b/view/tpl/cloud_actionspanel.tpl index 86fda883c..fba457fdc 100644 --- a/view/tpl/cloud_actionspanel.tpl +++ b/view/tpl/cloud_actionspanel.tpl @@ -1,199 +1,26 @@ <div id="files-mkdir-tools" class="section-content-tools-wrapper"> - <label for="files-mkdir">{{$folder_header}}</label> - <form method="post" action=""> - <input type="hidden" name="sabreAction" value="mkcol"> - <input id="files-mkdir" type="text" name="name" class="form-control form-group"> - <button class="btn btn-primary btn-sm pull-right" type="submit" value="{{$folder_submit}}">{{$folder_submit}}</button> - </form> - <div class="clear"></div> + <label for="files-mkdir">{{$folder_header}}</label> + <form method="post" action=""> + <input type="hidden" name="sabreAction" value="mkcol"> + <input id="files-mkdir" type="text" name="name" class="form-control form-group"> + <button class="btn btn-primary btn-sm pull-right" type="submit" value="{{$folder_submit}}">{{$folder_submit}}</button> + </form> + <div class="clear"></div> </div> <div id="files-upload-tools" class="section-content-tools-wrapper"> - {{if $quota.limit || $quota.used}}<div class="{{if $quota.warning}}section-content-danger-wrapper{{else}}section-content-info-wrapper{{/if}}">{{if $quota.warning}}<strong>{{$quota.warning}} </strong>{{/if}}{{$quota.desc}}</div>{{/if}} - <!-- - <label for="files-upload">{{$upload_header}}</label> - <form method="post" action="" enctype="multipart/form-data"> - <input type="hidden" name="sabreAction" value="put"> - <input class="form-group" id="files-upload" type="file" name="file"> - <button class="btn btn-primary btn-sm pull-right" type="submit" value="{{$upload_submit}}">{{$upload_submit}}</button> - </form> - <div class="clear"></div> - --> - <form id="ajax-upload-files" action="" method="POST" enctype="multipart/form-data"> - <input type="hidden" name="sabreAction" value="put"> - - <fieldset> - - <input type="hidden" name="sabreAction" value="put"> - <div> - <label for="fileselect">Files to upload:</label> -<!-- <input type="file" id="fileselect" name="fileselect[]" multiple="multiple" />--> -<!-- <input type="file" id="fileselect" name="fileselect[]" />--> - <div id="filedrag">or drop files here</div> - </div> - - <div id="submitbutton"> - <button type="submit">Upload Files</button> - </div> - - </fieldset> - <div id="file-upload-list"></div> - - <div id="profile-rotator-wrapper"> - <div id="profile-rotator"></div> + {{if $quota.limit || $quota.used}}<div class="{{if $quota.warning}}section-content-danger-wrapper{{else}}section-content-info-wrapper{{/if}}">{{if $quota.warning}}<strong>{{$quota.warning}} </strong>{{/if}}{{$quota.desc}}</div>{{/if}} + <form id="ajax-upload-files" method="post" action="" enctype="multipart/form-data"> + <input type="hidden" name="sabreAction" value="put"> + <div> + <div id="filedrag" style="height: 7em;"><br>{{$dragdroptext}}</div> </div> - </form> + <div id="file-upload-list"></div> + <div class="clear"></div> + <label for="files-upload">{{$upload_header}}</label> <div class="clear"></div> + <input class="form-group pull-left" id="files-upload" type="file" name="file" style="width: 70%;"> + <button class="btn btn-primary btn-sm pull-right" type="submit" value="{{$upload_submit}}">{{$upload_submit}}</button> + </form> + <div class="clear"></div> + <hr/> </div> - -<style> - - #filedrag - { - display: none; - font-weight: bold; - text-align: center; - padding: 1em 0; - margin: 1em 0; - color: #555; - border: 2px dashed #555; - border-radius: 7px; - cursor: default; - } - - #filedrag.hover - { - color: #f00; - border-color: #f00; - border-style: solid; - box-shadow: inset 0 3px 4px #888; - } - -</style> - -<script> -$(document).ready(function() { -// -// try { -// var file_uploader = new window.AjaxUpload('submitbutton', -// { action: 'cloud', -// name: 'userfile', -// title: 'Upload', -// onSubmit: function(file,ext) { $('#profile-rotator').spin('tiny'); }, -// onComplete: function(file,response) { -// $("#file-upload-list").append("Upload complete!"); -// $('#profile-rotator').spin(false); -// } -// }); -// } catch(e) { -// } - // call initialization file - if (window.File && window.FileList && window.FileReader) { - DragDropUploadInit(); - } -}); - -// -// initialize -function DragDropUploadInit() { - - var fileselect = $("#fileselect"), - filedrag = $("#filedrag"), - submitbutton = $("#submitbutton"); - - // file select - fileselect.on("change", FileSelectHandler); - - // is XHR2 available? - var xhr = new XMLHttpRequest(); - if (xhr.upload) { - - // file drop - filedrag.on("dragover", FileDragHover); - filedrag.on("dragleave", FileDragHover); - filedrag.on("drop", FileSelectHandler); - filedrag.show(); - - // remove submit button - submitbutton.hide(); - } - - -} - -// file drag hover -function FileDragHover(e) { - e.stopPropagation(); - e.preventDefault(); - e.target.className = (e.type == "dragover" ? "hover" : ""); -} - -// file selection -function FileSelectHandler(e) { - - // cancel event and hover styling - FileDragHover(e); - - // fetch FileList object - var files = e.target.files || e.originalEvent.dataTransfer.files; - $("#file-upload-list").empty(); - // process all File objects - for (var i = 0, f; f = files[i]; i++) { - $("#file-upload-list").append( - "<p>File information: <strong>" + f.name + - "</strong> type: <strong>" + f.type + - "</strong> size: <strong>" + f.size + - "</strong> bytes</p>" - ); - DragDropUploadFile(f); - } - -} - -// upload files -function DragDropUploadFile(file) { - - // Serialize the data in the form - //var serializedData = $('#ajax-upload-files').serialize(); -// -// $.ajax({ -// type: "POST", -// url: '', -// data: serializedData, -// success: function(result){ -// //window.console.log(result); -// return false; -// } -// }); -// - - var xhr = new XMLHttpRequest(); - xhr.withCredentials = true; - (xhr.upload || xhr).addEventListener('progress', function(e) { - var done = e.position || e.loaded - var total = e.totalSize || e.total; - console.log('xhr progress: ' + Math.round(done/total*100) + '%'); - }); - xhr.addEventListener('load', function(e) { - //console.log('xhr upload complete', e, this.responseText); - console.log('xhr upload complete', e); - }); - xhr.open('post', 'cloud', true); - - var data = new FormData(document.getElementById("ajax-upload-files")); - data.append('file', file); - xhr.send(data); -// -// var xhr = new XMLHttpRequest(); -// if (xhr.upload) { -// // start upload -// window.console.log("Uploading..."); -// xhr.open("POST", $("#ajax-upload-files").action, true); -// xhr.setRequestHeader("X_FILENAME", file.name); -// xhr.send(file); -// -// } - -} - - -</script>
\ No newline at end of file |