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 Router from "next/router";
import { NEXT_PUBLIC_WEBAPP_URL } from "@documenso/lib";
import toast from "react-hot-toast";
type FormValues = {
document: File;
@ -66,16 +67,25 @@ const DashboardPage: NextPageWithLayout = () => {
const body = new FormData();
const document = event.target.files[0];
body.append("document", document || "");
const response: any = await fetch("/api/documents", {
method: "POST",
body,
}).then((response: Response) => {
response.json().then((createdDocumentIdFromBody) => {
Router.push(
`${NEXT_PUBLIC_WEBAPP_URL}/documents/${createdDocumentIdFromBody}`
);
const response: any = await toast
.promise(
fetch("/api/documents", {
method: "POST",
body,
}),
{
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 { useRouter } from "next/router";
import { NEXT_PUBLIC_WEBAPP_URL } from "@documenso/lib/constants";
import toast from "react-hot-toast";
const DocumentsPage: NextPageWithLayout = (req, res) => {
const router = useRouter();
@ -39,16 +40,25 @@ const DocumentsPage: NextPageWithLayout = (req, res) => {
const body = new FormData();
const document = event.target.files[0];
body.append("document", document || "");
const response: any = await fetch("/api/documents", {
method: "POST",
body,
}).then((response: Response) => {
response.json().then((createdDocumentIdFromBody) => {
router.push(
`${NEXT_PUBLIC_WEBAPP_URL}/documents/${createdDocumentIdFromBody}`
);
const response: any = await toast
.promise(
fetch("/api/documents", {
method: "POST",
body,
}),
{
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>
</Head>
<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="pt-10 max-sm:px-4">
<header>
<h1 className="text-3xl font-bold leading-tight tracking-tight text-gray-900">
Documents
</h1>
</header>
</div>
<header>
<h1 className="text-3xl font-bold leading-tight tracking-tight text-gray-900">
Documents
</h1>
</header>
</div>
<div className="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
<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>
</div>
</div>