From 2ca4566fa5dc932136f2452e9f1f3a80ba966bd8 Mon Sep 17 00:00:00 2001
From: Rodrigo Verdiani <rocverdiani@gmail.com>
Date: Tue, 24 Mar 2026 18:16:33 -0300
Subject: [PATCH] feat: Implement presigned S3 upload for manga imports,
 updating the manual import dialog

---
 package-lock.json                             | 740 ++++++++++++++++++
 package.json                                  |   1 +
 src/api/generated/api.schemas.ts              |  21 +-
 src/api/generated/content/content.ts          |  69 +-
 src/components/ui/progress.tsx                |  29 +
 .../components/MangaManualImportDialog.tsx    | 211 +++--
 6 files changed, 1000 insertions(+), 71 deletions(-)
 create mode 100644 src/components/ui/progress.tsx

diff --git a/package-lock.json b/package-lock.json
index db0df53..3782cec 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -27,6 +27,7 @@
 				"lucide-react": "^0.548.0",
 				"next-themes": "^0.4.6",
 				"orval": "^7.13.2",
+				"radix-ui": "^1.4.3",
 				"react": "^19.1.1",
 				"react-country-flag": "^3.1.0",
 				"react-dom": "^19.1.1",
@@ -1467,6 +1468,88 @@
 			"integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==",
 			"license": "MIT"
 		},
+		"node_modules/@radix-ui/react-accessible-icon": {
+			"version": "1.1.7",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-accessible-icon/-/react-accessible-icon-1.1.7.tgz",
+			"integrity": "sha512-XM+E4WXl0OqUJFovy6GjmxxFyx9opfCAIUku4dlKRd5YEPqt4kALOkQOp0Of6reHuUkJuiPBEc5k0o4z4lTC8A==",
+			"license": "MIT",
+			"dependencies": {
+				"@radix-ui/react-visually-hidden": "1.2.3"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-accordion": {
+			"version": "1.2.12",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-accordion/-/react-accordion-1.2.12.tgz",
+			"integrity": "sha512-T4nygeh9YE9dLRPhAHSeOZi7HBXo+0kYIPJXayZfvWOWA0+n3dESrZbjfDPUABkUNym6Hd+f2IR113To8D2GPA==",
+			"license": "MIT",
+			"dependencies": {
+				"@radix-ui/primitive": "1.1.3",
+				"@radix-ui/react-collapsible": "1.1.12",
+				"@radix-ui/react-collection": "1.1.7",
+				"@radix-ui/react-compose-refs": "1.1.2",
+				"@radix-ui/react-context": "1.1.2",
+				"@radix-ui/react-direction": "1.1.1",
+				"@radix-ui/react-id": "1.1.1",
+				"@radix-ui/react-primitive": "2.1.3",
+				"@radix-ui/react-use-controllable-state": "1.2.2"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-alert-dialog": {
+			"version": "1.1.15",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-alert-dialog/-/react-alert-dialog-1.1.15.tgz",
+			"integrity": "sha512-oTVLkEw5GpdRe29BqJ0LSDFWI3qu0vR1M0mUkOQWDIUnY/QIkLpgDMWuKxP94c2NAC2LGcgVhG1ImF3jkZ5wXw==",
+			"license": "MIT",
+			"dependencies": {
+				"@radix-ui/primitive": "1.1.3",
+				"@radix-ui/react-compose-refs": "1.1.2",
+				"@radix-ui/react-context": "1.1.2",
+				"@radix-ui/react-dialog": "1.1.15",
+				"@radix-ui/react-primitive": "2.1.3",
+				"@radix-ui/react-slot": "1.2.3"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/@radix-ui/react-arrow": {
 			"version": "1.1.7",
 			"resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.7.tgz",
@@ -1490,6 +1573,29 @@
 				}
 			}
 		},
+		"node_modules/@radix-ui/react-aspect-ratio": {
+			"version": "1.1.7",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-aspect-ratio/-/react-aspect-ratio-1.1.7.tgz",
+			"integrity": "sha512-Yq6lvO9HQyPwev1onK1daHCHqXVLzPhSVjmsNjCa2Zcxy2f7uJD2itDtxknv6FzAKCwD1qQkeVDmX/cev13n/g==",
+			"license": "MIT",
+			"dependencies": {
+				"@radix-ui/react-primitive": "2.1.3"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/@radix-ui/react-avatar": {
 			"version": "1.1.10",
 			"resolved": "https://registry.npmjs.org/@radix-ui/react-avatar/-/react-avatar-1.1.10.tgz",
@@ -1517,6 +1623,36 @@
 				}
 			}
 		},
+		"node_modules/@radix-ui/react-checkbox": {
+			"version": "1.3.3",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.3.3.tgz",
+			"integrity": "sha512-wBbpv+NQftHDdG86Qc0pIyXk5IR3tM8Vd0nWLKDcX8nNn4nXFOFwsKuqw2okA/1D/mpaAkmuyndrPJTYDNZtFw==",
+			"license": "MIT",
+			"dependencies": {
+				"@radix-ui/primitive": "1.1.3",
+				"@radix-ui/react-compose-refs": "1.1.2",
+				"@radix-ui/react-context": "1.1.2",
+				"@radix-ui/react-presence": "1.1.5",
+				"@radix-ui/react-primitive": "2.1.3",
+				"@radix-ui/react-use-controllable-state": "1.2.2",
+				"@radix-ui/react-use-previous": "1.1.1",
+				"@radix-ui/react-use-size": "1.1.1"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/@radix-ui/react-collapsible": {
 			"version": "1.1.12",
 			"resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.1.12.tgz",
@@ -1603,6 +1739,34 @@
 				}
 			}
 		},
+		"node_modules/@radix-ui/react-context-menu": {
+			"version": "2.2.16",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-context-menu/-/react-context-menu-2.2.16.tgz",
+			"integrity": "sha512-O8morBEW+HsVG28gYDZPTrT9UUovQUlJue5YO836tiTJhuIWBm/zQHc7j388sHWtdH/xUZurK9olD2+pcqx5ww==",
+			"license": "MIT",
+			"dependencies": {
+				"@radix-ui/primitive": "1.1.3",
+				"@radix-ui/react-context": "1.1.2",
+				"@radix-ui/react-menu": "2.1.16",
+				"@radix-ui/react-primitive": "2.1.3",
+				"@radix-ui/react-use-callback-ref": "1.1.1",
+				"@radix-ui/react-use-controllable-state": "1.2.2"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/@radix-ui/react-dialog": {
 			"version": "1.1.15",
 			"resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.15.tgz",
@@ -1750,6 +1914,65 @@
 				}
 			}
 		},
+		"node_modules/@radix-ui/react-form": {
+			"version": "0.1.8",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-form/-/react-form-0.1.8.tgz",
+			"integrity": "sha512-QM70k4Zwjttifr5a4sZFts9fn8FzHYvQ5PiB19O2HsYibaHSVt9fH9rzB0XZo/YcM+b7t/p7lYCT/F5eOeF5yQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@radix-ui/primitive": "1.1.3",
+				"@radix-ui/react-compose-refs": "1.1.2",
+				"@radix-ui/react-context": "1.1.2",
+				"@radix-ui/react-id": "1.1.1",
+				"@radix-ui/react-label": "2.1.7",
+				"@radix-ui/react-primitive": "2.1.3"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-hover-card": {
+			"version": "1.1.15",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-hover-card/-/react-hover-card-1.1.15.tgz",
+			"integrity": "sha512-qgTkjNT1CfKMoP0rcasmlH2r1DAiYicWsDsufxl940sT2wHNEWWv6FMWIQXWhVdmC1d/HYfbhQx60KYyAtKxjg==",
+			"license": "MIT",
+			"dependencies": {
+				"@radix-ui/primitive": "1.1.3",
+				"@radix-ui/react-compose-refs": "1.1.2",
+				"@radix-ui/react-context": "1.1.2",
+				"@radix-ui/react-dismissable-layer": "1.1.11",
+				"@radix-ui/react-popper": "1.2.8",
+				"@radix-ui/react-portal": "1.1.9",
+				"@radix-ui/react-presence": "1.1.5",
+				"@radix-ui/react-primitive": "2.1.3",
+				"@radix-ui/react-use-controllable-state": "1.2.2"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/@radix-ui/react-id": {
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.1.tgz",
@@ -1831,6 +2054,175 @@
 				}
 			}
 		},
+		"node_modules/@radix-ui/react-menubar": {
+			"version": "1.1.16",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-menubar/-/react-menubar-1.1.16.tgz",
+			"integrity": "sha512-EB1FktTz5xRRi2Er974AUQZWg2yVBb1yjip38/lgwtCVRd3a+maUoGHN/xs9Yv8SY8QwbSEb+YrxGadVWbEutA==",
+			"license": "MIT",
+			"dependencies": {
+				"@radix-ui/primitive": "1.1.3",
+				"@radix-ui/react-collection": "1.1.7",
+				"@radix-ui/react-compose-refs": "1.1.2",
+				"@radix-ui/react-context": "1.1.2",
+				"@radix-ui/react-direction": "1.1.1",
+				"@radix-ui/react-id": "1.1.1",
+				"@radix-ui/react-menu": "2.1.16",
+				"@radix-ui/react-primitive": "2.1.3",
+				"@radix-ui/react-roving-focus": "1.1.11",
+				"@radix-ui/react-use-controllable-state": "1.2.2"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-navigation-menu": {
+			"version": "1.2.14",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-navigation-menu/-/react-navigation-menu-1.2.14.tgz",
+			"integrity": "sha512-YB9mTFQvCOAQMHU+C/jVl96WmuWeltyUEpRJJky51huhds5W2FQr1J8D/16sQlf0ozxkPK8uF3niQMdUwZPv5w==",
+			"license": "MIT",
+			"dependencies": {
+				"@radix-ui/primitive": "1.1.3",
+				"@radix-ui/react-collection": "1.1.7",
+				"@radix-ui/react-compose-refs": "1.1.2",
+				"@radix-ui/react-context": "1.1.2",
+				"@radix-ui/react-direction": "1.1.1",
+				"@radix-ui/react-dismissable-layer": "1.1.11",
+				"@radix-ui/react-id": "1.1.1",
+				"@radix-ui/react-presence": "1.1.5",
+				"@radix-ui/react-primitive": "2.1.3",
+				"@radix-ui/react-use-callback-ref": "1.1.1",
+				"@radix-ui/react-use-controllable-state": "1.2.2",
+				"@radix-ui/react-use-layout-effect": "1.1.1",
+				"@radix-ui/react-use-previous": "1.1.1",
+				"@radix-ui/react-visually-hidden": "1.2.3"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-one-time-password-field": {
+			"version": "0.1.8",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-one-time-password-field/-/react-one-time-password-field-0.1.8.tgz",
+			"integrity": "sha512-ycS4rbwURavDPVjCb5iS3aG4lURFDILi6sKI/WITUMZ13gMmn/xGjpLoqBAalhJaDk8I3UbCM5GzKHrnzwHbvg==",
+			"license": "MIT",
+			"dependencies": {
+				"@radix-ui/number": "1.1.1",
+				"@radix-ui/primitive": "1.1.3",
+				"@radix-ui/react-collection": "1.1.7",
+				"@radix-ui/react-compose-refs": "1.1.2",
+				"@radix-ui/react-context": "1.1.2",
+				"@radix-ui/react-direction": "1.1.1",
+				"@radix-ui/react-primitive": "2.1.3",
+				"@radix-ui/react-roving-focus": "1.1.11",
+				"@radix-ui/react-use-controllable-state": "1.2.2",
+				"@radix-ui/react-use-effect-event": "0.0.2",
+				"@radix-ui/react-use-is-hydrated": "0.1.0",
+				"@radix-ui/react-use-layout-effect": "1.1.1"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-password-toggle-field": {
+			"version": "0.1.3",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-password-toggle-field/-/react-password-toggle-field-0.1.3.tgz",
+			"integrity": "sha512-/UuCrDBWravcaMix4TdT+qlNdVwOM1Nck9kWx/vafXsdfj1ChfhOdfi3cy9SGBpWgTXwYCuboT/oYpJy3clqfw==",
+			"license": "MIT",
+			"dependencies": {
+				"@radix-ui/primitive": "1.1.3",
+				"@radix-ui/react-compose-refs": "1.1.2",
+				"@radix-ui/react-context": "1.1.2",
+				"@radix-ui/react-id": "1.1.1",
+				"@radix-ui/react-primitive": "2.1.3",
+				"@radix-ui/react-use-controllable-state": "1.2.2",
+				"@radix-ui/react-use-effect-event": "0.0.2",
+				"@radix-ui/react-use-is-hydrated": "0.1.0"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-popover": {
+			"version": "1.1.15",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.1.15.tgz",
+			"integrity": "sha512-kr0X2+6Yy/vJzLYJUPCZEc8SfQcf+1COFoAqauJm74umQhta9M7lNJHP7QQS3vkvcGLQUbWpMzwrXYwrYztHKA==",
+			"license": "MIT",
+			"dependencies": {
+				"@radix-ui/primitive": "1.1.3",
+				"@radix-ui/react-compose-refs": "1.1.2",
+				"@radix-ui/react-context": "1.1.2",
+				"@radix-ui/react-dismissable-layer": "1.1.11",
+				"@radix-ui/react-focus-guards": "1.1.3",
+				"@radix-ui/react-focus-scope": "1.1.7",
+				"@radix-ui/react-id": "1.1.1",
+				"@radix-ui/react-popper": "1.2.8",
+				"@radix-ui/react-portal": "1.1.9",
+				"@radix-ui/react-presence": "1.1.5",
+				"@radix-ui/react-primitive": "2.1.3",
+				"@radix-ui/react-slot": "1.2.3",
+				"@radix-ui/react-use-controllable-state": "1.2.2",
+				"aria-hidden": "^1.2.4",
+				"react-remove-scroll": "^2.6.3"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/@radix-ui/react-popper": {
 			"version": "1.2.8",
 			"resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.8.tgz",
@@ -1934,6 +2326,62 @@
 				}
 			}
 		},
+		"node_modules/@radix-ui/react-progress": {
+			"version": "1.1.7",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-progress/-/react-progress-1.1.7.tgz",
+			"integrity": "sha512-vPdg/tF6YC/ynuBIJlk1mm7Le0VgW6ub6J2UWnTQ7/D23KXcPI1qy+0vBkgKgd38RCMJavBXpB83HPNFMTb0Fg==",
+			"license": "MIT",
+			"dependencies": {
+				"@radix-ui/react-context": "1.1.2",
+				"@radix-ui/react-primitive": "2.1.3"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-radio-group": {
+			"version": "1.3.8",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-radio-group/-/react-radio-group-1.3.8.tgz",
+			"integrity": "sha512-VBKYIYImA5zsxACdisNQ3BjCBfmbGH3kQlnFVqlWU4tXwjy7cGX8ta80BcrO+WJXIn5iBylEH3K6ZTlee//lgQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@radix-ui/primitive": "1.1.3",
+				"@radix-ui/react-compose-refs": "1.1.2",
+				"@radix-ui/react-context": "1.1.2",
+				"@radix-ui/react-direction": "1.1.1",
+				"@radix-ui/react-presence": "1.1.5",
+				"@radix-ui/react-primitive": "2.1.3",
+				"@radix-ui/react-roving-focus": "1.1.11",
+				"@radix-ui/react-use-controllable-state": "1.2.2",
+				"@radix-ui/react-use-previous": "1.1.1",
+				"@radix-ui/react-use-size": "1.1.1"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/@radix-ui/react-roving-focus": {
 			"version": "1.1.11",
 			"resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.11.tgz",
@@ -1965,6 +2413,37 @@
 				}
 			}
 		},
+		"node_modules/@radix-ui/react-scroll-area": {
+			"version": "1.2.10",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-scroll-area/-/react-scroll-area-1.2.10.tgz",
+			"integrity": "sha512-tAXIa1g3sM5CGpVT0uIbUx/U3Gs5N8T52IICuCtObaos1S8fzsrPXG5WObkQN3S6NVl6wKgPhAIiBGbWnvc97A==",
+			"license": "MIT",
+			"dependencies": {
+				"@radix-ui/number": "1.1.1",
+				"@radix-ui/primitive": "1.1.3",
+				"@radix-ui/react-compose-refs": "1.1.2",
+				"@radix-ui/react-context": "1.1.2",
+				"@radix-ui/react-direction": "1.1.1",
+				"@radix-ui/react-presence": "1.1.5",
+				"@radix-ui/react-primitive": "2.1.3",
+				"@radix-ui/react-use-callback-ref": "1.1.1",
+				"@radix-ui/react-use-layout-effect": "1.1.1"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/@radix-ui/react-select": {
 			"version": "2.2.6",
 			"resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.2.6.tgz",
@@ -2031,6 +2510,39 @@
 				}
 			}
 		},
+		"node_modules/@radix-ui/react-slider": {
+			"version": "1.3.6",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-slider/-/react-slider-1.3.6.tgz",
+			"integrity": "sha512-JPYb1GuM1bxfjMRlNLE+BcmBC8onfCi60Blk7OBqi2MLTFdS+8401U4uFjnwkOr49BLmXxLC6JHkvAsx5OJvHw==",
+			"license": "MIT",
+			"dependencies": {
+				"@radix-ui/number": "1.1.1",
+				"@radix-ui/primitive": "1.1.3",
+				"@radix-ui/react-collection": "1.1.7",
+				"@radix-ui/react-compose-refs": "1.1.2",
+				"@radix-ui/react-context": "1.1.2",
+				"@radix-ui/react-direction": "1.1.1",
+				"@radix-ui/react-primitive": "2.1.3",
+				"@radix-ui/react-use-controllable-state": "1.2.2",
+				"@radix-ui/react-use-layout-effect": "1.1.1",
+				"@radix-ui/react-use-previous": "1.1.1",
+				"@radix-ui/react-use-size": "1.1.1"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/@radix-ui/react-slot": {
 			"version": "1.2.3",
 			"resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
@@ -2108,6 +2620,157 @@
 				}
 			}
 		},
+		"node_modules/@radix-ui/react-toast": {
+			"version": "1.2.15",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-toast/-/react-toast-1.2.15.tgz",
+			"integrity": "sha512-3OSz3TacUWy4WtOXV38DggwxoqJK4+eDkNMl5Z/MJZaoUPaP4/9lf81xXMe1I2ReTAptverZUpbPY4wWwWyL5g==",
+			"license": "MIT",
+			"dependencies": {
+				"@radix-ui/primitive": "1.1.3",
+				"@radix-ui/react-collection": "1.1.7",
+				"@radix-ui/react-compose-refs": "1.1.2",
+				"@radix-ui/react-context": "1.1.2",
+				"@radix-ui/react-dismissable-layer": "1.1.11",
+				"@radix-ui/react-portal": "1.1.9",
+				"@radix-ui/react-presence": "1.1.5",
+				"@radix-ui/react-primitive": "2.1.3",
+				"@radix-ui/react-use-callback-ref": "1.1.1",
+				"@radix-ui/react-use-controllable-state": "1.2.2",
+				"@radix-ui/react-use-layout-effect": "1.1.1",
+				"@radix-ui/react-visually-hidden": "1.2.3"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-toggle": {
+			"version": "1.1.10",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-toggle/-/react-toggle-1.1.10.tgz",
+			"integrity": "sha512-lS1odchhFTeZv3xwHH31YPObmJn8gOg7Lq12inrr0+BH/l3Tsq32VfjqH1oh80ARM3mlkfMic15n0kg4sD1poQ==",
+			"license": "MIT",
+			"dependencies": {
+				"@radix-ui/primitive": "1.1.3",
+				"@radix-ui/react-primitive": "2.1.3",
+				"@radix-ui/react-use-controllable-state": "1.2.2"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-toggle-group": {
+			"version": "1.1.11",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-toggle-group/-/react-toggle-group-1.1.11.tgz",
+			"integrity": "sha512-5umnS0T8JQzQT6HbPyO7Hh9dgd82NmS36DQr+X/YJ9ctFNCiiQd6IJAYYZ33LUwm8M+taCz5t2ui29fHZc4Y6Q==",
+			"license": "MIT",
+			"dependencies": {
+				"@radix-ui/primitive": "1.1.3",
+				"@radix-ui/react-context": "1.1.2",
+				"@radix-ui/react-direction": "1.1.1",
+				"@radix-ui/react-primitive": "2.1.3",
+				"@radix-ui/react-roving-focus": "1.1.11",
+				"@radix-ui/react-toggle": "1.1.10",
+				"@radix-ui/react-use-controllable-state": "1.2.2"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-toolbar": {
+			"version": "1.1.11",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-toolbar/-/react-toolbar-1.1.11.tgz",
+			"integrity": "sha512-4ol06/1bLoFu1nwUqzdD4Y5RZ9oDdKeiHIsntug54Hcr1pgaHiPqHFEaXI1IFP/EsOfROQZ8Mig9VTIRza6Tjg==",
+			"license": "MIT",
+			"dependencies": {
+				"@radix-ui/primitive": "1.1.3",
+				"@radix-ui/react-context": "1.1.2",
+				"@radix-ui/react-direction": "1.1.1",
+				"@radix-ui/react-primitive": "2.1.3",
+				"@radix-ui/react-roving-focus": "1.1.11",
+				"@radix-ui/react-separator": "1.1.7",
+				"@radix-ui/react-toggle-group": "1.1.11"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-tooltip": {
+			"version": "1.2.8",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.2.8.tgz",
+			"integrity": "sha512-tY7sVt1yL9ozIxvmbtN5qtmH2krXcBCfjEiCgKGLqunJHvgvZG2Pcl2oQ3kbcZARb1BGEHdkLzcYGO8ynVlieg==",
+			"license": "MIT",
+			"dependencies": {
+				"@radix-ui/primitive": "1.1.3",
+				"@radix-ui/react-compose-refs": "1.1.2",
+				"@radix-ui/react-context": "1.1.2",
+				"@radix-ui/react-dismissable-layer": "1.1.11",
+				"@radix-ui/react-id": "1.1.1",
+				"@radix-ui/react-popper": "1.2.8",
+				"@radix-ui/react-portal": "1.1.9",
+				"@radix-ui/react-presence": "1.1.5",
+				"@radix-ui/react-primitive": "2.1.3",
+				"@radix-ui/react-slot": "1.2.3",
+				"@radix-ui/react-use-controllable-state": "1.2.2",
+				"@radix-ui/react-visually-hidden": "1.2.3"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/@radix-ui/react-use-callback-ref": {
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz",
@@ -7166,6 +7829,83 @@
 			],
 			"license": "MIT"
 		},
+		"node_modules/radix-ui": {
+			"version": "1.4.3",
+			"resolved": "https://registry.npmjs.org/radix-ui/-/radix-ui-1.4.3.tgz",
+			"integrity": "sha512-aWizCQiyeAenIdUbqEpXgRA1ya65P13NKn/W8rWkcN0OPkRDxdBVLWnIEDsS2RpwCK2nobI7oMUSmexzTDyAmA==",
+			"license": "MIT",
+			"dependencies": {
+				"@radix-ui/primitive": "1.1.3",
+				"@radix-ui/react-accessible-icon": "1.1.7",
+				"@radix-ui/react-accordion": "1.2.12",
+				"@radix-ui/react-alert-dialog": "1.1.15",
+				"@radix-ui/react-arrow": "1.1.7",
+				"@radix-ui/react-aspect-ratio": "1.1.7",
+				"@radix-ui/react-avatar": "1.1.10",
+				"@radix-ui/react-checkbox": "1.3.3",
+				"@radix-ui/react-collapsible": "1.1.12",
+				"@radix-ui/react-collection": "1.1.7",
+				"@radix-ui/react-compose-refs": "1.1.2",
+				"@radix-ui/react-context": "1.1.2",
+				"@radix-ui/react-context-menu": "2.2.16",
+				"@radix-ui/react-dialog": "1.1.15",
+				"@radix-ui/react-direction": "1.1.1",
+				"@radix-ui/react-dismissable-layer": "1.1.11",
+				"@radix-ui/react-dropdown-menu": "2.1.16",
+				"@radix-ui/react-focus-guards": "1.1.3",
+				"@radix-ui/react-focus-scope": "1.1.7",
+				"@radix-ui/react-form": "0.1.8",
+				"@radix-ui/react-hover-card": "1.1.15",
+				"@radix-ui/react-label": "2.1.7",
+				"@radix-ui/react-menu": "2.1.16",
+				"@radix-ui/react-menubar": "1.1.16",
+				"@radix-ui/react-navigation-menu": "1.2.14",
+				"@radix-ui/react-one-time-password-field": "0.1.8",
+				"@radix-ui/react-password-toggle-field": "0.1.3",
+				"@radix-ui/react-popover": "1.1.15",
+				"@radix-ui/react-popper": "1.2.8",
+				"@radix-ui/react-portal": "1.1.9",
+				"@radix-ui/react-presence": "1.1.5",
+				"@radix-ui/react-primitive": "2.1.3",
+				"@radix-ui/react-progress": "1.1.7",
+				"@radix-ui/react-radio-group": "1.3.8",
+				"@radix-ui/react-roving-focus": "1.1.11",
+				"@radix-ui/react-scroll-area": "1.2.10",
+				"@radix-ui/react-select": "2.2.6",
+				"@radix-ui/react-separator": "1.1.7",
+				"@radix-ui/react-slider": "1.3.6",
+				"@radix-ui/react-slot": "1.2.3",
+				"@radix-ui/react-switch": "1.2.6",
+				"@radix-ui/react-tabs": "1.1.13",
+				"@radix-ui/react-toast": "1.2.15",
+				"@radix-ui/react-toggle": "1.1.10",
+				"@radix-ui/react-toggle-group": "1.1.11",
+				"@radix-ui/react-toolbar": "1.1.11",
+				"@radix-ui/react-tooltip": "1.2.8",
+				"@radix-ui/react-use-callback-ref": "1.1.1",
+				"@radix-ui/react-use-controllable-state": "1.2.2",
+				"@radix-ui/react-use-effect-event": "0.0.2",
+				"@radix-ui/react-use-escape-keydown": "1.1.1",
+				"@radix-ui/react-use-is-hydrated": "0.1.0",
+				"@radix-ui/react-use-layout-effect": "1.1.1",
+				"@radix-ui/react-use-size": "1.1.1",
+				"@radix-ui/react-visually-hidden": "1.2.3"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/react": {
 			"version": "19.2.0",
 			"resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz",
diff --git a/package.json b/package.json
index c73b35d..659567b 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
 		"lucide-react": "^0.548.0",
 		"next-themes": "^0.4.6",
 		"orval": "^7.13.2",
+		"radix-ui": "^1.4.3",
 		"react": "^19.1.1",
 		"react-country-flag": "^3.1.0",
 		"react-dom": "^19.1.1",
diff --git a/src/api/generated/api.schemas.ts b/src/api/generated/api.schemas.ts
index 0a5607b..304a5d8 100644
--- a/src/api/generated/api.schemas.ts
+++ b/src/api/generated/api.schemas.ts
@@ -38,6 +38,25 @@ export interface FileImportRequestDTO {
   files?: Blob[];
 }
 
+export interface PresignedImportRequestDTO {
+  malId?: number;
+  aniListId?: number;
+  /** @minLength 1 */
+  originalFilename: string;
+}
+
+export interface DefaultResponseDTOPresignedImportResponseDTO {
+  timestamp?: string;
+  data?: PresignedImportResponseDTO;
+  message?: string;
+}
+
+export interface PresignedImportResponseDTO {
+  jobId?: number;
+  presignedUrl?: string;
+  fileKey?: string;
+}
+
 export interface AuthenticationRequestDTO {
   email: string;
   password: string;
@@ -173,9 +192,9 @@ export interface PageMangaListDTO {
 
 export interface PageableObject {
   offset?: number;
+  paged?: boolean;
   pageNumber?: number;
   pageSize?: number;
-  paged?: boolean;
   unpaged?: boolean;
   sort?: SortObject;
 }
diff --git a/src/api/generated/content/content.ts b/src/api/generated/content/content.ts
index ff5e554..b44e74e 100644
--- a/src/api/generated/content/content.ts
+++ b/src/api/generated/content/content.ts
@@ -26,9 +26,11 @@ import type {
 import type {
   DefaultResponseDTOListMangaContentDTO,
   DefaultResponseDTOMangaContentImagesDTO,
+  DefaultResponseDTOPresignedImportResponseDTO,
   DefaultResponseDTOVoid,
   DownloadContentArchiveParams,
-  FileImportRequestDTO
+  FileImportRequestDTO,
+  PresignedImportRequestDTO
 } from '../api.schemas';
 
 import { customInstance } from '../../api';
@@ -180,6 +182,71 @@ export const useImportContentFiles = <TError = unknown,
       return useMutation(mutationOptions, queryClient);
     }
     /**
+ * Generates a presigned URL to upload a file directly to S3 and registers a pending import job.
+ * @summary Request presigned URL for import
+ */
+export const requestPresignedImport = (
+    presignedImportRequestDTO: PresignedImportRequestDTO,
+ options?: SecondParameter<typeof customInstance>,signal?: AbortSignal
+) => {
+      
+      
+      return customInstance<DefaultResponseDTOPresignedImportResponseDTO>(
+      {url: `/content/import/presigned`, method: 'POST',
+      headers: {'Content-Type': 'application/json', },
+      data: presignedImportRequestDTO, signal
+    },
+      options);
+    }
+  
+
+
+export const getRequestPresignedImportMutationOptions = <TError = unknown,
+    TContext = unknown>(options?: { mutation?:UseMutationOptions<Awaited<ReturnType<typeof requestPresignedImport>>, TError,{data: PresignedImportRequestDTO}, TContext>, request?: SecondParameter<typeof customInstance>}
+): UseMutationOptions<Awaited<ReturnType<typeof requestPresignedImport>>, TError,{data: PresignedImportRequestDTO}, TContext> => {
+
+const mutationKey = ['requestPresignedImport'];
+const {mutation: mutationOptions, request: requestOptions} = options ?
+      options.mutation && 'mutationKey' in options.mutation && options.mutation.mutationKey ?
+      options
+      : {...options, mutation: {...options.mutation, mutationKey}}
+      : {mutation: { mutationKey, }, request: undefined};
+
+      
+
+
+      const mutationFn: MutationFunction<Awaited<ReturnType<typeof requestPresignedImport>>, {data: PresignedImportRequestDTO}> = (props) => {
+          const {data} = props ?? {};
+
+          return  requestPresignedImport(data,requestOptions)
+        }
+
+        
+
+
+  return  { mutationFn, ...mutationOptions }}
+
+    export type RequestPresignedImportMutationResult = NonNullable<Awaited<ReturnType<typeof requestPresignedImport>>>
+    export type RequestPresignedImportMutationBody = PresignedImportRequestDTO
+    export type RequestPresignedImportMutationError = unknown
+
+    /**
+ * @summary Request presigned URL for import
+ */
+export const useRequestPresignedImport = <TError = unknown,
+    TContext = unknown>(options?: { mutation?:UseMutationOptions<Awaited<ReturnType<typeof requestPresignedImport>>, TError,{data: PresignedImportRequestDTO}, TContext>, request?: SecondParameter<typeof customInstance>}
+ , queryClient?: QueryClient): UseMutationResult<
+        Awaited<ReturnType<typeof requestPresignedImport>>,
+        TError,
+        {data: PresignedImportRequestDTO},
+        TContext
+      > => {
+
+      const mutationOptions = getRequestPresignedImportMutationOptions(options);
+
+      return useMutation(mutationOptions, queryClient);
+    }
+    /**
  * Retrieve the content for a specific manga/content provider combination.
  * @summary Get the content for a specific manga/content provider combination
  */
diff --git a/src/components/ui/progress.tsx b/src/components/ui/progress.tsx
new file mode 100644
index 0000000..af2ccf5
--- /dev/null
+++ b/src/components/ui/progress.tsx
@@ -0,0 +1,29 @@
+import * as React from "react"
+import { Progress as ProgressPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Progress({
+  className,
+  value,
+  ...props
+}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
+  return (
+    <ProgressPrimitive.Root
+      data-slot="progress"
+      className={cn(
+        "relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
+        className
+      )}
+      {...props}
+    >
+      <ProgressPrimitive.Indicator
+        data-slot="progress-indicator"
+        className="h-full w-full flex-1 bg-primary transition-all"
+        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+      />
+    </ProgressPrimitive.Root>
+  )
+}
+
+export { Progress }
diff --git a/src/features/home/components/MangaManualImportDialog.tsx b/src/features/home/components/MangaManualImportDialog.tsx
index 878f3eb..765baf7 100644
--- a/src/features/home/components/MangaManualImportDialog.tsx
+++ b/src/features/home/components/MangaManualImportDialog.tsx
@@ -12,7 +12,9 @@ import {
 	DialogTitle,
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
-import {useImportContentFiles} from "@/api/generated/content/content.ts";
+import { Progress } from "@/components/ui/progress";
+import axios from "axios";
+import { useRequestPresignedImport } from "@/api/generated/content/content.ts";
 
 interface MangaManualImportDialogProps {
 	fileImportDialogOpen: boolean;
@@ -27,46 +29,74 @@ export const MangaManualImportDialog = ({
 	const [aniListId, setAniListId] = useState("");
 	const [dragActive, setDragActive] = useState(false);
 	const [files, setFiles] = useState<File[] | null>(null);
+	const [isUploading, setIsUploading] = useState(false);
+	const [uploadProgress, setUploadProgress] = useState<Record<string, number>>({});
 
-	const { mutate, isPending } = useImportContentFiles({
-		mutation: {
-			onSuccess: () => {
-				setFiles(null);
-				setMalId("");
-				onFileImportDialogOpenChange(false);
-				toast.success("Manga imported successfully!");
-			},
-			onError: () => toast.error("Failed to import manga."),
-		},
-	});
+	const { mutateAsync: requestPresignedUrl } = useRequestPresignedImport();
 
-	const handleFileImport = () => {
-		if (!files) {
-			alert("Please select one or more files to upload");
+	const handleFileImport = async () => {
+		if (!files || files.length === 0) {
+			toast.error("Please select one or more files to upload");
 			return;
 		}
 
 		if (!malId.trim() && !aniListId.trim()) {
-			alert("Please enter either a AniList or a MyAnimeList ID");
+			toast.error("Please enter either an AniList or a MyAnimeList ID");
 			return;
 		}
 
-		// let id = malId;
-		//
-		// if (!/^\d+$/.test(malId)) {
-		// 	const regex =
-		// 		/https?:\/\/(?:www\.)?myanimelist\.net\/(manga)\/(\d+)(?:\/|$)/i;
-		// 	const match = malId.match(regex);
-		//
-		// 	if (match) {
-		// 		id = match[2];
-		// 	} else {
-		// 		alert("Invalid MyAnimeList URL or ID");
-		// 		return;
-		// 	}
-		// }
+		setIsUploading(true);
+		setUploadProgress({});
+		let hasError = false;
 
-		mutate({ data: { malId: malId, aniListId: aniListId, files: files } });
+		for (const file of files) {
+			try {
+				const response = await requestPresignedUrl({
+					data: {
+						malId: malId ? Number(malId) : undefined,
+						aniListId: aniListId ? Number(aniListId) : undefined,
+						originalFilename: file.name,
+					},
+				});
+
+				const presignedUrl = response?.data?.presignedUrl;
+				if (!presignedUrl) {
+					throw new Error("Failed to get presigned URL");
+				}
+
+				await axios.put(presignedUrl, file, {
+					headers: {
+						"Content-Type": "",
+					},
+					onUploadProgress: (progressEvent) => {
+						if (progressEvent.total) {
+							const percentCompleted = Math.round(
+								(progressEvent.loaded * 100) / progressEvent.total,
+							);
+							setUploadProgress((prev) => ({
+								...prev,
+								[file.name]: percentCompleted,
+							}));
+						}
+					},
+				});
+			} catch (error) {
+				console.error(`Error uploading ${file.name}:`, error);
+				hasError = true;
+				toast.error(`Failed to import ${file.name}`);
+			}
+		}
+
+		setIsUploading(false);
+
+		if (!hasError) {
+			setFiles(null);
+			setMalId("");
+			setAniListId("");
+			setUploadProgress({});
+			onFileImportDialogOpenChange(false);
+			toast.success("Manga imported successfully! Backend will process it.");
+		}
 	};
 
 	const handleDrag = (e: React.DragEvent) => {
@@ -118,6 +148,7 @@ export const MangaManualImportDialog = ({
 							value={aniListId}
 							onChange={(e) => setAniListId(e.target.value)}
 							className="mt-2"
+							disabled={isUploading}
 						/>
 					</div>
 					<div>
@@ -129,59 +160,101 @@ export const MangaManualImportDialog = ({
 							value={malId}
 							onChange={(e) => setMalId(e.target.value)}
 							className="mt-2"
+							disabled={isUploading}
 						/>
 					</div>
-					<div>
-						<label className="text-sm font-medium">Upload File</label>
-						<div
-							onDragEnter={handleDrag}
-							onDragLeave={handleDrag}
-							onDragOver={handleDrag}
-							onDrop={handleDrop}
-							className={`mt-2 rounded-lg border-2 border-dashed p-6 text-center transition-colors ${
-								dragActive
-									? "border-primary bg-primary/5"
-									: "border-muted-foreground/25"
-							}`}
-						>
-							<input
-								type="file"
-								id="file-input"
-								onChange={handleFileSelect}
-								className="hidden"
-								multiple
-								accept=".cbz"
-							/>
-							<label htmlFor="file-input" className="cursor-pointer">
-								<div className="flex flex-col items-center gap-2">
-									<FileUp className="h-8 w-8 text-muted-foreground" />
-									<div>
-										<p className="text-sm font-medium">
-											{files
-												? files.map((file) => file.name).join(", ")
-												: "Drag and drop your files here"}
-										</p>
-										<p className="text-xs text-muted-foreground">
-											or click to select (.CBZ, .CBR)
-										</p>
+					{!isUploading && (
+						<div>
+							<label className="text-sm font-medium">Upload File</label>
+							<div
+								onDragEnter={handleDrag}
+								onDragLeave={handleDrag}
+								onDragOver={handleDrag}
+								onDrop={handleDrop}
+								className={`mt-2 rounded-lg border-2 border-dashed p-6 text-center transition-colors ${dragActive
+										? "border-primary bg-primary/5"
+										: "border-muted-foreground/25"
+									}`}
+							>
+								<input
+									type="file"
+									id="file-input"
+									onChange={handleFileSelect}
+									className="hidden"
+									multiple
+									accept=".cbz"
+								/>
+								<label htmlFor="file-input" className="cursor-pointer">
+									<div className="flex flex-col items-center gap-2">
+										<FileUp className="h-8 w-8 text-muted-foreground" />
+										<div>
+											<p className="text-sm font-medium">
+												{files
+													? files.map((file) => file.name).join(", ")
+													: "Drag and drop your files here"}
+											</p>
+											<p className="text-xs text-muted-foreground">
+												or click to select (.CBZ, .CBR)
+											</p>
+										</div>
 									</div>
-								</div>
-							</label>
+								</label>
+							</div>
 						</div>
-					</div>
+					)}
+					{isUploading && files && files.length > 0 && (
+						<div className="space-y-4 rounded-lg bg-muted p-4">
+							<div className="space-y-1">
+								<div className="flex justify-between text-sm font-medium">
+									<span>Overall Progress</span>
+									<span>
+										{Math.round(
+											files.reduce(
+												(acc, file) => acc + (uploadProgress[file.name] || 0),
+												0,
+											) / files.length,
+										)}
+										%
+									</span>
+								</div>
+								<Progress
+									value={
+										files.reduce(
+											(acc, file) => acc + (uploadProgress[file.name] || 0),
+											0,
+										) / files.length
+									}
+								/>
+							</div>
+							<div className="space-y-3">
+								{files.map((file) => (
+									<div key={file.name} className="space-y-1">
+										<div className="flex justify-between text-xs text-muted-foreground">
+											<span className="truncate pr-4 max-w-[200px]" title={file.name}>
+												{file.name}
+											</span>
+											<span>{uploadProgress[file.name] || 0}%</span>
+										</div>
+										<Progress value={uploadProgress[file.name] || 0} />
+									</div>
+								))}
+							</div>
+						</div>
+					)}
 				</div>
 				<DialogFooter>
 					<Button
-						disabled={isPending}
+						disabled={isUploading}
 						variant="outline"
 						onClick={() => {
 							setFiles(null);
+							setUploadProgress({});
 							onFileImportDialogOpenChange(false);
 						}}
 					>
 						Cancel
 					</Button>
-					<Button disabled={isPending} onClick={handleFileImport}>
+					<Button disabled={isUploading} onClick={handleFileImport}>
 						Import
 					</Button>
 				</DialogFooter>
-- 
2.49.1