gitlab-com-seaweedfs/seaweedfs
1
0
Fork 0
mirror of https://github.com/seaweedfs/seaweedfs.git synced 2024-01-19 02:48:24 +00:00
Code Issues Projects Releases Wiki Activity

filer add upload and drag&dorp

Browse source
This commit is contained in:
Chris Lu 2018-08-19 18:42:40 -07:00
parent f22d6b87e1
commit 906472b21d
1 changed files with 90 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

92
weed/server/filer_ui/templates.go
View file

@ -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>
`))