From 9b629c8dc089980b6ff7722c126729cce93f44f6 Mon Sep 17 00:00:00 2001
From: Alexander-Ger-Reich
 <50119493+Alexander-Ger-Reich@users.noreply.github.com>
Date: Tue, 9 Dec 2025 23:49:34 +0100
Subject: [PATCH 1/2] Update download.tsx

---
 web/src/pages/desktop/menu/download.tsx | 91 +++++++++++++++++++++----
 1 file changed, 76 insertions(+), 15 deletions(-)

diff --git a/web/src/pages/desktop/menu/download.tsx b/web/src/pages/desktop/menu/download.tsx
index dd21e9a..5839ad1 100644
--- a/web/src/pages/desktop/menu/download.tsx
+++ b/web/src/pages/desktop/menu/download.tsx
@@ -21,6 +21,7 @@ export const DownloadImage = () => {
   const [popoverKey, setPopoverKey] = useState(0);
 
   const inputRef = useRef<InputRef>(null);
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
 
   const intervalId = useRef<NodeJS.Timeout | undefined>(undefined);
 
@@ -110,6 +111,24 @@ export const DownloadImage = () => {
       });
   }
 
+  function handleFileChange(e: React.ChangeEvent<HTMLInputElement>) {
+    setSelectedFile(e.target.files?.[0] ?? null);
+  }
+
+  function upload(file: File | null) {
+    if (!file) return;
+
+    const formData = new FormData();
+    formData.append("file", file);
+
+    console.log(file);
+
+    fetch("/api/download/file", {
+      method: "POST",
+      body: formData,
+    });
+  }
+
   const content = (
     <div key={popoverKey} className="min-w-[300px]">
       <div className="flex items-center justify-between px-1">
@@ -122,21 +141,63 @@ export const DownloadImage = () => {
         <div className="text-red-500">{t('download.disabled')}</div>
       ) : (
         <>
-          <div className="pb-1 text-neutral-500">{t('download.input')}</div>
-          <div className="flex items-center space-x-1">
-            <Input
-              ref={inputRef}
-              value={input}
-              onChange={handleChange}
-              disabled={status === 'in_progress'}
-            />
-            <Button
-              type="primary"
-              onClick={() => download(input)}
-              disabled={status === 'in_progress'}
-            >
-              {t('download.ok')}
-            </Button>
+          <div>
+            <div className="pb-1 text-neutral-500">{t('download.input')}</div>
+            <div className="flex items-center space-x-1">
+              <Input
+                ref={inputRef}
+                value={input}
+                onChange={handleChange}
+                disabled={status === 'in_progress'}
+              />
+              <Button
+                type="primary"
+                onClick={() => download(input)}
+                disabled={status === 'in_progress'}
+              >
+                {t('download.ok')}
+              </Button>
+            </div>
+          </div>
+          <div>
+            <div className="pb-1 text-neutral-500">{t('upload.input')}</div>
+            <div className="flex items-center space-x-1">
+              <div
+                  className={clsx(
+                    "flex flex-col items-center justify-center w-full h-10 border-2 border-solid rounded-xl cursor-pointer transition css-9118ya ant-input-outlined",
+                    "hover:bg-neutral-500"
+                  )}
+                  onDragOver={(e) => {
+                    e.preventDefault();
+                  }}
+                  onDrop={(e) => {
+                    e.preventDefault();
+                    const file = e.dataTransfer.files?.[0] ?? null;
+                    setSelectedFile(file);
+                  }}
+                  onClick={() => document.getElementById("file-upload")?.click()}
+                >
+                <span className="text-neutral-100 text-sm p-1">
+                  {selectedFile ? selectedFile.name : t('download.uploadbox')}
+                </span>
+
+                <Input
+                  id="file-upload"
+                  type="file"
+                  onChange={handleFileChange}
+                  disabled={status === 'in_progress'}
+                  className="hidden"
+                />
+              </div>
+              <Button
+                type="primary"
+                className="h-10 border-2"
+                onClick={() => upload(selectedFile)}
+                disabled={status === 'in_progress' || !selectedFile}
+              >
+                {t('download.ok')}
+              </Button>
+            </div>
           </div>
         </>
       )}

From 3d5c14405c36f6033c9c096d08b2f5fc4b052c7f Mon Sep 17 00:00:00 2001
From: Alexander-Ger-Reich
 <50119493+Alexander-Ger-Reich@users.noreply.github.com>
Date: Wed, 10 Dec 2025 00:10:29 +0100
Subject: [PATCH 2/2] Update en.ts

---
 web/src/i18n/locales/en.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/web/src/i18n/locales/en.ts b/web/src/i18n/locales/en.ts
index b1fc6f5..4bf8ae1 100644
--- a/web/src/i18n/locales/en.ts
+++ b/web/src/i18n/locales/en.ts
@@ -183,7 +183,8 @@ const en = {
       title: 'Image Downloader',
       input: 'Please enter a remote image URL',
       ok: 'Ok',
-      disabled: '/data partition is RO, so we cannot download the image'
+      disabled: '/data partition is RO, so we cannot download the image',
+      uploadbox: "Drop file here or click to select"
     },
     power: {
       title: 'Power',