From 4709e2a0ab1359ed0d3de3f39e7c231367fb6029 Mon Sep 17 00:00:00 2001
From: Johannes Heuel <johannes.heuel@cern.ch>
Date: Sat, 4 Mar 2023 20:26:57 +0100
Subject: [PATCH] implement s3 upload from drag and drop

---
 frontend/src/components/home.js | 41 +++++++++++++++++++++++++++++----
 frontend/src/components/home.rs | 26 +++++++++++++++------
 2 files changed, 55 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/home.js b/frontend/src/components/home.js
index 0f97c50..5502985 100644
--- a/frontend/src/components/home.js
+++ b/frontend/src/components/home.js
@@ -1,7 +1,7 @@
 function getFilesDataTransferItems(dataTransferItems) {
     function traverseFileTreePromise(item, path = "", folder) {
         return new Promise(resolve => {
-            if (item === null) {
+            if (item === null || typeof item === 'undefined') {
                 // nothing to do
             } else if (item.isFile) {
                 item.file(file => {
@@ -28,10 +28,17 @@ function getFilesDataTransferItems(dataTransferItems) {
     let files = [];
     return new Promise((resolve, reject) => {
         let entriesPromises = [];
-        for (let it of dataTransferItems)
+        for (let it of dataTransferItems) {
+            let entry;
+            if (typeof it.webkitGetAsEntry === 'function') {
+                entry = it.webkitGetAsEntry();
+            } else if (typeof it.getAsEntry === 'function') {
+                entry = it.getAsEntry();
+            }
             entriesPromises.push(
-                traverseFileTreePromise(it.webkitGetAsEntry(), "", files)
+                traverseFileTreePromise(entry, "", files)
             );
+        }
         Promise.all(entriesPromises).then(entries => {
             resolve(files);
         });
@@ -42,6 +49,30 @@ export function get_files_data_transfer_items(data_transfer_items) {
     return getFilesDataTransferItems(data_transfer_items);
 }
 
-export function upload_file(file, url) {
-    new Promise(resolve => console.log(file, url));
+function read_file(file) {
+    return new Promise((resolve, reject) => {
+        let reader = new FileReader();
+        reader.onloadend = () => {
+            resolve(reader.result)
+        };
+        reader.onerror = reject;
+        reader.readAsArrayBuffer(file);
+    });
+}
+
+export function upload_file(file, url) {
+    return new Promise(resolve => {
+        console.log("hi");
+        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(response => resolve(response));
+        },
+        reject => console.log(reject));
+    });
 }
diff --git a/frontend/src/components/home.rs b/frontend/src/components/home.rs
index 6f98fd3..6de45dc 100644
--- a/frontend/src/components/home.rs
+++ b/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;
+use js_sys::{Array, Promise};
 use serde::{Deserialize, Serialize};
 use wasm_bindgen::{prelude::wasm_bindgen, JsCast, JsValue};
 use web_sys::{
@@ -76,10 +76,6 @@ pub fn home() -> Html {
                 if let Ok(fse) = d.clone().dyn_into::<File>() {
                     console_log!(&fse);
                     files.push(fse.clone());
-                    wasm_bindgen_futures::spawn_local(async move {
-                        let promise = upload_file(fse, "bla".to_owned());
-                        let _result = wasm_bindgen_futures::JsFuture::from(promise).await.unwrap();
-                    });
                 } else if let Ok(a) = d.clone().dyn_into::<js_sys::Array>() {
                     for i in 0..a.length() {
                         let f = a.get(i);
@@ -108,6 +104,7 @@ pub fn home() -> Html {
                 news.iter().for_each(|x| new_files.push(x.clone()));
                 fs.iter().for_each(|x| files.push(x.clone()));
             }
+
             let uiae: Vec<String> = files
                 .iter()
                 .map(|x| {
@@ -119,8 +116,8 @@ pub fn home() -> Html {
                 })
                 .collect();
             console_log!("end", uiae.join("\n"));
-            let url = "/api/photos/upload";
-            let photos: PhotosUrlsWrapper = Request::post(url)
+
+            let photos: PhotosUrlsWrapper = Request::post("/api/photos/upload")
                 .json(&PhotosWrapper { photos: uiae })
                 .unwrap()
                 .send()
@@ -130,6 +127,21 @@ pub fn home() -> Html {
                 .await
                 .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()));
+            }
+            for promise in promises {
+                match wasm_bindgen_futures::JsFuture::from(promise).await {
+                    Ok(result) => console_log!(result),
+                    _ => console_log!("errooooor"),
+                };
+            }
+            console_log!("all uploaded");
         });
     });