silvesterwali Posts - Answer Overflow

silvesterwali

•Created by silvesterwali on 4/26/2024 in #❓・help

how to chunk video file with fs.createReadStream on H3 and how to hundle it in frontend

import fs from "fs"
import path from "path"


function getFileNameFromPath(path: string) {

    let splitStr = path.split("/");
    let filename = splitStr[splitStr.length - 1];
    return filename
}


export default defineEventHandler(async (event) => {
    const { slug } = getRouterParams(event)

    const fileName = getFileNameFromPath(slug)

    const file_name = path.join(process.cwd(), "/uploads", fileName)

    const pathVideo = path.resolve(file_name)
    const stat = fs.statSync(pathVideo)

    const fileSize = stat.size



    if (fs.existsSync(file_name)) {
        const head = {
            'Content-Length': fileSize.toString(),
            'Content-Type': 'video/mp4',
        };

        appendResponseHeaders(event, head);
        return fs.createReadStream(pathVideo)
    }

})

import fs from "fs"
import path from "path"


function getFileNameFromPath(path: string) {

    let splitStr = path.split("/");
    let filename = splitStr[splitStr.length - 1];
    return filename
}


export default defineEventHandler(async (event) => {
    const { slug } = getRouterParams(event)

    const fileName = getFileNameFromPath(slug)

    const file_name = path.join(process.cwd(), "/uploads", fileName)

    const pathVideo = path.resolve(file_name)
    const stat = fs.statSync(pathVideo)

    const fileSize = stat.size



    if (fs.existsSync(file_name)) {
        const head = {
            'Content-Length': fileSize.toString(),
            'Content-Type': 'video/mp4',
        };

        appendResponseHeaders(event, head);
        return fs.createReadStream(pathVideo)
    }

})

hallo there. i need your help to how to write chunk for video file . and how the frontend handled the chunk response, my goal is to delivery the video with small pieces. thanks for your help

1 replies

NNuxt

•Created by silvesterwali on 4/15/2024 in #❓・help

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.

12 replies

Gaming

Programming