templates.go 3.7 KB

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