From 7cb2a87a7f274f5695ffdd14d083e824c818c1f6 Mon Sep 17 00:00:00 2001
From: Gauthier Roebroeck <gauthier.roebroeck@gmail.com>
Date: Tue, 25 Jan 2022 16:19:01 +0800
Subject: [PATCH] fix(webui): drop poster from browser images

---
 komga-webui/src/components/DropZone.vue | 18 ++++++++++++------
 komga-webui/src/functions/file.ts       |  7 +++++++
 2 files changed, 19 insertions(+), 6 deletions(-)
 create mode 100644 komga-webui/src/functions/file.ts

diff --git a/komga-webui/src/components/DropZone.vue b/komga-webui/src/components/DropZone.vue
index d95d0a44b..d8ee2ee51 100644
--- a/komga-webui/src/components/DropZone.vue
+++ b/komga-webui/src/components/DropZone.vue
@@ -7,16 +7,22 @@
 
 <script lang="ts">
 import Vue from 'vue'
+import {getFileFromUrl} from '@/functions/file'
 
 export default Vue.extend({
   name: 'DropZone',
   methods: {
-    dropHandler(event: Event) {
+    async dropHandler(event: Event) {
       if (event instanceof DragEvent && event.dataTransfer) {
-        const droppedFiles = event.dataTransfer.files
-        if (!droppedFiles) return
-
-        this.$emit('on-input-change', Array.from(droppedFiles))
+        if (event.dataTransfer.files.length > 0)
+          this.$emit('on-input-change', Array.from(event.dataTransfer.files))
+        else {
+          const url = event.dataTransfer.getData('text/uri-list')
+          if (url) {
+            const file = await getFileFromUrl(url)
+            this.$emit('on-input-change', [file])
+          }
+        }
       }
       if (event.target instanceof HTMLInputElement && event.target.files) {
         const selectedFiles = event.target.files
@@ -34,7 +40,7 @@ export default Vue.extend({
 
 <style scoped>
 .drop-zone {
-  background:repeating-linear-gradient(
+  background: repeating-linear-gradient(
     135deg,
     var(--v-base-lighten1),
     var(--v-base-lighten1) 20px,
diff --git a/komga-webui/src/functions/file.ts b/komga-webui/src/functions/file.ts
new file mode 100644
index 000000000..fb094fd3b
--- /dev/null
+++ b/komga-webui/src/functions/file.ts
@@ -0,0 +1,7 @@
+export async function getFileFromUrl(url: string, name: string = url, defaultType = 'image/jpeg') {
+  const response = await fetch(url)
+  const data = await response.blob()
+  return new File([data], name, {
+    type: data.type || defaultType,
+  })
+}