-
-
Notifications
You must be signed in to change notification settings - Fork 102
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #100 from gnmyt/features/sftp
📁 SFTP / File Management
- Loading branch information
Showing
38 changed files
with
1,387 additions
and
89 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
214 changes: 214 additions & 0 deletions
214
client/src/pages/Servers/components/ViewContainer/renderer/FileRenderer/FileRenderer.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,214 @@ | ||
| import { useContext, useEffect, useState, useRef } from "react"; | ||
| import { UserContext } from "@/common/contexts/UserContext.jsx"; | ||
| import useWebSocket from "react-use-websocket"; | ||
| import ActionBar from "@/pages/Servers/components/ViewContainer/renderer/FileRenderer/components/ActionBar"; | ||
| import FileList from "@/pages/Servers/components/ViewContainer/renderer/FileRenderer/components/FileList"; | ||
| import "./styles.sass"; | ||
| import CreateFolderDialog from "./components/CreateFolderDialog"; | ||
| import FileEditor from "@/pages/Servers/components/ViewContainer/renderer/FileRenderer/components/FileEditor/index.js"; | ||
| import Icon from "@mdi/react"; | ||
| import { mdiCloudUpload } from "@mdi/js"; | ||
|
|
||
| const CHUNK_SIZE = 128 * 1024; | ||
|
|
||
| export const FileRenderer = ({ session, disconnectFromServer }) => { | ||
| const { sessionToken } = useContext(UserContext); | ||
|
|
||
| const [dragging, setDragging] = useState(false); | ||
| const [folderDialogOpen, setFolderDialogOpen] = useState(false); | ||
| const [currentFile, setCurrentFile] = useState(null); | ||
| const [uploadProgress, setUploadProgress] = useState(0); | ||
| const [directory, setDirectory] = useState("/"); | ||
| const [items, setItems] = useState([]); | ||
| const [history, setHistory] = useState(["/"]); | ||
| const [historyIndex, setHistoryIndex] = useState(0); | ||
|
|
||
| const dropZoneRef = useRef(null); | ||
|
|
||
| const protocol = location.protocol === "https:" ? "wss" : "ws"; | ||
| const path = process.env.NODE_ENV === "production" ? `${window.location.host}/api/servers/sftp` : "localhost:6989/api/servers/sftp"; | ||
| const url = `${protocol}://${path}?sessionToken=${sessionToken}&serverId=${session.server}&identityId=${session.identity}`; | ||
|
|
||
| const downloadFile = (path) => { | ||
| const url = `/api/servers/sftp-download?serverId=${session.server}&identityId=${session.identity}&path=${path}&sessionToken=${sessionToken}`; | ||
| const link = document.createElement("a"); | ||
| link.href = url; | ||
| link.download = path.split("/").pop(); | ||
| document.body.appendChild(link); | ||
| link.click(); | ||
| } | ||
|
|
||
| const readFileChunk = (file, start, end) => { | ||
| return new Promise((resolve, reject) => { | ||
| const reader = new FileReader(); | ||
| reader.onload = () => { | ||
| resolve(btoa(new Uint8Array(reader.result).reduce((acc, byte) => acc + String.fromCharCode(byte), ""))); | ||
| }; | ||
| reader.onerror = reject; | ||
| reader.readAsArrayBuffer(file.slice(start, end)); | ||
| }); | ||
| }; | ||
|
|
||
| const uploadFileChunks = async (file) => { | ||
| sendOperation(0x2, { path: directory + "/" + file.name }); | ||
|
|
||
| const totalChunks = Math.ceil(file.size / CHUNK_SIZE); | ||
| for (let i = 0; i < totalChunks; i++) { | ||
| const start = i * CHUNK_SIZE; | ||
| const end = Math.min(start + CHUNK_SIZE, file.size); | ||
| const chunk = await readFileChunk(file, start, end); | ||
|
|
||
| setUploadProgress((i + 1) / totalChunks * 100); | ||
| sendOperation(0x3, { chunk }); | ||
| } | ||
|
|
||
| sendOperation(0x4); | ||
| }; | ||
|
|
||
| const uploadFile = async () => { | ||
| const fileInput = document.createElement("input"); | ||
| fileInput.type = "file"; | ||
| fileInput.onchange = async () => { | ||
| const file = fileInput.files[0]; | ||
| await uploadFileChunks(file); | ||
| setUploadProgress(0); | ||
| }; | ||
| fileInput.click(); | ||
| }; | ||
|
|
||
| const processMessage = async (event) => { | ||
| const data = await event.data.text(); | ||
| const operation = data.charCodeAt(0); | ||
|
|
||
| let payload; | ||
| try { | ||
| payload = JSON.parse(data.slice(1)); | ||
| } catch (ignored) {} | ||
|
|
||
| switch (operation) { | ||
| case 0x0: | ||
| case 0x5: | ||
| case 0x4: | ||
| case 0x6: | ||
| case 0x7: | ||
| case 0x8: | ||
| listFiles(); | ||
| break; | ||
| case 0x1: | ||
| setItems(payload.files); | ||
| break; | ||
| } | ||
| }; | ||
|
|
||
| const { sendMessage } = useWebSocket(url, { | ||
| onError: () => disconnectFromServer(session.id), | ||
| onMessage: processMessage, | ||
| shouldReconnect: () => true, | ||
| }); | ||
|
|
||
| const sendOperation = (operation, payload) => { | ||
| const encoder = new TextEncoder(); | ||
| const operationBytes = new Uint8Array([operation]); | ||
| const payloadBytes = encoder.encode(JSON.stringify(payload)); | ||
|
|
||
| const message = new Uint8Array(operationBytes.length + payloadBytes.length); | ||
| message.set(operationBytes); | ||
| message.set(payloadBytes, operationBytes.length); | ||
|
|
||
| sendMessage(message); | ||
| }; | ||
|
|
||
| const createFolder = (folderName) => { | ||
| sendOperation(0x5, { path: directory + "/" + folderName }); | ||
| }; | ||
|
|
||
| const listFiles = () => { | ||
| sendOperation(0x1, { path: directory }); | ||
| }; | ||
|
|
||
| const changeDirectory = (newDirectory) => { | ||
| if (newDirectory === directory) return; | ||
|
|
||
| if (historyIndex === history.length - 1) { | ||
| setHistory([...history, newDirectory]); | ||
| } else { | ||
| setHistory(history.slice(0, historyIndex + 1).concat(newDirectory)); | ||
| } | ||
|
|
||
| setHistoryIndex(historyIndex + 1); | ||
| setDirectory(newDirectory); | ||
| }; | ||
|
|
||
| const goBack = () => { | ||
| if (historyIndex > 0) { | ||
| const newIndex = historyIndex - 1; | ||
| setHistoryIndex(newIndex); | ||
| setDirectory(history[newIndex]); | ||
| } | ||
| }; | ||
|
|
||
| const goForward = () => { | ||
| if (historyIndex < history.length - 1) { | ||
| const newIndex = historyIndex + 1; | ||
| setHistoryIndex(newIndex); | ||
| setDirectory(history[newIndex]); | ||
| } | ||
| }; | ||
|
|
||
| const handleDrag = async (e) => { | ||
| e.preventDefault(); | ||
| e.stopPropagation(); | ||
|
|
||
| const { type } = e; | ||
|
|
||
| if (type === "dragover") { | ||
| setDragging(true); | ||
| } | ||
|
|
||
| if (type === "dragleave" && !dropZoneRef.current.contains(e.relatedTarget)) { | ||
| setDragging(false); | ||
| } | ||
|
|
||
| if (type === "drop") { | ||
| setDragging(false); | ||
|
|
||
| const files = e.dataTransfer.files; | ||
| for (let i = 0; i < files.length; i++) { | ||
| await uploadFileChunks(files[i]); | ||
| } | ||
|
|
||
| setUploadProgress(0); | ||
| } | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| listFiles(); | ||
| }, [directory]); | ||
|
|
||
| return ( | ||
| <div className="file-renderer" ref={dropZoneRef} onDragOver={handleDrag} onDragLeave={handleDrag} | ||
| onDrop={handleDrag}> | ||
| <div className="drag-overlay" style={{ display: dragging && currentFile === null ? "flex" : "none" }}> | ||
| <div className="drag-item"> | ||
| <Icon path={mdiCloudUpload} /> | ||
| <h2>Drop files to upload</h2> | ||
| </div> | ||
| </div> | ||
| {currentFile === null && ( | ||
| <div className="file-manager"> | ||
| <CreateFolderDialog open={folderDialogOpen} onClose={() => setFolderDialogOpen(false)} createFolder={createFolder} /> | ||
| <ActionBar path={directory} updatePath={changeDirectory} createFolder={() => setFolderDialogOpen(true)} | ||
| uploadFile={uploadFile} goBack={goBack} goForward={goForward} historyIndex={historyIndex} | ||
| historyLength={history.length} /> | ||
| <FileList items={items} path={directory} updatePath={changeDirectory} sendOperation={sendOperation} | ||
| downloadFile={downloadFile} setCurrentFile={setCurrentFile} /> | ||
| </div> | ||
| )} | ||
| {currentFile !== null && ( | ||
| <FileEditor currentFile={currentFile} serverId={session.server} identityId={session.identity} | ||
| setCurrentFile={setCurrentFile} sendOperation={sendOperation} /> | ||
| )} | ||
| {uploadProgress > 0 && <div className="upload-progress" style={{ width: `${uploadProgress}%` }} />} | ||
| </div> | ||
| ); | ||
| }; |
Oops, something went wrong.