diff options
Diffstat (limited to 'view/tpl')
| -rw-r--r-- | view/tpl/cloud_actionspanel.tpl | 112 |
1 files changed, 112 insertions, 0 deletions
diff --git a/view/tpl/cloud_actionspanel.tpl b/view/tpl/cloud_actionspanel.tpl index 81a586e75..d4e187619 100644 --- a/view/tpl/cloud_actionspanel.tpl +++ b/view/tpl/cloud_actionspanel.tpl @@ -17,4 +17,116 @@ <!-- Name (optional): <input type="text" name="name"> we should rather provide a rename action in edit form--> </form> <div class="clear"></div> + + <form id="upload" action="" method="POST" enctype="multipart/form-data"> + + <fieldset> + + <input type="hidden" id="MAX_FILE_SIZE" name="MAX_FILE_SIZE" value="300000" /> + <input type="hidden" name="sabreAction" value="put"> + <div> + <label for="fileselect">Files to upload:</label> + <input type="file" id="fileselect" name="fileselect[]" multiple="multiple" /> + <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> + + </form> + <div class="clear"></div> </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() { +// 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>" + ); + } + +} + +</script>
\ No newline at end of file |