diff --git a/.env b/.env
index 6a5cc6e..f13e629 100644
--- a/.env
+++ b/.env
@@ -1,3 +1,2 @@
 MONGOURI=mongodb://jheuel:bla@localhost/?retryWrites=true&w=majority
-API_ROOT=http://localhost:8080
 SECRET=mila-likes-the-ol-moonwalk-and-that-is-how-she-rolls-bla-bla-bla
diff --git a/backend/migrations/00000000000000_diesel_initial_setup/down.sql b/backend/migrations/00000000000000_diesel_initial_setup/down.sql
deleted file mode 100644
index a9f5260..0000000
--- a/backend/migrations/00000000000000_diesel_initial_setup/down.sql
+++ /dev/null
@@ -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();
diff --git a/backend/migrations/00000000000000_diesel_initial_setup/up.sql b/backend/migrations/00000000000000_diesel_initial_setup/up.sql
deleted file mode 100644
index d68895b..0000000
--- a/backend/migrations/00000000000000_diesel_initial_setup/up.sql
+++ /dev/null
@@ -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;
diff --git a/backend/migrations/2022-04-12-165834_create_photos/down.sql b/backend/migrations/2022-04-12-165834_create_photos/down.sql
deleted file mode 100644
index 5b73e6f..0000000
--- a/backend/migrations/2022-04-12-165834_create_photos/down.sql
+++ /dev/null
@@ -1 +0,0 @@
-DROP TABLE pictures
diff --git a/backend/migrations/2022-04-12-165834_create_photos/up.sql b/backend/migrations/2022-04-12-165834_create_photos/up.sql
deleted file mode 100644
index 52ce61b..0000000
--- a/backend/migrations/2022-04-12-165834_create_photos/up.sql
+++ /dev/null
@@ -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
-)
diff --git a/backend/src/main.rs b/backend/src/main.rs
index a5a7aec..a95f135 100644
--- a/backend/src/main.rs
+++ b/backend/src/main.rs
@@ -92,8 +92,14 @@ async fn main() -> std::io::Result<()> {
 
     HttpServer::new(move || {
         let cors = Cors::default()
-            .allowed_origin("http://localhost:8080")
-            .allowed_origin_fn(|origin, _req_head| origin.as_bytes().starts_with(b"localhost"))
+            .allowed_origin_fn(|origin, _req_head| {
+                origin
+                    .as_bytes()
+                    .windows("localhost".len())
+                    .filter(|&x| x == "localhost".as_bytes())
+                    .count()
+                    > 0
+            })
             .allowed_methods(vec!["GET", "POST"])
             .allowed_headers(vec![http::header::AUTHORIZATION, http::header::ACCEPT])
             .allowed_header(http::header::CONTENT_TYPE)
diff --git a/frontend/src/app.css b/frontend/src/app.css
index 208d16d..6df26a0 100644
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -1 +1,5 @@
 body {}
+
+.dragover_highlight {
+    background-color: rgb(215, 215, 215);
+}
diff --git a/frontend/src/components/home.js b/frontend/src/components/home.js
index 1c50812..0f97c50 100644
--- a/frontend/src/components/home.js
+++ b/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));
+}
diff --git a/frontend/src/components/home.rs b/frontend/src/components/home.rs
index 3c330e4..6f98fd3 100644
--- a/frontend/src/components/home.rs
+++ b/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);
+                    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);
@@ -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;
 }
diff --git a/frontend/src/gallery/grid.rs b/frontend/src/gallery/grid.rs
index 5634eaf..299bbec 100644
--- a/frontend/src/gallery/grid.rs
+++ b/frontend/src/gallery/grid.rs
@@ -19,6 +19,9 @@ pub fn grid(props: &GridProps) -> Html {
     let target_height = 100;
     let container_width = if props.width == 0 { 0 } else { props.width - 4 };
     let margin = 2;
+    if container_width == 0 {
+        return html! {};
+    }
     let dimensions = compute_row_layout(
         container_width,
         target_height,
diff --git a/frontend/src/services/mod.rs b/frontend/src/services/mod.rs
index c77484f..346bedb 100644
--- a/frontend/src/services/mod.rs
+++ b/frontend/src/services/mod.rs
@@ -9,7 +9,6 @@ use gloo_storage::{LocalStorage, Storage};
 use lazy_static::lazy_static;
 use parking_lot::RwLock;
 
-const API_ROOT: &str = dotenv!("API_ROOT");
 const TOKEN_KEY: &str = "jheuel-token";
 
 lazy_static! {
diff --git a/frontend/src/services/requests.rs b/frontend/src/services/requests.rs
index 345c9d1..0cd9739 100644
--- a/frontend/src/services/requests.rs
+++ b/frontend/src/services/requests.rs
@@ -1,4 +1,3 @@
-use super::API_ROOT;
 use crate::error::Error;
 use crate::types;
 use gloo_net::http::{Method, Request as GlooRequest};
@@ -7,7 +6,6 @@ use weblog::console_log;
 pub struct Request(Option<GlooRequest>);
 
 fn request<B: serde::Serialize>(method: gloo_net::http::Method, url: &str, body: &B) -> Request {
-    let url = format!("{}{}", API_ROOT, url);
     let builder = GlooRequest::new(&url)
         .method(method)
         .header("Content-Type", "application/json");
@@ -56,12 +54,10 @@ impl Request {
 }
 
 pub fn request_delete(url: &str) -> Request {
-    let url = format!("{}{}", API_ROOT, url);
     Request(Some(GlooRequest::new(&url).method(Method::DELETE))).set_token()
 }
 
 pub fn request_get(url: &str) -> Request {
-    let url = format!("{}{}", API_ROOT, url);
     Request(Some(GlooRequest::new(&url).method(Method::GET))).set_token()
 }