Next.js Discord

Discord Forum

Send multiple images with Vercel Blob

Answered
European anchovy posted this in #help-forum
Open in Discord
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.
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

@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.
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