--- a/src/ingest/IngestDrop.ts	Sat Apr 15 16:12:26 2023 -0700
+++ b/src/ingest/IngestDrop.ts	Sat Apr 15 17:23:03 2023 -0700
@@ -3,14 +3,58 @@
 
 @customElement("ingest-drop")
 export class IngestDrop extends LitElement {
-
   static styles = [
     css`
+      #drop {
+        min-width: 10em;
+        min-height: 10em;
+        background: gray;
+        border: 5px gray dashed;
+        margin: 1% 10%;
+      }
+      #drop.dnd-hover {
+        background: yellow;
+      }
     `,
   ];
   render() {
-    return html`
-    <div id="drop">Drop video urls here</div>
-    `;
+    return html` <div id="drop" @dragover=${this.dragover} @dragleave=${this.leave} @drop=${this.drop}>Drop video url here</div> `;
+  }
+  dragover(ev: DragEvent) {
+    this.shadowRoot?.querySelector("#drop")?.classList.add("dnd-hover");
+    ev.preventDefault();
+    if (ev.dataTransfer) {
+      ev.dataTransfer.dropEffect = "copy";
+    }
+  }
+  leave() {
+    this.shadowRoot?.querySelector("#drop")?.classList.remove("dnd-hover");
+  }
+  drop(ev: DragEvent) {
+    ev.preventDefault();
+    this.leave();
+
+    if (!ev.dataTransfer) {
+      return;
+    }
+
+    for (let i = 0; i < ev.dataTransfer.files.length; i++) {
+      const f = ev.dataTransfer.files[i];
+      const name = f.name;
+      const stream = f.stream();
+      fetch("../api/ingest/videoUpload?name=" + encodeURIComponent(f.name), {
+        method: "POST",
+        body: stream,
+        duplex: "half",
+      });
+    }
+
+    const url = ev.dataTransfer.getData("text/plain");
+    if (url) {
+      fetch("../api/ingest/videoUrl", {
+        method: "POST",
+        body: url,
+      });
+    }
   }
 }