diff options
Diffstat (limited to 'weed/server/filer_ui')
| -rw-r--r-- | weed/server/filer_ui/filer.html | 182 | ||||
| -rw-r--r-- | weed/server/filer_ui/templates.go | 178 |
2 files changed, 186 insertions, 174 deletions
diff --git a/weed/server/filer_ui/filer.html b/weed/server/filer_ui/filer.html new file mode 100644 index 000000000..84dc4d4d6 --- /dev/null +++ b/weed/server/filer_ui/filer.html @@ -0,0 +1,182 @@ +<!DOCTYPE html> +<html> +<head> + <title>SeaweedFS Filer</title> + <meta name="viewport" content="width=device-width, initial-scale=1"> + <link rel="stylesheet" href="/seaweedfsstatic/bootstrap/3.3.1/css/bootstrap.min.css"> + <style> + body { + padding-bottom: 128px; + } + + #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; + } + + .qrImage { + display: block; + margin-left: auto; + margin-right: auto; + } + </style> +</head> +<body> +<div class="container"> + <div class="page-header"> + <h1> + <a href="https://github.com/chrislusf/seaweedfs"><img src="/seaweedfsstatic/seaweed50x50.png"></img></a> + SeaweedFS Filer + </h1> + </div> + <div class="row"> + <div> + {{ range $entry := .Breadcrumbs }} + <a href="{{ printpath $entry.Link }}"> + {{ $entry.Name }} + </a> + {{ end }} + <label class="button" for="fileElem">Upload</label> + </div> + </div> + + <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 }} + <tr> + <td> + {{if $entry.IsDirectory}} + <img src="/seaweedfsstatic/images/folder.gif" width="20" height="23"> + <a href="{{ printpath $path "/" $entry.Name "/"}}" > + {{ $entry.Name }} + </a> + {{else}} + <a href="{{ printpath $path "/" $entry.Name }}" > + {{ $entry.Name }} + </a> + {{end}} + </td> + <td align="right" nowrap> + {{if $entry.IsDirectory}} + {{else}} + {{ $entry.Mime }} + {{end}} + </td> + <td align="right" nowrap> + {{if $entry.IsDirectory}} + {{else}} + {{ $entry.Size | humanizeBytes }} + {{end}} + </td> + <td nowrap> + {{ $entry.Timestamp.Format "2006-01-02 15:04" }} + </td> + </tr> + {{ end }} + + </table> + </form> + </div> + + {{if .ShouldDisplayLoadMore}} + <div class="row"> + <a href={{ print .Path "?limit=" .Limit "&lastFileName=" .LastFileName}} > + Load more + </a> + </div> + {{end}} + + <br/> + <br/> + + <div class="navbar navbar-fixed-bottom"> + <img src="data:image/png;base64,{{.QrImage}}" class="qrImage"/> + </div> + +</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, false) + + formData.append('file', file) + xhr.send(formData) + } +</script> +</html> diff --git a/weed/server/filer_ui/templates.go b/weed/server/filer_ui/templates.go index 648b97f22..f9ef064bc 100644 --- a/weed/server/filer_ui/templates.go +++ b/weed/server/filer_ui/templates.go @@ -1,6 +1,7 @@ package filer_ui import ( + _ "embed" "github.com/dustin/go-humanize" "html/template" "net/url" @@ -18,178 +19,7 @@ var funcMap = template.FuncMap{ "printpath": printpath, } -var StatusTpl = template.Must(template.New("status").Funcs(funcMap).Parse(`<!DOCTYPE html> -<html> -<head> - <title>SeaweedFS Filer</title> - <meta name="viewport" content="width=device-width, initial-scale=1"> - <link rel="stylesheet" href="/seaweedfsstatic/bootstrap/3.3.1/css/bootstrap.min.css"> -<style> -body { padding-bottom: 128px; } -#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; -} -.qrImage { - display: block; - margin-left: auto; - margin-right: auto; -} -</style> -</head> -<body> - <div class="container"> - <div class="page-header"> - <h1> - <a href="https://github.com/chrislusf/seaweedfs"><img src="/seaweedfsstatic/seaweed50x50.png"></img></a> - SeaweedFS Filer - </h1> - </div> - <div class="row"> - <div> - {{ range $entry := .Breadcrumbs }} - <a href="{{ printpath $entry.Link }}" > - {{ $entry.Name }} - </a> - {{ end }} - <label class="button" for="fileElem">Upload</label> - </div> - </div> - - <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 }} - <tr> - <td> - {{if $entry.IsDirectory}} - <img src="/seaweedfsstatic/images/folder.gif" width="20" height="23"> - <a href="{{ printpath $path "/" $entry.Name "/"}}" > - {{ $entry.Name }} - </a> - {{else}} - <a href="{{ printpath $path "/" $entry.Name }}" > - {{ $entry.Name }} - </a> - {{end}} - </td> - <td align="right" nowrap> - {{if $entry.IsDirectory}} - {{else}} - {{ $entry.Mime }} - {{end}} - </td> - <td align="right" nowrap> - {{if $entry.IsDirectory}} - {{else}} - {{ $entry.Size | humanizeBytes }} - {{end}} - </td> - <td nowrap> - {{ $entry.Timestamp.Format "2006-01-02 15:04" }} - </td> - </tr> - {{ end }} - - </table> - </form> - </div> - - {{if .ShouldDisplayLoadMore}} - <div class="row"> - <a href={{ print .Path "?limit=" .Limit "&lastFileName=" .LastFileName}} > - Load more - </a> - </div> - {{end}} - - <br/> - <br/> - - <div class="navbar navbar-fixed-bottom"> - <img src="data:image/png;base64,{{.QrImage}}" class="qrImage" /> - </div> - - </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) -}) +//go:embed filer.html +var filerHtml string -;['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, false) - - formData.append('file', file) - xhr.send(formData) -} -</script> -</html> -`)) +var StatusTpl = template.Must(template.New("status").Funcs(funcMap).Parse(filerHtml)) |