feat(filebrowser): allow viewing images from browser

ravenclaw900 · Oct 31, 2021 · 921913d · 921913d
1 parent 59bd15e
commit 921913d
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 35 deletions.
diff --git a/src/backend/src/sockets.rs b/src/backend/src/sockets.rs
@@ -198,7 +198,6 @@ async fn browser_refresh(
         .send(Message::text(SerJson::serialize_json(
             &types::BrowserList {
                 contents: systemdata::browser_dir(std::path::Path::new(dir_path)),
-                currentpath: dir_path.to_string(),
             },
         )))
         .await;
@@ -216,7 +215,6 @@ async fn browser_handler(
                 contents: systemdata::browser_dir(std::path::Path::new(
                     &std::env::var_os("HOME").unwrap(),
                 )),
-                currentpath: std::env::var("HOME").unwrap(),
             },
         )))
         .await;
@@ -233,7 +231,6 @@ async fn browser_handler(
                                 contents: systemdata::browser_dir(std::path::Path::new(
                                     &data.args[0],
                                 )),
-                                currentpath: data.args[0].clone(),
                             },
                         )))
                         .await;
@@ -242,13 +239,19 @@ async fn browser_handler(
                     let _send = (*socket_send)
                         .send(Message::text(SerJson::serialize_json(
                             &types::BrowserFileData {
-                                data: std::fs::read_to_string(std::path::Path::new(&data.args[0]))
-                                    .unwrap(),
-                                currentpath: data.args[0].clone(),
+                                textdata: std::fs::read_to_string(std::path::Path::new(
+                                    &data.args[0],
+                                ))
+                                .unwrap(),
                             },
                         )))
                         .await;
                 }
+                "img" => {
+                    let _send = (*socket_send)
+                        .send(Message::binary(std::fs::read(&data.args[0]).unwrap()))
+                        .await;
+                }
                 "save" => {
                     std::fs::write(std::path::Path::new(&data.args[0]), &data.args[1]).unwrap();
                 }

diff --git a/src/backend/src/types.rs b/src/backend/src/types.rs
@@ -105,12 +105,10 @@ pub struct BrowserDirData {
 
 #[derive(SerJson)]
 pub struct BrowserFileData {
-    pub data: String,
-    pub currentpath: String,
+    pub textdata: String,
 }
 
 #[derive(SerJson)]
 pub struct BrowserList {
     pub contents: Vec<BrowserDirData>,
-    pub currentpath: String,
 }
diff --git a/src/frontend/.yarn/install-state.gz b/src/frontend/.yarn/install-state.gz
diff --git a/src/frontend/src/App.svelte b/src/frontend/src/App.svelte
@@ -34,7 +34,7 @@
         services?: services[];
         // File browser page
         contents?: browser[];
-        currentpath?: string;
+        textdata?: string;
         // Global
         update?: string;
     }
@@ -76,12 +76,19 @@
 
     let socket;
     let socketData: socketData = {};
+    let binData = "";
     let shown = false;
     let menu = window.innerWidth > 768;
     let update = "";
 
     const socketMessageListener = (e) => {
-        socketData = JSON.parse(e.data);
+        if (typeof e.data === "string") {
+            socketData = JSON.parse(e.data);
+            binData = "";
+        } else {
+            socketData = {};
+            binData = URL.createObjectURL(e.data);
+        }
         if (socketData.update != undefined) {
             update = socketData.update;
         }
@@ -189,7 +196,7 @@
                         ><Management {socket} {socketData} /></Route
                     >
                     <Route path="browser"
-                        ><FileBrowser {socket} {socketData} /></Route
+                        ><FileBrowser {socket} {socketData} {binData} /></Route
                     >
                     <Route path="service"
                         ><Service {socket} {socketData} /></Route

diff --git a/src/frontend/src/pages/FileBrowser.svelte b/src/frontend/src/pages/FileBrowser.svelte
@@ -22,12 +22,15 @@
 
     export let socket;
     export let socketData: broserList;
+    export let binData;
 
     let fileDataSet = false;
     let pathArray;
     let fileData;
     let fileText;
     let fileDiv;
+    // TODO: better solution than just assuming dashboard is being run by root
+    let currentPath = "/root";
 
     let selPath: browser = {
         name: "",
@@ -38,14 +41,13 @@
         size: 0,
     };
 
-    $: console.log(socketData);
     $: autosize(fileText), autosize.update();
+    $: console.log(binData.length, binData.byteLength);
     // Skip first array element (empty string)
-    $: socketData.currentpath != undefined &&
-        (pathArray = socketData.currentpath.split("/").slice(1));
-    $: socketData.data != undefined &&
+    $: pathArray = currentPath.split("/").slice(1);
+    $: socketData.textdata != undefined &&
         !fileDataSet &&
-        ((fileData = socketData.data), (fileDataSet = true));
+        ((fileData = socketData.textdata), (fileDataSet = true));
     // Set innerText manually to avoid issues with highlighting
     $: fileDiv != undefined &&
         ((fileDiv.innerHTML = fileData
@@ -55,8 +57,8 @@
 
     interface broserList {
         contents?: browser[];
-        data?: string;
-        currentpath: string;
+        textdata?: string;
+        currentpath?: string;
     }
 
     interface browser {
@@ -159,14 +161,15 @@
 </script>
 
 <main class="min-h-full">
-    {#if socketData.contents != undefined || socketData.data != undefined}
+    {#if socketData.contents != undefined || socketData.textdata != undefined || binData != ""}
         <div class="flex">
             <div class="w-11/12">
                 <div class="mb-2 p bg-white dark:bg-black">
                     <button
                         class="btn px-2 focus:outline-none"
                         on:click={() => {
                             sendCmd("/", "cd");
+                            currentPath = "/";
                         }}>/</button
                     >
                     {#each pathArray as path}
@@ -187,6 +190,7 @@
                                         }
                                     }
                                     sendCmd(fullPath, "cd");
+                                    currentPath = fullPath;
                                 }}>{path}</button
                             >
                         {/if}
@@ -213,11 +217,15 @@
                                         case "text":
                                             sendCmd(contents.path, "open");
                                             break;
+                                        case "image":
+                                            sendCmd(contents.path, "img");
+                                            break;
                                         default:
                                             alert(
                                                 "ERROR: can't view that type of file"
                                             );
                                     }
+                                    currentPath = contents.path;
                                 }}
                                 on:click={() => (selPath = contents)}
                             >
@@ -239,7 +247,7 @@
                             </tr>
                         {/each}
                     </table>
-                {:else if socketData.data != undefined}
+                {:else if socketData.textdata != undefined}
                     <div class="flex">
                         <textarea
                             bind:value={fileData}
@@ -254,6 +262,10 @@
                             class="w-full microlight -ml-[100%] font-mono whitespace-pre bg-white dark:bg-black text-sm z-10 tab-4 !overflow-x-scroll p-px"
                         />
                     </div>
+                {:else if binData != ""}
+                    <div>
+                        <img src={binData} alt="Unknown" />
+                    </div>
                 {/if}
             </div>
             <div
@@ -267,10 +279,7 @@
                             let name = prompt(
                                 "Please enter the name of the new directory"
                             );
-                            sendCmd(
-                                socketData.currentpath + "/" + name,
-                                "mkdir"
-                            );
+                            sendCmd(currentPath + "/" + name, "mkdir");
                         }}><Fa icon={faFolderPlus} size="lg" /></span
                     >
                     <span
@@ -280,10 +289,7 @@
                             let name = prompt(
                                 "Please enter the name of the new file"
                             );
-                            sendCmd(
-                                socketData.currentpath + "/" + name,
-                                "mkfile"
-                            );
+                            sendCmd(currentPath + "/" + name, "mkfile");
                         }}><Fa icon={faFileMedical} size="lg" /></span
                     >
                     {#if selPath.path != ""}
@@ -294,10 +300,7 @@
                                 let name = prompt(
                                     "Please enter the new name of the file"
                                 );
-                                rename(
-                                    selPath.path,
-                                    socketData.currentpath + "/" + name
-                                );
+                                rename(selPath.path, currentPath + "/" + name);
                             }}><Fa icon={faICursor} size="lg" /></span
                         >
                         {#if selPath.maintype == "dir"}
@@ -322,10 +325,10 @@
                             >
                         {/if}
                     {/if}
-                {:else if socketData.data != undefined}
+                {:else if socketData.textdata != undefined}
                     <span
                         class="cursor-pointer"
-                        on:click={() => sendFile(socketData.currentpath)}
+                        on:click={() => sendFile(currentPath)}
                         ><Fa icon={faSave} size="lg" /></span
                     >{/if}
             </div>