make read file and upload separate js functions

frontend/src/components/home.js

@@ -49,7 +49,7 @@ export function get_files_data_transfer_items(data_transfer_items) {
     return getFilesDataTransferItems(data_transfer_items);
 }
 
-function read_file(file) {
+export function read_file(file) {
     return new Promise((resolve, reject) => {
         let reader = new FileReader();
         reader.onloadend = () => {
@@ -60,23 +60,21 @@ function read_file(file) {
     });
 }
 
-export function upload_file(file, url) {
+export function upload(content, content_type, url) {
     return new Promise((resolve, reject) => {
-        read_file(file).then((content) => {
-            fetch(url, {
-                method: 'PUT',
-                headers: {
-                    'Accept': 'application/json',
-                    'Content-Type': 'multipart/form-data',
-                },
-                body: new Blob([content], { type: file.type }),
-            }).then((resp) => {
-                if (resp.status >= 200 && resp.status < 300) {
-                    resolve(resp);
-                } else {
-                    reject(resp);
-                }
-            });
-        }).catch(error => reject(error));
+        fetch(url, {
+            method: 'PUT',
+            headers: {
+                'Accept': 'application/json',
+                'Content-Type': 'multipart/form-data',
+            },
+            body: new Blob([content], { type: content_type }),
+        }).then((resp) => {
+            if (resp.status >= 200 && resp.status < 300) {
+                resolve(resp);
+            } else {
+                reject(resp);
+            }
+        });
     });
 }

frontend/src/components/home.rs

@@ -3,7 +3,7 @@ use crate::gallery::Grid;
 use crate::hooks::use_user_context;
 use gloo_net::http::Request;
 
-use js_sys::{Array, Promise};
+use js_sys::{Array, ArrayBuffer, Promise};
 use serde::{Deserialize, Serialize};
 use wasm_bindgen::{prelude::wasm_bindgen, JsCast, JsValue};
 use web_sys::{
@@ -128,19 +128,30 @@ pub fn home() -> Html {
                 .unwrap();
             console_log!("{}", serde_json::to_string(&photos).unwrap());
 
-            console_log!("", files.len());
-
             let mut promises: Vec<Promise> = Vec::new();
             for (file, (_, url)) in files.iter().zip(photos.photos) {
                 console_log!("uploading: ", &file.name(), &url);
-                promises.push(upload_file(file.clone(), url.clone()));
+                let promise = read_file(file.clone());
+                if let Ok(content) = wasm_bindgen_futures::JsFuture::from(promise).await {
+                    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()
+                    );
+                    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),
-                    _ => console_log!("errooooor"),
+                    Err(e) => console_log!("errooooor", e),
                 };
             }
+
             console_log!("all uploaded");
         });
     });
@@ -192,5 +203,6 @@ pub fn home() -> Html {
 #[wasm_bindgen(module = "/src/components/home.js")]
 extern "C" {
     fn get_files_data_transfer_items(data_transfer_items: DataTransferItemList) -> js_sys::Promise;
-    fn upload_file(file: File, url: String) -> js_sys::Promise;
+    fn read_file(file: File) -> js_sys::Promise;
+    fn upload(content: ArrayBuffer, content_type: String, url: String) -> js_sys::Promise;
 }