68 lines
1.9 KiB
JavaScript
68 lines
1.9 KiB
JavaScript
import { useLoaderData, Form } from "@remix-run/react";
|
|
import { unstable_createFileUploadHandler, unstable_parseMultipartFormData } from "@remix-run/node";
|
|
import prisma from "~/utils/db.server";
|
|
import { redirect } from "@remix-run/node";
|
|
import { Link } from "@remix-run/react";
|
|
|
|
export async function action({ request }) {
|
|
const clonedData = request.clone();
|
|
const formData = await clonedData.formData();
|
|
const title = formData.get("title");
|
|
const post = formData.get("post");
|
|
|
|
const fileUploadHandler = unstable_createFileUploadHandler({
|
|
directory: './public/uploads/',
|
|
maxPartSize: 500000,
|
|
file: ({ filename }) => filename,
|
|
});
|
|
|
|
const multiPartformdata = await unstable_parseMultipartFormData(request, fileUploadHandler);
|
|
const imageName = multiPartformdata.get("image").name;
|
|
|
|
const newThread = await prisma.thread.create({
|
|
data: {
|
|
title: title,
|
|
post: post,
|
|
imageName: imageName,
|
|
},
|
|
});
|
|
|
|
return redirect(`threads/${newThread.id}`);
|
|
}
|
|
|
|
export async function loader() {
|
|
const data = await prisma.thread.findMany({
|
|
include: {
|
|
posts: true,
|
|
},
|
|
});
|
|
|
|
return data;
|
|
}
|
|
|
|
export default function Index() {
|
|
const data = useLoaderData();
|
|
console.log(data)
|
|
|
|
return (
|
|
<div>
|
|
<Form method="post" encType="multipart/form-data">
|
|
<label htmlFor="">Title: <input required type="text" name="title" /></label>
|
|
<br />
|
|
<label htmlFor="">Post: <input required type="text" name="post" /></label>
|
|
<br />
|
|
<label htmlFor="">Image: <input required accept="image/*" type="file" id="image-upload" name="image" /></label>
|
|
<br />
|
|
<button type="submit">Submit</button>
|
|
</Form>
|
|
<ul>
|
|
{data.map(thread =>
|
|
<li key={thread.id}>
|
|
<Link to={`threads/${thread.id}`}>{thread.title}</Link>
|
|
</li>
|
|
)}
|
|
</ul>
|
|
</div>
|
|
);
|
|
};
|