Next.js Discord

Discord Forum

Does server actions support multiple files upload

Answered
Seppala Siberian Sleddog posted this in #help-forum
Open in Discord
Seppala Siberian SleddogOP
I have this input field in my form
<input type="file" name="productImages" multiple />

But when I receive the file in the server actions I just receive that last file selected, should I use form/multipart for handling as server actions does not support it?
This is the server actions code
const createProduct = async (prevState: any, form: FormData) => {
  const formData = Object.fromEntries(form);
  const files = formData.productImages as File;
  console.log(files)
  try {
  } catch (error) {}
  return {};
};

and this is the output after selecting multiple files
File {
  size: 30047,
  type: 'image/png',
  name: 'Screenshot 2024-05-03 153918.png',
  lastModified: 1714773208931
}
Answered by joulev
Try console.logging the result of form.getAll("productImages")
View full answer

4 Replies

Answer
Seppala Siberian SleddogOP
It works, can you please explain why it didn't show when I used the Object.formEntries method?
@Seppala Siberian Sleddog It works, can you please explain why it didn't show when I used the `Object.formEntries` method?
This is honestly the first time I’ve seen someone reading from FormData by using Object.fromEntries. Each form item (text or file) may have multiple entries, I suppose that confuses the Object method and leads to information loss.

The proper way to read forms is by form.get(name) and form.getAll(name) depending on whether you want only one item or all items.
Seppala Siberian SleddogOP
thanks, got it