64 lines
2.2 KiB
TypeScript
64 lines
2.2 KiB
TypeScript
"use client"; // Mark as client component
|
|
|
|
import { Separator } from "@radix-ui/react-dropdown-menu";
|
|
import { useState } from "react";
|
|
|
|
export default function DatabaseSettings() {
|
|
const [uploadStatus, setUploadStatus] = useState<string | null>(null);
|
|
|
|
// Handle form submission
|
|
const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
|
|
event.preventDefault(); // Prevent default form submission
|
|
|
|
const formData = new FormData(event.currentTarget);
|
|
|
|
try {
|
|
const response = await fetch("/api/db/upload", {
|
|
method: "POST",
|
|
body: formData,
|
|
});
|
|
|
|
if (response.ok) {
|
|
setUploadStatus("Database uploaded successfully!");
|
|
} else {
|
|
const error = await response.json();
|
|
setUploadStatus(error.message || "An error occurred during upload.");
|
|
}
|
|
} catch (error) {
|
|
console.error("Error uploading the database:", error);
|
|
setUploadStatus("An error occurred during upload.");
|
|
}
|
|
};
|
|
|
|
return (
|
|
<><div className="mb-8 flex w-full flex-col sm:flex-row">
|
|
<div className="mb-4 w-full text-lg font-medium sm:w-1/3">
|
|
Upload SQLite Database
|
|
</div>
|
|
<div className="w-full">
|
|
<div className="mb-2">
|
|
<form onSubmit={handleSubmit} encType="multipart/form-data">
|
|
<input type="file" name="sqliteFile" accept=".db" required />
|
|
<button type="submit">Upload</button>
|
|
</form>
|
|
{uploadStatus && <p>{uploadStatus}</p>}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="mb-8 flex w-full flex-col sm:flex-row">
|
|
<div className="mb-4 w-full text-lg font-medium sm:w-1/3">
|
|
Download SQLite Database
|
|
</div>
|
|
<div className="w-full">
|
|
<div className="mb-2">
|
|
<a href="/api/db/download" download>
|
|
<button>Download</button>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|