Nuxt•9mo ago

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 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 or public/uploads. here is my code that handle the file upload on 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 . 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 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

4 Replies

Attacler/Bart•9mo ago

any files that are in the public directory should be accessable directly for as far as i know regarding uploading, the public directory is more meant for static uploads i guess on your next deploy it will be overwritten (depending on how your hosting is setted up) you could hook it up to S3 or something if you want to

silvesterwaliOP•9mo ago

I mean ...I have experience a little bit with Laravel where all public assets..can be accessed directly without building again. Anyway the path of the file is stored in the database For S3 maybe later on. At the moment I just want to use Ubuntu vps.

Attacler/Bart•9mo ago

hmm i see, cant you use a static path outside of the frontend/nuxt folder? otherwise i guess that on a new deploy, its gonna clear the public folder

silvesterwaliOP•9mo ago

maybe this last alternative, so i can experiment to create API for read the file in the destination folder to serve it as static.

Gaming

Programming

upload images