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.

180 lines
3.9 KiB

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