103 lines
3.1 KiB
TypeScript
103 lines
3.1 KiB
TypeScript
import type { ActionFunctionArgs } from "@remix-run/node";
|
|
import { LoaderFunctionArgs, NodeOnDiskFile, json, redirect, unstable_composeUploadHandlers, unstable_createFileUploadHandler, unstable_createMemoryUploadHandler, unstable_parseMultipartFormData } from "@remix-run/node";
|
|
import { copyFileSync, rmSync } from "node:fs";
|
|
import { useLoaderData } from "@remix-run/react";
|
|
import { Container, Row, Button, Form, Image } from "react-bootstrap";
|
|
|
|
import { enhance } from "~/utils/db.server";
|
|
|
|
export const action = async ({
|
|
request,
|
|
params
|
|
}: ActionFunctionArgs) => {
|
|
const { dbe } = await enhance(request);
|
|
|
|
const id = Number(params.id);
|
|
|
|
const uploadHandler = unstable_composeUploadHandlers(
|
|
unstable_createFileUploadHandler({
|
|
file: ({ filename }) => filename.toLowerCase().replaceAll(" ", "_")
|
|
}),
|
|
// parse everything else into memory
|
|
unstable_createMemoryUploadHandler()
|
|
);
|
|
const parsedForm = await unstable_parseMultipartFormData(
|
|
request,
|
|
uploadHandler
|
|
);
|
|
|
|
const image = parsedForm.get("image") as NodeOnDiskFile;
|
|
|
|
const manufacturer = await dbe.manufacturer.findUnique({select: {image: true, name: true}, where: {id: id}});
|
|
|
|
if(!manufacturer) return redirect("/admin/edit/manufacturer");
|
|
|
|
const newFilename = "/manufacturers/" + manufacturer.name.toLowerCase().replaceAll(" ", "_") + "." + image.name.split('.').pop();
|
|
|
|
try{
|
|
// Remove old image
|
|
if(manufacturer.image) rmSync("public"+ manufacturer.image, {force: true});
|
|
|
|
// Copy the file to the manufacturers folder with the slug as name
|
|
copyFileSync(image.getFilePath(), "public" + newFilename);
|
|
rmSync(image.getFilePath(), {force: true});
|
|
|
|
await dbe.manufacturer.update({data: {image: newFilename}, where: {id: id}});
|
|
|
|
return redirect("/inventory/manufacturer/" + id);
|
|
}
|
|
catch(e){
|
|
console.log(e);
|
|
rmSync(image.getFilePath(), {force: true});
|
|
}
|
|
|
|
return null;
|
|
};
|
|
|
|
export const loader = async ({
|
|
request,
|
|
params
|
|
} : LoaderFunctionArgs) => {
|
|
const { dbe } = await enhance(request);
|
|
|
|
const id = Number(params.id);
|
|
|
|
const manufacturer = await dbe.manufacturer.findUnique({select: {image: true, name: true}, where: {id: id}});
|
|
|
|
if(!manufacturer) return redirect("/admin/edit/manufacturer");
|
|
|
|
return json({manufacturer});
|
|
}
|
|
|
|
export default function EditManufacturerImageRoute() {
|
|
var loaderData = useLoaderData<typeof loader>();
|
|
|
|
return (
|
|
<Container>
|
|
<Row>
|
|
<h1>Edit Manufacturer image ({loaderData.manufacturer.name})</h1>
|
|
|
|
<Form method="POST" encType="multipart/form-data">
|
|
|
|
<Form.Group className="mb-3">
|
|
<Form.Label>Image</Form.Label>
|
|
<Form.Control type="file" name="image" accept="image/*" required/>
|
|
</Form.Group>
|
|
|
|
<Button variant="primary" type="submit">
|
|
Submit
|
|
</Button>
|
|
</Form>
|
|
</Row>
|
|
<Row className="mt-3">
|
|
<h3>Current image</h3>
|
|
{ loaderData.manufacturer.image ? (
|
|
<>
|
|
<p>{loaderData.manufacturer.image}</p>
|
|
<Image src={loaderData.manufacturer.image}></Image>
|
|
</>
|
|
) : "No current image" }
|
|
</Row>
|
|
</Container>
|
|
);
|
|
} |