Next.js Discord

Discord Forum

Send multiple images with Vercel Blob

Answered
European anchovy posted this in #help-forum
Open in Discord
Avatar
European anchovyOP
I'm using Next.js 14, Vercel Blob, TypeScript. I have an Comment section and users can add images to comment. So I'm searching add multiple images to Vercel Blob with Server Actions.
Image
Answered by Ray
try this
  async function uploadImage(formData: FormData) {
  "use server";
  const files = formData.getAll("image") as File[];
  const blobs = await Promise.all(
    files.map((file) =>
      put(file.name, file, {
        access: "public",
      })
    )
  );
  revalidatePath("/");
  return blobs;
}

return (
   <form action={uploadImage}>
      <label htmlFor="image">Image</label>
      <input type="file" id="image" name="image" multiple />
      <button>Upload</button>
    </form>
)
View full answer

2 Replies

Avatar
@European anchovy I'm using Next.js 14, Vercel Blob, TypeScript. I have an Comment section and users can add images to comment. So I'm searching add multiple images to Vercel Blob with Server Actions.
Avatar
Ray
try this
  async function uploadImage(formData: FormData) {
  "use server";
  const files = formData.getAll("image") as File[];
  const blobs = await Promise.all(
    files.map((file) =>
      put(file.name, file, {
        access: "public",
      })
    )
  );
  revalidatePath("/");
  return blobs;
}

return (
   <form action={uploadImage}>
      <label htmlFor="image">Image</label>
      <input type="file" id="image" name="image" multiple />
      <button>Upload</button>
    </form>
)
Answer