webrepl-client/examples/file-manager.html at master · murilopolese/webrepl-client · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>File Manager</title>
        <script type="text/javascript" src="./FileSaver.js"></script>
    </head>
    <body>
        <h1>File Manager</h1>
        <webrepl-connection></webrepl-connection>
        <webrepl-file-manager></webrepl-file-manager>

        <script type="module">
            // import 'https://unpkg.com/@webcomponents/custom-elements'
            import '../node_modules/custom-elements/dist/CustomElements.min.js'
            import './components/webrepl-connection.js'
            import './components/webrepl-file-manager.js'
            import { WebREPL } from '../webrepl.js'
            let repl
            window.onload = () => {
                let connectionForm = document.querySelector('webrepl-connection')
                let fileManager = document.querySelector('webrepl-file-manager')

                let parseResponse = (response) => {
                    let rawStart = 'raw REPL; CTRL-B to exit\r\n>OK'
                    let rawEnd = String.fromCharCode(4) // CTRL-D
                    let rawStartIndex = response.indexOf(rawStart) + rawStart.length
                    let rawEndIndex = rawStartIndex + response.substring(rawStartIndex).indexOf(rawEnd)
                    return response.substring(rawStartIndex, rawEndIndex)
                }
                let listFiles = () => {
                    let buffer = ''
                    let code = 'import os;print(os.listdir(), end="")'
                    let getResponse = (response) => {
                        buffer += response
                    }
                    repl.on('output', getResponse)
                    return repl.execFromString(code)
                        .then(() => {
                            repl.removeListener('output', getResponse)
                            return Promise.resolve(parseResponse(buffer))
                        })
                }
                let listAndLoad = () => {
                    return listFiles()
                        .then((response) => {
                            fileManager.loadFiles(
                                JSON.parse(
                                    response.trim().replace(/'/g, '"')
                                )
                            )
                            return Promise.resolve(response)
                        })
                }
                let sendFile = (file) => {
                    return new Promise((resolve, reject) => {
                        let reader = new FileReader()
                        reader.onload = () => {
                            let putFileData = new Uint8Array(reader.result)
                            repl.sendFile(file.name, putFileData)
                                .then(resolve)
                                .catch(reject)
                        }
                        reader.onerror = reject
                        reader.readAsArrayBuffer(file)
                    })
                }
                let getFile = (filename) => {
                    return repl.loadFile(filename)
                        .then((data) => {
                            return Promise.resolve(
                                new Blob(
                                    [data],
                                    { type: "application/octet-stream" }
                                )
                            )
                        })
                }
                let removeFile = (filename) => {
                    let code = `import os;os.remove('${filename}')`
                    return repl.execFromString(code)
                }

                connectionForm.addEventListener('connect', (e) => {
                    repl = new WebREPL({
                        ip: e.detail.ip,
                        password: e.detail.password,
                        autoConnect: true,
                        autoAuth: true
                    })
                    repl.on('error', (err) => {
                        console.error(err)
                    })
                    repl.on('authenticated', () => {
                        connectionForm.setAttribute('connected', true)
                        fileManager.setAttribute('connected', true)

                        // List files and load into `webrepl-file-manager`
                        fileManager.addEventListener('list-files', () => {
                            console.log('Listing files')
                            listAndLoad().catch((err) => {
                                console.log('Failed listing files')
                                console.error(err)
                            })
                        })
                        // Send file
                        fileManager.addEventListener('send-file', (e) => {
                            console.log(`Sending ${e.detail.name} ...`)
                            sendFile(e.detail)
                                .then(() => {
                                    console.log('Sent')
                                    return listAndLoad()
                                })
                                .catch((err) => {
                                    console.log('Failed sending file')
                                    console.error(err)
                                })
                        })
                        // Remove file
                        fileManager.addEventListener('remove-file', (e) => {
                            console.log(`Removing file ${e.detail} ...`)
                            removeFile(e.detail)
                                .then(() => {
                                    console.log('Removed')
                                    return listAndLoad()
                                })
                                .catch((err) => {
                                    console.log('Failed removing file')
                                    console.error(err)
                                })
                        })
                        // Get file
                        fileManager.addEventListener('get-file', (e) => {
                            console.log(`Getting ${e.detail} ...`)
                            getFile(e.detail)
                                .then((blob) => {
                                    saveAs(blob, e.detail)
                                })
                                .catch((err) => {
                                    console.log('Failed getting file')
                                    console.error(err)
                                })
                        })
                    })
                })
            }
        </script>
    </body>
</html>