You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

173 lines
3.8 KiB

  1. package master_ui
  2. import (
  3. "github.com/dustin/go-humanize"
  4. "html/template"
  5. )
  6. var funcMap = template.FuncMap{
  7. "humanizeBytes": humanize.Bytes,
  8. }
  9. var StatusTpl = template.Must(template.New("status").Funcs(funcMap).Parse(`<!DOCTYPE html>
  10. <html>
  11. <head>
  12. <title>SeaweedFS Filer</title>
  13. <link rel="icon" href="http://7viirv.com1.z0.glb.clouddn.com/seaweed_favicon.png" sizes="32x32" />
  14. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
  15. <style>
  16. #drop-area {
  17. border: 1px transparent;
  18. }
  19. #drop-area.highlight {
  20. border-color: purple;
  21. border: 2px dashed #ccc;
  22. }
  23. .button {
  24. display: inline-block;
  25. padding: 2px;
  26. background: #ccc;
  27. cursor: pointer;
  28. border-radius: 2px;
  29. border: 1px solid #ccc;
  30. float: right;
  31. }
  32. .button:hover {
  33. background: #ddd;
  34. }
  35. #fileElem {
  36. display: none;
  37. }
  38. </style>
  39. </head>
  40. <body>
  41. <div class="container">
  42. <div class="page-header">
  43. <h1>
  44. <img src="http://7viirv.com1.z0.glb.clouddn.com/seaweed50x50.png"></img>
  45. SeaweedFS Filer
  46. </h1>
  47. </div>
  48. <div class="row">
  49. <div>
  50. {{ range $entry := .Breadcrumbs }}
  51. <a href={{ $entry.Link }} >
  52. {{ $entry.Name }}
  53. </a>
  54. {{ end }}
  55. <label class="button" for="fileElem">Upload</label>
  56. </div>
  57. </div>
  58. <div class="row" id="drop-area">
  59. <form class="upload-form">
  60. <input type="file" id="fileElem" multiple onchange="handleFiles(this.files)">
  61. <table width="90%">
  62. {{$path := .Path }}
  63. {{ range $entry_index, $entry := .Entries }}
  64. <tr>
  65. <td>
  66. {{if $entry.IsDirectory}}
  67. <img src="https://www.w3.org/TR/WWWicn/folder.gif" width="20" height="23">
  68. <a href={{ print $path "/" $entry.Name "/"}} >
  69. {{ $entry.Name }}
  70. </a>
  71. {{else}}
  72. <a href={{ print $path "/" $entry.Name }} >
  73. {{ $entry.Name }}
  74. </a>
  75. {{end}}
  76. </td>
  77. <td align="right">
  78. {{if $entry.IsDirectory}}
  79. {{else}}
  80. {{ $entry.Mime }}
  81. {{end}}
  82. </td>
  83. <td align="right">
  84. {{if $entry.IsDirectory}}
  85. {{else}}
  86. {{ $entry.Size | humanizeBytes }}
  87. &nbsp;&nbsp;&nbsp;
  88. {{end}}
  89. </td>
  90. <td>
  91. {{ $entry.Timestamp.Format "2006-01-02 15:04" }}
  92. </td>
  93. </tr>
  94. {{ end }}
  95. </table>
  96. </form>
  97. </div>
  98. {{if .ShouldDisplayLoadMore}}
  99. <div class="row">
  100. <a href={{ print .Path "?limit=" .Limit "&lastFileName=" .LastFileName}} >
  101. Load more
  102. </a>
  103. </div>
  104. {{end}}
  105. </div>
  106. </body>
  107. <script type="text/javascript">
  108. // ************************ Drag and drop ***************** //
  109. let dropArea = document.getElementById("drop-area")
  110. // Prevent default drag behaviors
  111. ;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
  112. dropArea.addEventListener(eventName, preventDefaults, false)
  113. document.body.addEventListener(eventName, preventDefaults, false)
  114. })
  115. // Highlight drop area when item is dragged over it
  116. ;['dragenter', 'dragover'].forEach(eventName => {
  117. dropArea.addEventListener(eventName, highlight, false)
  118. })
  119. ;['dragleave', 'drop'].forEach(eventName => {
  120. dropArea.addEventListener(eventName, unhighlight, false)
  121. })
  122. // Handle dropped files
  123. dropArea.addEventListener('drop', handleDrop, false)
  124. function preventDefaults (e) {
  125. e.preventDefault()
  126. e.stopPropagation()
  127. }
  128. function highlight(e) {
  129. dropArea.classList.add('highlight')
  130. }
  131. function unhighlight(e) {
  132. dropArea.classList.remove('highlight')
  133. }
  134. function handleDrop(e) {
  135. var dt = e.dataTransfer
  136. var files = dt.files
  137. handleFiles(files)
  138. }
  139. function handleFiles(files) {
  140. files = [...files]
  141. files.forEach(uploadFile)
  142. window.location.reload()
  143. }
  144. function uploadFile(file, i) {
  145. var url = window.location.href
  146. var xhr = new XMLHttpRequest()
  147. var formData = new FormData()
  148. xhr.open('POST', url, true)
  149. formData.append('file', file)
  150. xhr.send(formData)
  151. }
  152. </script>
  153. </html>
  154. `))