test.html 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7. <title>SFTPGo WebClient - External integration test</title>
  8. </head>
  9. <body>
  10. <textarea id="textarea_test" name="textarea_test" rows="10" cols="80">The text here will be sent to SFTPGo as blob</textarea>
  11. <br>
  12. <button onclick="saveBlob(false);">Save</button>
  13. <br>
  14. <button onclick="saveBlob(true);">Save binary file</button>
  15. <br><br>
  16. <b>Logs</b>
  17. <pre id="log"></pre>
  18. <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  19. <script type="text/javascript">
  20. var fileName;
  21. var sftpgoUser;
  22. // in real world usage set the origin when you call postMessage, we use `*` for testing purpose here
  23. $(document).ready(function () {
  24. if (window.opener == null || window.opener.closed) {
  25. printLog("window opener gone!");
  26. return;
  27. }
  28. // notify SFTPGo that the page is ready to receive the file
  29. window.opener.postMessage({type: 'ready'},"*");
  30. });
  31. window.addEventListener('message', (event) => {
  32. if (window.opener == null || window.opener.closed) {
  33. printLog("window opener gone!");
  34. return;
  35. }
  36. // you should check the origin before continuing
  37. printLog("new message: "+JSON.stringify(event.data));
  38. switch (event.data.type){
  39. case 'readyResponse':
  40. // after sending the ready request SFTPGo will reply with this response
  41. // now you know the file name and the SFTPGo user
  42. fileName = event.data.file_name;
  43. sftpgoUser = event.data.user;
  44. printLog("ready response received, file name: " + fileName+" SFTPGo user: "+sftpgoUser);
  45. // you can initialize your viewer/editor based on the file extension and request the blob
  46. window.opener.postMessage({type: 'sendBlob'}, "*");
  47. break;
  48. case 'blobDownloadStart':
  49. // SFTPGo may take a while to read the file, just before it starts reading it will send this message.
  50. // You can initialize a spinner if required for this file or simply ignore this message
  51. printLog("blob download start received, file name: " + fileName+" SFTPGo user: "+sftpgoUser);
  52. break;
  53. case 'blobDownloadError':
  54. // SFTPGo was unable to download the file and return it as blob
  55. printLog("blob download failed, file name: " + fileName+" SFTPGo user: "+sftpgoUser+" error message: "+event.data.message);
  56. break;
  57. case 'blob':
  58. // we received the file as blob
  59. var extension = fileName.slice((fileName.lastIndexOf(".") - 1 >>> 0) + 2).toLowerCase();
  60. printLog("blob received, file name: " + fileName+" extension: "+extension+" SFTPGo user: "+sftpgoUser);
  61. if (extension == "txt"){
  62. event.data.file.text().then(function(text){
  63. $("#textarea_test").val(text);
  64. });
  65. }
  66. break;
  67. case 'blobSaveResult':
  68. // event.data.status is OK or KO, if KO message is not empty
  69. printLog("blob save status: "+event.data.status+", message: "+event.data.message);
  70. if (event.data.status == "OK"){
  71. printLog("blob saved, I'm useless now, close me");
  72. }
  73. break;
  74. default:
  75. printLog("Unsupported message: " + JSON.stringify(event.data));
  76. }
  77. });
  78. function saveBlob(binary){
  79. if (window.opener == null || window.opener.closed) {
  80. printLog("window opener gone!");
  81. return;
  82. }
  83. // if we have modified the file we can send it back to SFTPGo as a blob for saving
  84. printLog("save blob, binary? "+binary);
  85. if (binary){
  86. // we download and save the SFTPGo logo. In a real application check errors
  87. fetch('https://raw.githubusercontent.com/drakkan/sftpgo/main/docs/howto/img/logo.png')
  88. .then(response => response.blob())
  89. .then(function(responseBlob){
  90. var blob = new File([responseBlob], fileName);
  91. window.opener.postMessage({
  92. type: 'saveBlob',
  93. file: blob
  94. },"*");
  95. });
  96. } else {
  97. var blob = new Blob([$("#textarea_test").val()]);
  98. window.opener.postMessage({
  99. type: 'saveBlob',
  100. file: blob
  101. },"*");
  102. }
  103. }
  104. function printLog(message){
  105. console.log(message);
  106. var logger = document.getElementById('log');
  107. logger.innerHTML += message + '<br>';
  108. }
  109. </script>
  110. </body>