leptos

frontend/Cargo.toml

@@ -7,7 +7,7 @@ license = "MIT"
 
 [dependencies]
 console_error_panic_hook = "0.1.6"
-wasm-bindgen = "=0.2.84"
+wasm-bindgen =  "0.2.84"
 wasm-bindgen-futures = "0.4.32"
 gloo-net = "0.2.3"
 gloo-storage = "0.2"
@@ -32,6 +32,7 @@ dotenv = "0.15.0"
 dotenv_codegen = "0.15.0"
 kamadak-exif = "0.5.5"
 image-meta = "0.1.2"
+image = { version = "0.24.5", default-features = false, features = ["gif", "jpeg", "ico", "png", "pnm", "tga", "tiff", "webp", "bmp", "hdr", "dxt", "dds", "farbfeld", "jpeg_rayon"] }
 
 [features]
 default = []

frontend/src/components/home.js

@@ -1,26 +1,52 @@
+function join(a, b) {
+    if (a === "" && b === "") {
+        return "";
+    }
+    if (a === "") return b;
+    if (b === "") return a;
+    return a + "/" + b;
+}
+
+function readEntries(reader) {
+    return new Promise((resolve, reject) => {
+        reader.readEntries(entries => {
+            resolve(entries);
+        }, error => reject(error));
+    })
+}
+
 function getFilesDataTransferItems(dataTransferItems) {
     function traverseFileTreePromise(item, path = "", folder) {
-        return new Promise(resolve => {
+        return new Promise(async resolve => {
             if (item === null || typeof item === 'undefined') {
                 // nothing to do
             } else if (item.isFile) {
                 item.file(file => {
-                    file.filepath = path + file.name; //save full path
+                    file.filepath = join(path, file.name); //save full path
                     folder.push(file);
                     resolve(file);
                 });
             } else if (item.isDirectory) {
                 let dirReader = item.createReader();
-                dirReader.readEntries(entries => {
-                    let entriesPromises = [];
-                    let subfolder = [];
-                    folder.push({ name: item.name, subfolder: subfolder });
-                    for (let entry of entries)
-                        entriesPromises.push(
-                            traverseFileTreePromise(entry, path + "/" + item.name + "/", subfolder)
-                        );
-                    resolve(Promise.all(entriesPromises));
-                });
+                let resultEntries = [];
+
+                let read = async function() {
+                    let entries = await readEntries(dirReader);
+                    if (entries.length > 0) {
+                        resultEntries = resultEntries.concat(entries);
+                        await read();
+                    }
+                }
+                await read();
+
+                let entriesPromises = [];
+                let subfolder = [];
+                folder.push({ name: item.name, subfolder: subfolder });
+                for (let entry of resultEntries)
+                    entriesPromises.push(
+                        traverseFileTreePromise(entry, join(path, item.name), subfolder)
+                    );
+                resolve(Promise.all(entriesPromises));
             }
         });
     }

frontend/src/components/home.rs

@@ -1,23 +1,25 @@
-use std::io::Cursor;
+use std::io::{BufWriter, Cursor};
 
 use super::BasePage;
 use crate::gallery::Grid;
 use crate::hooks::use_user_context;
 use gloo_net::http::Request;
 
+use image::{imageops, io::Reader as ImageReader, ImageOutputFormat};
 use js_sys::{Array, ArrayBuffer, Promise};
 use serde::{Deserialize, Serialize};
+use std::io::{Read, Write};
 use wasm_bindgen::{prelude::wasm_bindgen, JsCast, JsValue};
 use web_sys::{
     DataTransferItemList, Element, File, FileReader, FileSystemDirectoryEntry, FileSystemEntry,
     HtmlElement,
 };
+
+use common::OutputPicture;
 use weblog::console_log;
 use yew::prelude::*;
 use yew_hooks::prelude::*;
 
-use common::OutputPicture;
-
 pub struct MetaData {
     width: u32,
     height: u32,
@@ -150,56 +152,86 @@ pub fn home() -> Html {
             let mut metadata: Vec<MetaData> = Vec::new();
             let mut promises: Vec<Promise> = Vec::new();
             for (file, (key, url)) in files.iter().zip(photos.photos) {
-                console_log!("uploading: ", &file.name(), &url);
+                console_log!("start working on: ", &file.name(), &url);
                 let promise = read_file(file.clone());
                 if let Ok(content) = wasm_bindgen_futures::JsFuture::from(promise).await {
+                    console_log!("start copy");
                     let buffer: ArrayBuffer = content.dyn_into().unwrap();
                     let typed_buffer: js_sys::Uint8Array = js_sys::Uint8Array::new(&buffer);
                     let mut buf = vec![0; typed_buffer.length() as usize];
                     typed_buffer.copy_to(&mut buf);
-                    // console_log!(
-                    //     serde_json::to_string(&buf.len()).unwrap(),
-                    //     serde_json::to_string(&buf).unwrap()
-                    // );
+                    console_log!("stop copy");
+                    let buf = buf;
+
                     let mut md = MetaData {
                         width: 0,
                         height: 0,
                     };
-                    let meta = image_meta::load_from_buf(&buf).unwrap();
-                    console_log!(format!(
-                        "dims: {}x{}",
-                        meta.dimensions.width, meta.dimensions.height
-                    ));
-                    console_log!(format!("animation: {:?}", meta.is_animation()));
-                    console_log!(format!("format: {:?}", meta.format));
-                    md.height = meta.dimensions.height;
-                    md.width = meta.dimensions.width;
+                    console_log!("start meta");
+                    if let Ok(meta) = image_meta::load_from_buf(&buf) {
+                        console_log!(format!(
+                            "dims: {}x{}",
+                            meta.dimensions.width, meta.dimensions.height
+                        ));
+                        console_log!(format!("animation: {:?}", meta.is_animation()));
+                        console_log!(format!("format: {:?}", meta.format));
+                        md.height = meta.dimensions.height;
+                        md.width = meta.dimensions.width;
+                    }
+                    console_log!("stop meta");
 
-                    let exifreader = exif::Reader::new();
-                    let mut cursor = Cursor::new(&buf);
-                    if let Ok(exif) = exifreader.read_from_container(&mut cursor) {
-                        for f in exif.fields() {
-                            console_log!(format!(
-                                "{} {} {}",
-                                f.tag,
-                                f.ifd_num,
-                                f.display_value().with_unit(&exif)
-                            ));
+                    console_log!("start thumb");
+                    if let Ok(reader) = ImageReader::new(Cursor::new(&buf)).with_guessed_format() {
+                        if let Ok(img) = reader.decode() {
+                            console_log!("done reading");
+                            md.height = img.height();
+                            md.width = img.width();
+                            let ratio = img.width() as f32 / img.height() as f32;
+                            let thumb = img.thumbnail((800_f32 * ratio) as u32, 800);
+                            // let thumb = img.resize((800_f32 * ratio) as u32, 800, imageops::FilterType::Nearest);
+                            let mut cursor = Cursor::new(Vec::new());
+                            if thumb
+                                .write_to(&mut cursor, ImageOutputFormat::Jpeg(85))
+                                .is_ok()
+                            {
+                                let thumb_buf = cursor.get_ref();
+                                console_log!("buf", serde_json::to_string(thumb_buf).unwrap());
+                                let array =
+                                    js_sys::Uint8Array::new_with_length(thumb_buf.len() as u32);
+                                console_log!("start copy");
+                                array.copy_from(cursor.get_ref());
+                                console_log!("stop copy");
+                                let promise =
+                                    upload(array.buffer(), "image/jpeg".to_string(), url.clone());
+                                match wasm_bindgen_futures::JsFuture::from(promise).await {
+                                    Ok(result) => console_log!(result),
+                                    Err(e) => console_log!("errooooor", e),
+                                };
+                            } else {
+                                console_log!("Could not create thumbnail.");
+                            }
                         }
                     }
+                    console_log!("stop thumb");
+
+                    // let exifreader = exif::Reader::new();
+                    // let mut cursor = Cursor::new(&buf);
+                    // if let Ok(exif) = exifreader.read_from_container(&mut cursor) {
+                    //     for f in exif.fields() {
+                    //         console_log!(format!(
+                    //             "{} {} {}",
+                    //             f.tag,
+                    //             f.ifd_num,
+                    //             f.display_value().with_unit(&exif)
+                    //         ));
+                    //     }
+                    // }
                     metadata.push(md);
 
-                    promises.push(upload(buffer, file.type_(), url.clone()));
+                    // promises.push(upload(buffer, file.type_(), url.clone()));
                 }
             }
 
-            for promise in promises {
-                match wasm_bindgen_futures::JsFuture::from(promise).await {
-                    Ok(result) => console_log!(result),
-                    Err(e) => console_log!("errooooor", e),
-                };
-            }
-
             let photos: DetailPhotoWrapper = Request::post("/api/photos/upload/done")
                 .json(&DetailPhotoWrapper {
                     photos: uiae

frontend/src/gallery/picture.rs

@@ -47,7 +47,7 @@ pub fn picture(props: &PictureProps) -> Html {
                     let url = Url::create_object_url_with_blob(&blob).unwrap();
 
                     if let Some(element) = node.cast::<HtmlElement>() {
-                        element.set_attribute("src", &url);
+                        element.set_attribute("src", &url).unwrap();
                     }
                 });
                 || ()