web client: add support for integrating external viewers/editors

2025-12-06 14:20:55 +03:00 · 2021-12-03 18:33:08 +01:00
parent 6092b6628e
commit bedc8e288b
14 changed files with 417 additions and 68 deletions
--- a/examples/webclient-integrations/test.html
+++ b/examples/webclient-integrations/test.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <title>SFTPGo WebClient - External integration test</title>
+</head>
+
+<body>
+    <textarea id="textarea_test" name="textarea_test" rows="6" cols="80">The text here will be sent to SFTPGo as blob</textarea>
+    <br>
+    <button onclick="saveBlob(false);">Save</button>
+    <br>
+    <button onclick="saveBlob(true);">Save binary file</button>
+
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <script type="text/javascript">
+        var fileName;
+        var sftpgoUser;
+
+        // in real world usage set the origin when you call postMessage, we use `*` for testing purpose here
+        $(document).ready(function () {
+            if (window.opener == null || window.opener.closed) {
+                console.log("windows opener gone!");
+                return;
+            }
+            // notify SFTPGo that the page is ready to receive the file
+            window.opener.postMessage({type: 'ready'},"*");
+        });
+
+        window.addEventListener('message', (event) => {
+            if (window.opener == null || window.opener.closed) {
+                console.log("windows opener gone!");
+                return;
+            }
+            // you should check the origin before continuing
+            console.log("new message: "+JSON.stringify(event.data));
+            switch (event.data.type){
+                case 'readyResponse':
+                    // after sending the ready request SFTPGo will reply with this response
+                    // now you know the file name and the SFTPGo user
+                    fileName = event.data.file_name;
+                    sftpgoUser = event.data.user;
+                    console.log("ready response received, file name: " + fileName+" SFTPGo user: "+sftpgoUser);
+                    // you can initialize your viewer/editor based on the file extension and request the blob
+                    window.opener.postMessage({type: 'sendBlob'}, "*");
+                    break;
+                case 'blobDownloadStart':
+                    // SFTPGo may take a while to read the file, just before it starts reading it will send this message.
+                    // You can initialize a spinner if required for this file or simply ignore this message
+                    console.log("blob download start received, file name: " + fileName+" SFTPGo user: "+sftpgoUser);
+                    break;
+                case 'blob':
+                    // we received the file as blob
+                    var extension = fileName.slice((fileName.lastIndexOf(".") - 1 >>> 0) + 2).toLowerCase();
+                    console.log("blob received, file name: " + fileName+" extension: "+extension+" SFTPGo user: "+sftpgoUser);
+                    if (extension == "txt"){
+                        event.data.file.text().then(function(text){
+                            $("#textarea_test").val(text);
+                        });
+                    }
+                    break;
+                case 'blobSaveResult':
+                    // event.data.status is OK or KO, if KO message is not empty
+                    console.log("blob save status: "+event.data.status+", message: "+event.data.message);
+                    if (event.data.status == "OK"){
+                        console.log("blob saved, I'm useless now, close me");
+                    }
+                    break;
+                default:
+                    console.log("Unsupported message: " + JSON.stringify(event.data));
+            }
+        });
+
+        function saveBlob(binary){
+            // if we have modified the file we can send it back to SFTPGo as a blob for saving
+            console.log("save blob, binary? "+binary);
+            if (binary){
+                // we download and save the SFTPGo logo
+                fetch('https://raw.githubusercontent.com/drakkan/sftpgo/main/docs/howto/img/logo.png')
+                    .then(response => response.blob())
+                    .then(function(responseBlob){
+                        var blob = new File([responseBlob], fileName);
+                        window.opener.postMessage({
+                            type: 'saveBlob',
+                            file: blob
+                        },"*");
+                    });
+            } else {
+                var blob = new Blob([$("#textarea_test").val()]);
+                window.opener.postMessage({
+                    type: 'saveBlob',
+                    file: blob
+                },"*");
+            }
+        }
+    </script>
+</body>