upload ux

This commit is contained in:
Timur Ercan
2023-01-24 18:31:35 +01:00
parent 65ea717ff4
commit d463c45f76
2 changed files with 49 additions and 28 deletions

View File

@ -16,6 +16,7 @@ import {
import { FormProvider, useForm } from "react-hook-form"; import { FormProvider, useForm } from "react-hook-form";
import Router from "next/router"; import Router from "next/router";
import { NEXT_PUBLIC_WEBAPP_URL } from "@documenso/lib"; import { NEXT_PUBLIC_WEBAPP_URL } from "@documenso/lib";
import toast from "react-hot-toast";
type FormValues = { type FormValues = {
document: File; document: File;
@ -66,16 +67,25 @@ const DashboardPage: NextPageWithLayout = () => {
const body = new FormData(); const body = new FormData();
const document = event.target.files[0]; const document = event.target.files[0];
body.append("document", document || ""); body.append("document", document || "");
const response: any = await fetch("/api/documents", { const response: any = await toast
method: "POST", .promise(
body, fetch("/api/documents", {
}).then((response: Response) => { method: "POST",
response.json().then((createdDocumentIdFromBody) => { body,
Router.push( }),
`${NEXT_PUBLIC_WEBAPP_URL}/documents/${createdDocumentIdFromBody}` {
); loading: "Uploading document...",
success: "Document uploaded successfully.",
error: "Could not upload document :/",
}
)
.then((response: Response) => {
response.json().then((createdDocumentIdFromBody) => {
Router.push(
`${NEXT_PUBLIC_WEBAPP_URL}/documents/${createdDocumentIdFromBody}`
);
});
}); });
});
} }
}; };

View File

@ -9,6 +9,7 @@ import { getUserFromToken } from "@documenso/lib/server";
import Link from "next/link"; import Link from "next/link";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { NEXT_PUBLIC_WEBAPP_URL } from "@documenso/lib/constants"; import { NEXT_PUBLIC_WEBAPP_URL } from "@documenso/lib/constants";
import toast from "react-hot-toast";
const DocumentsPage: NextPageWithLayout = (req, res) => { const DocumentsPage: NextPageWithLayout = (req, res) => {
const router = useRouter(); const router = useRouter();
@ -39,16 +40,25 @@ const DocumentsPage: NextPageWithLayout = (req, res) => {
const body = new FormData(); const body = new FormData();
const document = event.target.files[0]; const document = event.target.files[0];
body.append("document", document || ""); body.append("document", document || "");
const response: any = await fetch("/api/documents", { const response: any = await toast
method: "POST", .promise(
body, fetch("/api/documents", {
}).then((response: Response) => { method: "POST",
response.json().then((createdDocumentIdFromBody) => { body,
router.push( }),
`${NEXT_PUBLIC_WEBAPP_URL}/documents/${createdDocumentIdFromBody}` {
); loading: "Uploading document...",
success: "Document uploaded successfully.",
error: "Could not upload document :/",
}
)
.then((response: Response) => {
response.json().then((createdDocumentIdFromBody) => {
router.push(
`${NEXT_PUBLIC_WEBAPP_URL}/documents/${createdDocumentIdFromBody}`
);
});
}); });
});
} }
}; };
@ -58,22 +68,23 @@ const DocumentsPage: NextPageWithLayout = (req, res) => {
<title>Documents | Documenso</title> <title>Documents | Documenso</title>
</Head> </Head>
<div className="px-4 sm:px-6 lg:px-8" hidden={!documents.length}> <div className="px-4 sm:px-6 lg:px-8" hidden={!documents.length}>
<div className="sm:flex sm:items-center"> <div className="sm:flex sm:items-center mt-10">
<div className="sm:flex-auto"> <div className="sm:flex-auto">
<div className="pt-10 max-sm:px-4"> <header>
<header> <h1 className="text-3xl font-bold leading-tight tracking-tight text-gray-900">
<h1 className="text-3xl font-bold leading-tight tracking-tight text-gray-900"> Documents
Documents </h1>
</h1> </header>
</header>
</div>
</div> </div>
<div className="mt-4 sm:mt-0 sm:ml-16 sm:flex-none"> <div className="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
<button <button
type="button" type="button"
className="inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:w-auto" className="inline-flex items-center justify-center rounded-md border border-transparent bg-neon px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-neon-dark focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:w-auto"
onClick={() => {
document?.getElementById("fileUploadHelper")?.click();
}}
> >
Add user Add Document
</button> </button>
</div> </div>
</div> </div>