change file/folder label when choosed

src-tauri/src/main.rs

@@ -2,7 +2,7 @@
 #![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
 
 use native_dialog::FileDialog;
-use tauri::{AppHandle, Manager};
+use tauri::Manager;
 use std::sync::Mutex;
 
 #[macro_use]
@@ -22,15 +22,16 @@ struct Payload {
 // Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
 #[tauri::command]
 async fn select_file_button(app: tauri::AppHandle) {
-    let _ = app.emit_all("my_event", ());
     FILE_PATH.lock().unwrap().replace_range(.., &choose_file());
     println!("{}",FILE_PATH.lock().unwrap());
+    let _ = app.emit_all("file_path_changed", Payload { message: FILE_PATH.lock().unwrap().to_string() });
 }
 
 #[tauri::command]
-async fn select_folder_button() {
+async fn select_folder_button(app: tauri::AppHandle) {
     FOLDER_PATH.lock().unwrap().replace_range(.., &choose_folder());
     println!("{}",FOLDER_PATH.lock().unwrap());
+    let _ = app.emit_all("folder_path_changed", Payload { message: FOLDER_PATH.lock().unwrap().to_string() });
 }
 
 #[tauri::command]
@@ -44,7 +45,7 @@ fn choose_file() -> String{
     let path = FileDialog::new()
         .show_open_single_file()
         .unwrap();
-    format!("{:?}", path) // turn the FileDialog into a string
+    format!("{:?}", path).replace("Some(\"", "").replace("\")", "") // turn the FileDialog into a string and remove Some("")
 }
 
 fn choose_folder() -> String{
@@ -52,7 +53,7 @@ fn choose_folder() -> String{
     let path = FileDialog::new()
         .show_open_single_dir()
         .unwrap();
-    format!("{:?}", path) // turn the FileDialog into a string
+    format!("{:?}", path).replace("Some(\"", "").replace("\")", "") // turn the FileDialog into a string
 }
 
 fn main() {

src/event_handler.js

@@ -2,15 +2,14 @@ const { listen } = window.__TAURI__.event
 
 document.getElementById("fileLocation").innerHTML = "hey";
 
-// listen to the `click` event and get a function to remove the event listener
-// there's also a `once` function that subscribes to an event and automatically unsubscribes the listener on the first event
-const unlisten = await listen('my_event', (event) => {
-  // event.event is the event name (useful if you want to use a single callback fn for multiple event types)
-  // event.payload is the payload object
-  document.getElementById("fileLocation").innerHTML = "hello";
+// listen for file location from rust backend
+const unlistenfile = await listen('file_path_changed', (event) => {
+  document.getElementById("fileLocation").innerHTML = event.payload.message;
+  console.log("changing file label to : ", event.payload.message);
 })
 
-// emits the `click` event with the object payload
-emit('click', {
-  theMessage: 'Tauri is awesome!',
+// listen for folder location from rust backend
+const unlistenfolder = await listen('folder_path_changed', (event) => {
+  document.getElementById("folderLocation").innerHTML = event.payload.message;
+  console.log("changing folder label to : ", event.payload.message);
 })

src/index.html

@@ -16,8 +16,10 @@
     <div class="main-container">
       <h3>Welcome to the Rusty slicer! <img src="assets/cat-vibe-vibe-cat.gif"></h1>
         <div class="select-file">
-          <p><b> Input file </b> <br></p>
+          <div>
+            <p><b> Input file </b></p>
             <p id="fileLocation"> no location choosen </p>
+          </div>
           <button id="fileButton">choose file 📂</button>
         </div>
 
@@ -26,7 +28,10 @@
         </div>
 
         <div class="select-file">
-          <p><b> Output folder </b> <br> no location choosen </p>
+          <div>
+            <p><b> Output folder </b> </p>
+            <p id="folderLocation"> no location choosen </p>
+          </div>
           <button id="folderButton">choose folder 📂</button>
         </div>