Warm tip: This article is reproduced from stackoverflow.com, please click
filepond javascript reactjs

React form upload auto submitting, depending on the order

发布于 2020-08-22 04:38:05

can anyone please help me, with my upload form code, for some reason my onChange function on the other inputs prevent you from adding images first before filling in the other fields, if you do it automatically submits the form. This is not a working version, but it is the full code: https://codesandbox.io/s/reverent-hugle-rsqqx

I'm not referring to the splitURL message it shows, if you fill out each of the text fields and then add the images, it's fine.

It doesn't submit, which allows the user to click the submit button.

If you add images first and then fill out just one of the text fields the form submits automatically.

I do not want this, I am designing a page where I would like to have the option to add the images for upload before filling out the rest of the form.

The only thing I can pinpoint it down to is the onChange function, if i remove that from one of the inputs I can fill out the input after adding images.

Questioner
old_blueyes
Viewed
4
Paolo Carrara 2020-06-01 13:13

found the problem, the library "react-filepond" main element "FilePond" is specting an array of objects in the "files" property, so to fix the problem you just do the following:

// Add the spread operator in the items array too.
setPosterCollection([...posterCollection, ...items]);

This will fix the error and allow the user to fill the form in any order as he/she wish to.