file_server.html 5.6 KB

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