diff options
| author | Chris Lu <chris.lu@gmail.com> | 2018-08-19 18:42:40 -0700 |
|---|---|---|
| committer | Chris Lu <chris.lu@gmail.com> | 2018-08-19 18:42:40 -0700 |
| commit | 906472b21d49b2263675b1dfc0f04370bbbeb39a (patch) | |
| tree | e6f4022b5b81566942a8db2222e17f8545fb8f37 | |
| parent | f22d6b87e1c057f1dbeefb761b0809b4fdca397b (diff) | |
| download | seaweedfs-906472b21d49b2263675b1dfc0f04370bbbeb39a.tar.xz seaweedfs-906472b21d49b2263675b1dfc0f04370bbbeb39a.zip | |
filer add upload and drag&dorp
| -rw-r--r-- | weed/server/filer_ui/templates.go | 92 |
1 files changed, 90 insertions, 2 deletions
diff --git a/weed/server/filer_ui/templates.go b/weed/server/filer_ui/templates.go index c2d69156e..c1454f74c 100644 --- a/weed/server/filer_ui/templates.go +++ b/weed/server/filer_ui/templates.go @@ -15,6 +15,30 @@ var StatusTpl = template.Must(template.New("status").Funcs(funcMap).Parse(`<!DOC <title>SeaweedFS Filer</title> <link rel="icon" href="http://7viirv.com1.z0.glb.clouddn.com/seaweed_favicon.png" sizes="32x32" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"> +<style> +#drop-area { + border: 1px transparent; +} +#drop-area.highlight { + border-color: purple; + border: 2px dashed #ccc; +} +.button { + display: inline-block; + padding: 2px; + background: #ccc; + cursor: pointer; + border-radius: 2px; + border: 1px solid #ccc; + float: right; +} +.button:hover { + background: #ddd; +} +#fileElem { + display: none; +} +</style> </head> <body> <div class="container"> @@ -25,15 +49,20 @@ var StatusTpl = template.Must(template.New("status").Funcs(funcMap).Parse(`<!DOC </h1> </div> <div class="row"> + <div> {{ range $entry := .Breadcrumbs }} <a href={{ $entry.Link }} > {{ $entry.Name }} </a> {{ end }} - + <label class="button" for="fileElem">Upload</label> + </div> </div> - <div class="row"> + <div class="row" id="drop-area"> + <form class="upload-form"> + <input type="file" id="fileElem" multiple onchange="handleFiles(this.files)"> + <table width="90%"> {{$path := .Path }} {{ range $entry_index, $entry := .Entries }} @@ -70,6 +99,7 @@ var StatusTpl = template.Must(template.New("status").Funcs(funcMap).Parse(`<!DOC {{ end }} </table> + </form> </div> {{if .ShouldDisplayLoadMore}} @@ -81,5 +111,63 @@ var StatusTpl = template.Must(template.New("status").Funcs(funcMap).Parse(`<!DOC {{end}} </div> </body> +<script type="text/javascript"> +// ************************ Drag and drop ***************** // +let dropArea = document.getElementById("drop-area") + +// Prevent default drag behaviors +;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { + dropArea.addEventListener(eventName, preventDefaults, false) + document.body.addEventListener(eventName, preventDefaults, false) +}) + +// Highlight drop area when item is dragged over it +;['dragenter', 'dragover'].forEach(eventName => { + dropArea.addEventListener(eventName, highlight, false) +}) + +;['dragleave', 'drop'].forEach(eventName => { + dropArea.addEventListener(eventName, unhighlight, false) +}) + +// Handle dropped files +dropArea.addEventListener('drop', handleDrop, false) + +function preventDefaults (e) { + e.preventDefault() + e.stopPropagation() +} + +function highlight(e) { + dropArea.classList.add('highlight') +} + +function unhighlight(e) { + dropArea.classList.remove('highlight') +} + +function handleDrop(e) { + var dt = e.dataTransfer + var files = dt.files + + handleFiles(files) +} + +function handleFiles(files) { + files = [...files] + files.forEach(uploadFile) + window.location.reload() +} + +function uploadFile(file, i) { + var url = window.location.href + var xhr = new XMLHttpRequest() + var formData = new FormData() + xhr.open('POST', url, true) + + formData.append('file', file) + xhr.send(formData) +} +</script> </html> `)) |