update uploading method

Author: ehsanghaffar

.env

@@ -4,4 +4,5 @@
 ENV_VARIABLE=production_server_only_variable
 NEXT_PUBLIC_ENV_VARIABLE=production_public_variable
 DB_LOCAL_URL=mongodb://mongo:27017/denizpaz
-PORT=3000
+PORT=3000
+STORE_PATH=upload

.env.development

@@ -3,4 +3,5 @@
 
 DEVELOPMENT_ENV_VARIABLE="server_only_development_variable"
 NEXT_PUBLIC_DEVELOPMENT_ENV_VARIABLE="public_development_variable"
-PORT=3000
+PORT=3000
+STORE_PATH=upload

.env.local.example

@@ -1,4 +1,5 @@
 MONGODB_URI=
 ENV_LOCAL_VARIABLE="server_only_variable_from_env_local"
 NEXT_PUBLIC_ENV_LOCAL_VARIABLE="public_variable_from_env_local"
-PORT=3000
+PORT=3000
+STORE_PATH=upload

.env.production

@@ -4,4 +4,5 @@
 PRODUCTION_ENV_VARIABLE="server_only_production_variable"
 NEXT_PUBLIC_PRODUCTION_ENV_VARIABLE="public_production_variable"
 DB_LOCAL_URL=mongodb://mongo:27017/denizpaz
-PORT=3000
+PORT=3000
+STORE_PATH=upload

app/api/file/[name]/route.ts

@@ -0,0 +1,34 @@
+import { NextRequest, NextResponse } from "next/server";
+import { existsSync } from "fs";
+import fs from "fs/promises";
+import path from "path";
+import mime from "mime/lite";
+
+export async function GET(
+  req: NextRequest,
+  { params }: { params: { name: string } }
+) {
+  const filePath = path.join(
+    process.cwd(),
+    process.env.STORE_PATH!,
+    params.name
+  );
+  if (!existsSync(filePath)) {
+    return NextResponse.json({ msg: "Not found" }, { status: 404 });
+  }
+
+  const mimeType = mime.getType(filePath);
+  const fileStat = await fs.stat(filePath);
+
+  const file = await fs.readFile(filePath);
+
+  const headers: [string, string][] = [
+    ["Content-Length", fileStat.size.toString()],
+  ];
+  if (mimeType) {
+    headers.push(["Content-Type", mimeType]);
+  }
+  return new NextResponse(file, {
+    headers,
+  });
+}

app/api/recipes/route.ts

@@ -5,6 +5,9 @@ import { stat, writeFile } from "fs/promises";
 import { connectToDatabase } from "../../../lib/mongodb";
 import { Recipe } from "../../../models";
 import mime from 'mime';
+import { existsSync } from "fs";
+import fs from "fs/promises";
+import path from "path";
 
 connectToDatabase();
 
@@ -25,33 +28,36 @@ export async function GET() {
 export async function POST(req: Request) {
   const data = await req.formData();
   const file: File | null = data.get('photo') as unknown as File;
-  const bytes = await file.arrayBuffer();
-  
-  const buffer = Buffer.from(await file.arrayBuffer());
-  const relativeUploadDir = `/uploads/recipes`;
-  const uploadDir = join(process.cwd(), "public", relativeUploadDir);
-  await stat(uploadDir);
-  
+
+  const fileArrayBuffer = await file.arrayBuffer();
+  const destinationDirPath = path.join(process.cwd(), process.env.STORE_PATH!);
+
+  if (!existsSync(destinationDirPath)) {
+    await fs.mkdir(destinationDirPath, { recursive: true });
+  }
+
+  let name = data.get('name')
+  var fileExtension = file.name.split('.').pop();
+  let filename = `${name}.${fileExtension}`
+  while (existsSync(path.join(destinationDirPath, filename))) {
+    filename = `(1)` + filename;
+  }
+  await fs.writeFile(
+    path.join(destinationDirPath, filename),
+    Buffer.from(fileArrayBuffer)
+  );
   try {
-    const uniqueSuffix = `${Date.now()}-${Math.round(Math.random() * 1e9)}`;
-    const filename = `${file.name.replace(
-      /\.[^/.]+$/,
-      ""
-    )}-${uniqueSuffix}.${mime.getExtension(file.type)}`;
-    await writeFile(`${uploadDir}/${filename}`, buffer);
-    
     const newRecipe = {
       name: data.get('name'),
       description: data.get('description'),
       ingredients: JSON.parse(data.get('ingredients') as string),
       steps: data.get('steps'),
-      photo: `${relativeUploadDir}/${filename}`
+      photo: `/api/file/${filename}`
     }
 
-    console.log("recipe", newRecipe)
     const recipe = new Recipe(newRecipe);
     const save = await recipe.save();
-    return NextResponse.json({ status: 200, data: save });
+    return NextResponse.json({ status: 200, data: save});
   } catch (error) {
     console.log(error);
     return NextResponse.json('error', {

app/api/revalidate/route.ts

@@ -0,0 +1,8 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { revalidatePath } from 'next/cache'
+ 
+export async function GET(request: NextRequest) {
+  const path = request.nextUrl.searchParams.get('path') || '/'
+  revalidatePath(path)
+  return NextResponse.json({ revalidated: true, now: Date.now() })
+}

components/LatestRecipes.tsx

@@ -19,7 +19,6 @@ const LatestRecipes = ({ limitNumber }: LatestRecipesProps) => {
     GetAllRecipesResponse[] | undefined
   >(undefined);
   const [loading, setLoading] = useState(true);
-
   // تابع get_all_recipes برای دریافت همه‌ی رسپی‌ها
   const get_all_recipes = async () => {
     setLoading(true);

components/RecipeCard.tsx

@@ -8,6 +8,7 @@ import React from "react";
 import Button from "./ui/Button";
 import { Recipe } from "../types/Recipe";
 import { ArrowLeftIcon } from "@heroicons/react/24/solid";
+import path from "path";
 
 // تعریف ویژگی‌های RecipeCardProps
 interface RecipeCardProps {
@@ -16,6 +17,7 @@ interface RecipeCardProps {
 
 // تعریف کامپوننت RecipeCard
 const RecipeCard = ({ recipe }: RecipeCardProps) => {
+  
   return (
     <>
       <Link href={`recipes/${recipe?._id}`}>

develop.Dockerfile

@@ -1,23 +1,24 @@
 FROM node:18-alpine
 
-RUN mkdir -p /usr/src/app
+RUN mkdir -p /app
 
-WORKDIR /usr/src/app
+WORKDIR /app
 
-COPY package.json /usr/src/app/
+COPY package.json /app
 
 RUN npm install -g next
 
 RUN npm install
 
-COPY . /usr/src/app
+COPY . /app
 
-RUN npm run build
+RUN mkdir -p /app/.next/cache/images
+VOLUME /app/.next/cache/images
 
-COPY --chown=10101 ./public /usr/src/app/public
+RUN npm run build
 
 ENV DB_LOCAL_URL=mongodb://mongo:27017/denizpaz
 
 EXPOSE 3000
 
-CMD npm run launch
+CMD npm run start