Apq
/
sftpgo
mirror of https://github.com/drakkan/sftpgo.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
							<!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>