file_server.html 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206
  1. <!DOCTYPE html>
  2. <html lang="en" xml:lang="en">
  3. <head>
  4. <link href="/firework.css?v=$COMMIT_HASH" rel="stylesheet">
  5. <script type="text/javascript" src="/jquery-3.6.0.min.js?v=$COMMIT_HASH"></script>
  6. <script type="text/javascript" src="/firework.js?v=$COMMIT_HASH"></script>
  7. <style>
  8. h1 {font-size: 2em;}
  9. h2 {font-size: 1.5em; margin-block-start: 0.0em; margin-block-end: 0.2em;}
  10. h3 {font-size: 1.2em;}
  11. p {font-size: 1em;}
  12. #files_table {
  13. font-family: Arial, Helvetica, sans-serif;
  14. border-collapse: collapse;
  15. width: 100%;
  16. }
  17. #files_table td, #files_table th {
  18. border: 1px solid #ddd;
  19. padding: 8px;
  20. }
  21. #files_table tr:nth-child(even){
  22. background-color: #f2f2f2;
  23. }
  24. #files_table tr:hover {
  25. background-color: #ddd;
  26. }
  27. #files_table th {
  28. padding-top: 12px;
  29. padding-bottom: 12px;
  30. text-align: left;
  31. background-color:lightgrey;
  32. color: black;
  33. }
  34. input[type=file] {
  35. padding: 5px 0px;
  36. display: inline-block;
  37. font-size: 16px;
  38. }
  39. input[type=text] {
  40. padding: 5px 10px;
  41. display: inline-block;
  42. border: 1px solid #ccc;
  43. font-size: 16px;
  44. }
  45. .button {
  46. padding: 4px 10px;
  47. width: 100px;
  48. font-size: 16px;
  49. }
  50. </style>
  51. </head>
  52. </body>
  53. <table class="fixed" border="0" width=100% style="font-family: arial">
  54. <tr>
  55. <td style="vertical-align: top;width: 300px;">
  56. <h2>Fileserver</h2>
  57. </td>
  58. <td rowspan="2">
  59. <table border="0" style="width:100%">
  60. <tr>
  61. <td style="width:80px">
  62. <label for="newfile">Source</label>
  63. </td>
  64. <td colspan="2">
  65. <input id="newfile" type="file" onchange="setpath()" style="width:100%;">
  66. </td>
  67. </tr>
  68. <tr>
  69. <td>
  70. <label for="filepath">Destination</label>
  71. </td>
  72. <td>
  73. <input id="filepath" type="text" style="width:94%;">
  74. </td>
  75. <td>
  76. <button id="upload" type="button" class="button" onclick="upload()">Upload</button>
  77. </td>
  78. </tr>
  79. </table>
  80. </td>
  81. </tr>
  82. <tr></tr>
  83. <tr>
  84. <td colspan="2">
  85. <button style="font-size:16px; padding: 5px 10px" id="dirup" type="button" onclick="dirup()" disabled>&#129145; Directory up</button>
  86. <span style="padding-left:15px" id="currentpath"></span>
  87. </td>
  88. </tr>
  89. </table>
  90. <script type="text/javascript" src="/common.js?v=$COMMIT_HASH"></script>
  91. <script type="text/javascript">
  92. function setpath() {
  93. var fileserverpraefix = "/fileserver";
  94. var anz_zeichen_fileserver = fileserverpraefix.length;
  95. var default_path = window.location.pathname.substring(anz_zeichen_fileserver) + document.getElementById("newfile").files[0].name;
  96. document.getElementById("filepath").value = default_path;
  97. }
  98. function dirup() {
  99. var str = window.location.href;
  100. str = str.substring(0, str.length-1);
  101. var zw = str.indexOf("/");
  102. var found = zw;
  103. while (zw >= 0)
  104. {
  105. zw = str.indexOf("/", found+1);
  106. if (zw >= 0)
  107. found = zw;
  108. }
  109. var res = str.substring(0, found+1);
  110. window.location.href = res;
  111. }
  112. function upload() {
  113. var filePath = document.getElementById("filepath").value;
  114. var upload_path = "/upload/" + filePath;
  115. var fileInput = document.getElementById("newfile").files;
  116. /* Max size of an individual file. Make sure this
  117. * value is same as that set in file_server.c */
  118. var MAX_FILE_SIZE = 8000*1024;
  119. var MAX_FILE_SIZE_STR = "8000KB";
  120. if (fileInput.length == 0) {
  121. firework.launch('No file selected!', 'danger', 30000);
  122. } else if (filePath.length == 0) {
  123. firework.launch('File path on server is not set!', 'danger', 30000);
  124. } else if (filePath.length > 100) {
  125. firework.launch('Filename is to long! Max 100 characters.', 'danger', 30000);
  126. } else if (filePath.indexOf(' ') >= 0) {
  127. firework.launch('File path on server cannot have spaces!', 'danger', 30000);
  128. } else if (filePath[filePath.length-1] == '/') {
  129. firework.launch('File name not specified after path!', 'danger', 30000);
  130. } else if (fileInput[0].size > MAX_FILE_SIZE) {
  131. firework.launch("File size must be less than " + MAX_FILE_SIZE_STR + "!", 'danger', 30000);
  132. } else {
  133. document.getElementById("newfile").disabled = true;
  134. document.getElementById("filepath").disabled = true;
  135. document.getElementById("upload").disabled = true;
  136. var file = fileInput[0];
  137. var xhttp = new XMLHttpRequest();
  138. xhttp.onreadystatechange = function() {
  139. if (xhttp.readyState == 4) {
  140. if (xhttp.status == 200) {
  141. document.open();
  142. document.write(xhttp.responseText);
  143. document.close();
  144. firework.launch('File upload completed', 'success', 5000);
  145. } else if (xhttp.status == 0) {
  146. firework.launch('Server closed the connection abruptly!', 'danger', 30000);
  147. UpdatePage(false);
  148. } else {
  149. firework.launch('An error occured: ' + xhttp.responseText, 'danger', 30000);
  150. UpdatePage(false);
  151. }
  152. }
  153. };
  154. xhttp.open("POST", upload_path, true);
  155. xhttp.send(file);
  156. }
  157. }
  158. function checkAtRootLevel(res) {
  159. if (getPath() == "/fileserver/") { // Already at root level
  160. document.getElementById("dirup").disabled = true;
  161. console.log("Already on sd-card root level!");
  162. return true;
  163. }
  164. document.getElementById("dirup").disabled = false;
  165. return false;
  166. }
  167. function getPath() {
  168. return window.location.pathname.replace(/\/+$/, '') + "/"
  169. }
  170. checkAtRootLevel();
  171. console.log("Current path: " + getPath().replace("/fileserver", ""));
  172. document.getElementById("currentpath").innerHTML = "Current path: <b>" + getPath().replace("/fileserver", "") + "</b>";
  173. document.cookie = "page=" + getPath() + "; path=/";
  174. </script>
  175. </body>
  176. </html>