upload images

Need Help For Upload File in Nuxt3 Server

what directory should i put my file for example image while upload file to server.
in my case i put them under public/uploads and working just fine for dev mode.
but when i run command

npm run build

npm run build

those files from public is copy to .output/public/uploads folder.
i wonder in production where i should put my upload file put them directly to

.output/public/uploads

.output/public/uploads

public/uploads

public/uploads

.
here is my code that handle the file upload on

server/api/imageUpload.post.ts

server/api/imageUpload.post.ts

import { z } from 'h3-zod'
import fs from "fs"
import path from "path"

export default defineEventHandler(async (event) => {

  const formData = await readFormData(event);

  const object = {
    thumbnail: formData.get("thumbnail") ?? undefined
  }

  const validate = z.object({
    thumbnail: z
      .instanceof(File)
  })
  try {
    await validate.parseAsync(object)
  } catch (error) {
    throw createError({
      statusCode: 400,
      message: 'Invalid data',
      data: error
    })
  }

  let pathNameUpload

  if (object.thumbnail) {
    // will upload the image public/uploads
    const image = object.thumbnail as File
    const ext = path.extname(image.name)
    const nameF = Date.now() + ext

    const pathName = path.join(process.cwd(), "public/uploads", nameF)
    pathNameUpload = "/uploads/" + nameF
    fs.writeFileSync(pathName, Buffer.from(await image.arrayBuffer()))
  }
  return {
    message: "Image upload successfull",
    data:pathNameUpload
  }
})

import { z } from 'h3-zod'
import fs from "fs"
import path from "path"

export default defineEventHandler(async (event) => {

  const formData = await readFormData(event);

  const object = {
    thumbnail: formData.get("thumbnail") ?? undefined
  }

  const validate = z.object({
    thumbnail: z
      .instanceof(File)
  })
  try {
    await validate.parseAsync(object)
  } catch (error) {
    throw createError({
      statusCode: 400,
      message: 'Invalid data',
      data: error
    })
  }

  let pathNameUpload

  if (object.thumbnail) {
    // will upload the image public/uploads
    const image = object.thumbnail as File
    const ext = path.extname(image.name)
    const nameF = Date.now() + ext

    const pathName = path.join(process.cwd(), "public/uploads", nameF)
    pathNameUpload = "/uploads/" + nameF
    fs.writeFileSync(pathName, Buffer.from(await image.arrayBuffer()))
  }
  return {
    message: "Image upload successfull",
    data:pathNameUpload
  }
})

here is my misunderstanding:

1. if i put my files in

public/uploads

public/uploads

. this docs https://nitro.unjs.io/guide/assets#public-assets says when building nitro will copy
files in the public directory. this means my upload files on production will wait until the next build so they can be access.
2. if i put directly to

.output/public/uploads

.output/public/uploads

is these file manifest like in the docs https://nitro.unjs.io/guide/assets#production-public-assets
if have any solution i really appreciate it.

Assets - Nitro

upload images

npm run build

npm run build

those files from public is copy to .output/public/uploads folder.
i wonder in production where i should put my upload file put them directly to

.output/public/uploads

.output/public/uploads

public/uploads

public/uploads

.
here is my code that handle the file upload on

server/api/imageUpload.post.ts

server/api/imageUpload.post.ts

import { z } from 'h3-zod'
import fs from "fs"
import path from "path"

export default defineEventHandler(async (event) => {

  const formData = await readFormData(event);

  const object = {
    thumbnail: formData.get("thumbnail") ?? undefined
  }

  const validate = z.object({
    thumbnail: z
      .instanceof(File)
  })
  try {
    await validate.parseAsync(object)
  } catch (error) {
    throw createError({
      statusCode: 400,
      message: 'Invalid data',
      data: error
    })
  }

  let pathNameUpload

  if (object.thumbnail) {
    // will upload the image public/uploads
    const image = object.thumbnail as File
    const ext = path.extname(image.name)
    const nameF = Date.now() + ext

    const pathName = path.join(process.cwd(), "public/uploads", nameF)
    pathNameUpload = "/uploads/" + nameF
    fs.writeFileSync(pathName, Buffer.from(await image.arrayBuffer()))
  }
  return {
    message: "Image upload successfull",
    data:pathNameUpload
  }
})

import { z } from 'h3-zod'
import fs from "fs"
import path from "path"

export default defineEventHandler(async (event) => {

  const formData = await readFormData(event);

  const object = {
    thumbnail: formData.get("thumbnail") ?? undefined
  }

  const validate = z.object({
    thumbnail: z
      .instanceof(File)
  })
  try {
    await validate.parseAsync(object)
  } catch (error) {
    throw createError({
      statusCode: 400,
      message: 'Invalid data',
      data: error
    })
  }

  let pathNameUpload

  if (object.thumbnail) {
    // will upload the image public/uploads
    const image = object.thumbnail as File
    const ext = path.extname(image.name)
    const nameF = Date.now() + ext

    const pathName = path.join(process.cwd(), "public/uploads", nameF)
    pathNameUpload = "/uploads/" + nameF
    fs.writeFileSync(pathName, Buffer.from(await image.arrayBuffer()))
  }
  return {
    message: "Image upload successfull",
    data:pathNameUpload
  }
})

here is my misunderstanding:

1. if i put my files in

public/uploads

public/uploads

.output/public/uploads

.output/public/uploads

is these file manifest like in the docs https://nitro.unjs.io/guide/assets#production-public-assets
if have any solution i really appreciate it.

Assets - Nitro

upload images

upload images

Similar Threads

Similar Threads

Similar Threads