start work on upload feature

backend/migrations/00000000000000_diesel_initial_setup/down.sql

@@ -1,6 +0,0 @@
--- This file was automatically created by Diesel to setup helper functions
--- and other internal bookkeeping. This file is safe to edit, any future
--- changes will be added to existing projects as new migrations.
-
-DROP FUNCTION IF EXISTS diesel_manage_updated_at(_tbl regclass);
-DROP FUNCTION IF EXISTS diesel_set_updated_at();

backend/migrations/00000000000000_diesel_initial_setup/up.sql

@@ -1,36 +0,0 @@
--- This file was automatically created by Diesel to setup helper functions
--- and other internal bookkeeping. This file is safe to edit, any future
--- changes will be added to existing projects as new migrations.
-
-
-
-
--- Sets up a trigger for the given table to automatically set a column called
--- `updated_at` whenever the row is modified (unless `updated_at` was included
--- in the modified columns)
---
--- # Example
---
--- ```sql
--- CREATE TABLE users (id SERIAL PRIMARY KEY, updated_at TIMESTAMP NOT NULL DEFAULT NOW());
---
--- SELECT diesel_manage_updated_at('users');
--- ```
-CREATE OR REPLACE FUNCTION diesel_manage_updated_at(_tbl regclass) RETURNS VOID AS $$
-BEGIN
-    EXECUTE format('CREATE TRIGGER set_updated_at BEFORE UPDATE ON %s
-                    FOR EACH ROW EXECUTE PROCEDURE diesel_set_updated_at()', _tbl);
-END;
-$$ LANGUAGE plpgsql;
-
-CREATE OR REPLACE FUNCTION diesel_set_updated_at() RETURNS trigger AS $$
-BEGIN
-    IF (
-        NEW IS DISTINCT FROM OLD AND
-        NEW.updated_at IS NOT DISTINCT FROM OLD.updated_at
-    ) THEN
-        NEW.updated_at := current_timestamp;
-    END IF;
-    RETURN NEW;
-END;
-$$ LANGUAGE plpgsql;

backend/migrations/2022-04-12-165834_create_photos/down.sql

@@ -1 +0,0 @@
-DROP TABLE pictures

backend/migrations/2022-04-12-165834_create_photos/up.sql

@@ -1,18 +0,0 @@
-CREATE TABLE pictures (
-  id SERIAL PRIMARY KEY,
-  filepath VARCHAR NOT NULL,
-  created_at INTEGER,
-  focal_length VARCHAR,
-  shutter_speed VARCHAR,
-  width INTEGER NOT NULL,
-  height INTEGER NOT NULL,
-  make VARCHAR,
-  model VARCHAR,
-  lens VARCHAR,
-  orientation VARCHAR,
-  fnumber FLOAT,
-  iso INTEGER,
-  exposure_program VARCHAR,
-  exposure_compensation VARCHAR,
-  thumbnail VARCHAR
-)

frontend/src/app.css

@@ -1 +1,5 @@
 body {}
+
+.dragover_highlight {
+    background-color: rgb(215, 215, 215);
+}

frontend/src/components/home.js

@@ -1,7 +1,9 @@
 function getFilesDataTransferItems(dataTransferItems) {
     function traverseFileTreePromise(item, path = "", folder) {
         return new Promise(resolve => {
-            if (item.isFile) {
+            if (item === null) {
+                // nothing to do
+            } else if (item.isFile) {
                 item.file(file => {
                     file.filepath = path + "/" + file.name; //save full path
                     folder.push(file);
@@ -39,3 +41,7 @@ function getFilesDataTransferItems(dataTransferItems) {
 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));
+}

frontend/src/components/home.rs

@@ -6,7 +6,10 @@ use gloo_net::http::Request;
 use js_sys::Array;
 use serde::{Deserialize, Serialize};
 use wasm_bindgen::{prelude::wasm_bindgen, JsCast, JsValue};
-use web_sys::{DataTransferItemList, File, FileSystemDirectoryEntry, FileSystemEntry};
+use web_sys::{
+    DataTransferItemList, Element, File, FileReader, FileSystemDirectoryEntry, FileSystemEntry,
+    HtmlElement,
+};
 use weblog::console_log;
 use yew::prelude::*;
 use yew_hooks::prelude::*;
@@ -52,8 +55,12 @@ pub fn home() -> Html {
         );
     }
 
+    let drag_node = node.clone();
     let ondrop = Callback::from(move |e: DragEvent| {
         e.prevent_default();
+        if let Some(element) = drag_node.cast::<HtmlElement>() {
+            element.class_list().remove_1("dragover_highlight").unwrap();
+        }
 
         let items = e.data_transfer().unwrap().items();
         wasm_bindgen_futures::spawn_local(async move {
@@ -68,8 +75,11 @@ pub fn home() -> Html {
 
                 if let Ok(fse) = d.clone().dyn_into::<File>() {
                     console_log!(&fse);
-                    // fse.filepath = path;
+                    files.push(fse.clone());
-                    files.push(fse);
+                    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);
@@ -91,7 +101,6 @@ pub fn home() -> Html {
                 console_log!(files.len());
                 let Some(current) = new_files.pop() else {
                     console_log!("break");
-
                     break;
                 };
 
@@ -124,8 +133,29 @@ pub fn home() -> Html {
         });
     });
 
+    let drag_node = node.clone();
+    let ondragenter = Callback::from(move |e: DragEvent| {
+        e.prevent_default();
+        // e.data_transfer().unwrap().set_drop_effect("move");
+        if let Some(element) = drag_node.cast::<HtmlElement>() {
+            element.class_list().remove_1("dragover_highlight").unwrap();
+        }
+    });
+
+    let drag_node = node.clone();
+    let ondragleave = Callback::from(move |e: DragEvent| {
+        e.prevent_default();
+        if let Some(element) = drag_node.cast::<HtmlElement>() {
+            element.class_list().remove_1("dragover_highlight").unwrap();
+        }
+    });
+
+    let drag_node = node.clone();
     let ondragover = Callback::from(move |e: DragEvent| {
         e.prevent_default();
+        if let Some(element) = drag_node.cast::<HtmlElement>() {
+            element.class_list().add_1("dragover_highlight").unwrap();
+        }
     });
 
     let body = if user_ctx.is_authenticated() {
@@ -140,7 +170,7 @@ pub fn home() -> Html {
     };
     html! {
         <BasePage>
-            <div ref={node} {ondrop} {ondragover}>
+            <div ref={node} {ondrop} {ondragenter} {ondragleave} {ondragover}>
                 {body}
             </div>
         </BasePage>
@@ -150,4 +180,5 @@ 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;
 }