filer add upload and drag&dorp

6 years ago · 906472b21d
1 changed files with 90 additions and 2 deletions
--- 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>
 `))