diff options
Diffstat (limited to 'view/tpl')
| -rw-r--r-- | view/tpl/cloud_actionspanel.tpl | 32 | ||||
| -rw-r--r-- | view/tpl/cloud_directory.tpl | 4 | ||||
| -rwxr-xr-x | view/tpl/jot-header.tpl | 82 |
3 files changed, 100 insertions, 18 deletions
diff --git a/view/tpl/cloud_actionspanel.tpl b/view/tpl/cloud_actionspanel.tpl index 81a586e75..eaa613dc4 100644 --- a/view/tpl/cloud_actionspanel.tpl +++ b/view/tpl/cloud_actionspanel.tpl @@ -1,20 +1,20 @@ <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> - <!-- Name (optional): <input type="text" name="name"> we should rather provide a rename action in edit form--> - </form> - <div class="clear"></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"> + <label for="files-upload">{{$upload_header}}</label> + <div class="clear"></div> + <input class="form-group pull-left" id="files-upload" type="file" name="file"> + <button id="upload-submit" class="btn btn-primary btn-sm pull-right" type="submit" value="{{$upload_submit}}">{{$upload_submit}}</button> + </form> + <div class="clear"></div> </div> diff --git a/view/tpl/cloud_directory.tpl b/view/tpl/cloud_directory.tpl index 870f7e9e1..5a84028c1 100644 --- a/view/tpl/cloud_directory.tpl +++ b/view/tpl/cloud_directory.tpl @@ -1,4 +1,4 @@ -<div class="section-content-wrapper-np"> +<div id="cloud-drag-area" class="section-content-wrapper-np"> <table id="cloud-index"> <tr> <th width="1%"></th> @@ -18,6 +18,7 @@ <td class="hidden-xs"></td> </tr> {{/if}} + <tr id="new-upload-progress-bar--1"></tr> {{* this is needed to append the upload files in the right order *}} {{foreach $entries as $item}} <tr id="cloud-index-{{$item.attachId}}"> <td><i class="fa {{$item.iconFromType}}" title="{{$item.type}}"></i></td> @@ -38,6 +39,7 @@ <tr id="cloud-tools-{{$item.attachId}}"> <td id="perms-panel-{{$item.attachId}}" colspan="9"></td> </tr> + {{/foreach}} </table> </div> diff --git a/view/tpl/jot-header.tpl b/view/tpl/jot-header.tpl index 9953875ef..c0d524764 100755 --- a/view/tpl/jot-header.tpl +++ b/view/tpl/jot-header.tpl @@ -164,6 +164,12 @@ function enableOnUser(){ }); } catch(e) { } + + + // call initialization file + if (window.File && window.FileList && window.FileReader) { + DragDropUploadInit(); + } }); function deleteCheckedItems() { @@ -446,7 +452,81 @@ function enableOnUser(){ }, 'json'); }; - + + // + // initialize + function DragDropUploadInit() { + + var filedrag = $("#profile-jot-text"); + + // is XHR2 available? + var xhr = new XMLHttpRequest(); + if (xhr.upload) { + + // file drop + filedrag.on("dragover", DragDropUploadFileHover); + filedrag.on("dragleave", DragDropUploadFileHover); + filedrag.on("drop", DragDropUploadFileSelectHandler); + + } + + 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; + // process all File objects + for (var i = 0, f; f = files[i]; i++) { + 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) { + $('#profile-rotator').spin('tiny'); + }); + xhr.addEventListener('load', function (e) { + //console.log('xhr upload complete', e); + window.fileUploadsCompleted = window.fileUploadsCompleted + 1; + addeditortext(xhr.responseText); + $('#jot-media').val($('#jot-media').val() + xhr.responseText); + // When all the uploads have completed, refresh the page + if (window.filesToUpload > 0 && window.fileUploadsCompleted === window.filesToUpload) { + $('#profile-rotator').spin(false); + window.fileUploadsCompleted = window.filesToUpload = 0; + } + }); + // POST to the wall_upload endpoint + xhr.open('post', '{{$baseurl}}/wall_attach/{{$nickname}}', true); + + var data = new FormData(); + data.append('userfile', file); + xhr.send(data); + } + </script> <script> |