2016-07-18 16:28:24 +08:00
|
|
|
package master_ui
|
|
|
|
|
|
|
|
|
|
import (
|
2018-08-11 14:47:31 +08:00
|
|
|
"github.com/dustin/go-humanize"
|
2018-08-13 05:27:14 +08:00
|
|
|
"html/template"
|
2016-07-18 16:28:24 +08:00
|
|
|
)
|
|
|
|
|
|
2018-08-11 14:47:31 +08:00
|
|
|
var funcMap = template.FuncMap{
|
|
|
|
|
"humanizeBytes": humanize.Bytes,
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
var StatusTpl = template.Must(template.New("status").Funcs(funcMap).Parse(`<!DOCTYPE html>
|
2016-07-18 16:28:24 +08:00
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>SeaweedFS Filer</title>
|
2018-10-08 12:42:57 +08:00
|
|
|
<link rel="stylesheet" href="/seaweedfsstatic/bootstrap/3.3.1/css/bootstrap.min.css">
|
2018-08-20 09:42:40 +08:00
|
|
|
<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>
|
2016-07-18 16:28:24 +08:00
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div class="container">
|
|
|
|
|
<div class="page-header">
|
|
|
|
|
<h1>
|
2018-10-08 01:54:05 +08:00
|
|
|
<img src="/seaweedfsstatic/seaweed50x50.png"></img>
|
2016-07-18 16:28:24 +08:00
|
|
|
SeaweedFS Filer
|
|
|
|
|
</h1>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="row">
|
2018-08-20 09:42:40 +08:00
|
|
|
<div>
|
2018-05-25 14:42:13 +08:00
|
|
|
{{ range $entry := .Breadcrumbs }}
|
|
|
|
|
<a href={{ $entry.Link }} >
|
|
|
|
|
{{ $entry.Name }}
|
|
|
|
|
</a>
|
|
|
|
|
{{ end }}
|
2018-08-20 09:42:40 +08:00
|
|
|
<label class="button" for="fileElem">Upload</label>
|
|
|
|
|
</div>
|
2016-07-18 16:28:24 +08:00
|
|
|
</div>
|
|
|
|
|
|
2018-08-20 09:42:40 +08:00
|
|
|
<div class="row" id="drop-area">
|
|
|
|
|
<form class="upload-form">
|
|
|
|
|
<input type="file" id="fileElem" multiple onchange="handleFiles(this.files)">
|
|
|
|
|
|
2018-05-25 14:21:12 +08:00
|
|
|
<table width="90%">
|
2016-07-18 16:28:24 +08:00
|
|
|
{{$path := .Path }}
|
2018-05-14 14:56:16 +08:00
|
|
|
{{ range $entry_index, $entry := .Entries }}
|
2018-05-25 14:21:12 +08:00
|
|
|
<tr>
|
|
|
|
|
<td>
|
2018-05-14 14:56:16 +08:00
|
|
|
{{if $entry.IsDirectory}}
|
2018-10-08 12:42:57 +08:00
|
|
|
<img src="/seaweedfsstatic/images/folder.gif" width="20" height="23">
|
2018-05-14 14:56:16 +08:00
|
|
|
<a href={{ print $path "/" $entry.Name "/"}} >
|
|
|
|
|
{{ $entry.Name }}
|
|
|
|
|
</a>
|
|
|
|
|
{{else}}
|
|
|
|
|
<a href={{ print $path "/" $entry.Name }} >
|
|
|
|
|
{{ $entry.Name }}
|
|
|
|
|
</a>
|
|
|
|
|
{{end}}
|
2018-05-25 14:21:12 +08:00
|
|
|
</td>
|
|
|
|
|
<td align="right">
|
|
|
|
|
{{if $entry.IsDirectory}}
|
2018-05-31 11:24:57 +08:00
|
|
|
{{else}}
|
|
|
|
|
{{ $entry.Mime }}
|
|
|
|
|
{{end}}
|
|
|
|
|
</td>
|
|
|
|
|
<td align="right">
|
|
|
|
|
{{if $entry.IsDirectory}}
|
2018-05-25 14:21:12 +08:00
|
|
|
{{else}}
|
2018-08-11 14:47:31 +08:00
|
|
|
{{ $entry.Size | humanizeBytes }}
|
2018-05-31 11:24:57 +08:00
|
|
|
|
2018-05-25 14:21:12 +08:00
|
|
|
{{end}}
|
|
|
|
|
</td>
|
|
|
|
|
<td>
|
|
|
|
|
{{ $entry.Timestamp.Format "2006-01-02 15:04" }}
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
2016-07-18 16:28:24 +08:00
|
|
|
{{ end }}
|
|
|
|
|
|
2018-05-25 14:21:12 +08:00
|
|
|
</table>
|
2018-08-20 09:42:40 +08:00
|
|
|
</form>
|
2016-07-18 16:28:24 +08:00
|
|
|
</div>
|
|
|
|
|
|
2018-05-06 05:41:40 +08:00
|
|
|
{{if .ShouldDisplayLoadMore}}
|
2016-07-18 16:28:24 +08:00
|
|
|
<div class="row">
|
2018-05-06 05:41:40 +08:00
|
|
|
<a href={{ print .Path "?limit=" .Limit "&lastFileName=" .LastFileName}} >
|
2016-07-20 16:46:28 +08:00
|
|
|
Load more
|
|
|
|
|
</a>
|
2016-07-18 16:28:24 +08:00
|
|
|
</div>
|
|
|
|
|
{{end}}
|
|
|
|
|
</div>
|
|
|
|
|
</body>
|
2018-08-20 09:42:40 +08:00
|
|
|
<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>
|
2016-07-18 16:28:24 +08:00
|
|
|
</html>
|
|
|
|
|
`))
|
