Added progress reporting from Rust

Author: HHMagnus

Cargo.lock

@@ -8,4 +8,5 @@ crate-type = ["cdylib", "rlib"]
 
 [dependencies]
 image = "0.25.8"
+js-sys = "0.3.78"
 wasm-bindgen = "0.2.101"

Cargo.toml

@@ -28,12 +28,6 @@
       align-items: center;
     }
 
-    .icon-btn {
-      background-color: var(--main-bg-color);
-      border: 1px solid var(--main-bg-color);
-      margin: 1px;
-    }
-
     #error-message {
       background-color: var(--main-error-color);
       border: 1px solid var(--main-draw-color);
@@ -94,7 +88,11 @@ <h1>Offline Image Converter</h1>
       <li>Everything stays on your device, private and secure</li>
     </ul>
 
-    <p>TODO create field</p>
+    <p>Choose file to convert.</p>
+
+    <input type="file" id="fileInput" accept="image/*" />
+
+    <button id="convertBtn" onclick="convert"></button>
 
     <div id="loader" style="display: none;">
       <span class="loader"></span>

index.html

@@ -1,16 +1,20 @@
 use std::io::Cursor;
 
 use image::{ImageError, ImageFormat};
-use wasm_bindgen::prelude::wasm_bindgen;
+use js_sys::Reflect;
+use wasm_bindgen::{prelude::wasm_bindgen, JsCast, JsValue};
 
 fn map_image_err(err: ImageError) -> String {
     format!("Image processing error: {}", err)
 }
 
 fn convert(image_data: Vec<u8>, output: ImageFormat) -> Result<Vec<u8>, String> {
+	report_progress("Loading image...");
     let img = image::load_from_memory(&image_data).map_err(map_image_err)?;
     let mut output_data: Vec<u8> = Vec::new();
+	report_progress("Converting to new format...");
     img.write_to(&mut Cursor::new(&mut output_data), output).map_err(map_image_err)?;
+	report_progress("Completed conversion.");
     Ok(output_data)
 }
 
@@ -27,4 +31,19 @@ pub fn convert_exposed(image_data: Vec<u8>, output: String) -> Result<Vec<u8>, S
         _ => return Err("Unsupported output format".to_string()),
     } ;
     convert(image_data, output)
+}
+
+fn report_progress(message: &str) {
+    let global = js_sys::global();
+
+    let func = js_sys::Reflect::get(&global, &JsValue::from_str("postMessage"))
+        .unwrap()
+        .dyn_into::<js_sys::Function>()
+        .unwrap();
+
+    let obj = js_sys::Object::new();
+    Reflect::set(&obj, &JsValue::from_str("type"), &JsValue::from_str("progress")).unwrap();
+    Reflect::set(&obj, &JsValue::from_str("message"), &JsValue::from_str(message)).unwrap();
+
+    func.call1(&global, &obj).unwrap();
 }