I tried to duplicate this issue but I couldn’t since it needs to set some server side codes and couldn’t do it on codesandbox.
But you can at least see working code on code sandbox.
And this is a record gif for my problem.
So, when I upload multiple files and if one of the file types is not supported, user won’t be able to click the save button, but if user removes the file that is not supported and has only files that are supported, user should be able to click the save button.
But the issue I have is user can’t click the save button even though he has only files that are supported.
I disabled and abled the save button based with imagesUploading
value that changes value depending on the file uploading status like start uploading, uploading right now or uploaded successfully.
function App() {
const [files, setFiles] = useState([]);
const [imagesUploading, setImagesUploading] = useState(false);
return (
<div className="App">
<FilePond
files={files.map((file) => file.file)}
maxFiles={50}
maxFileSize="10MB"
acceptedFileTypes={["image/jpg", "image/jpeg", "image/png"]}
allowMultiple={true}
onupdatefiles={(fileItems) => {
setFiles(fileItems);
}}
onaddfilestart={() => {
console.log("onaddfilestart");
setImagesUploading(true); // make the save button disabled
}}
onprocessfilestart={() => {
console.log(`onprocessfilestart`);
setImagesUploading(true); // make the save button disabled
}}
onprocessfiles={() => {
console.log(`onprocessfiles`);
setImagesUploading(false); // make the save button abled
}}
imageResizeTargetWidth={1920}
allowImageTransform={true}
imageTransformOutputQuality={70}
/>
<button disabled={imagesUploading || files.length < 1}>Save</button>
</div>
);
}
On the console, I see onaddfilestart
and imagesUploading: true
twice since there are two files are about to start uploading process.
Also, I see just onprocessfilestart
letter and no value for imagesUploading
and I assume because one of the file types is not supported, so process failed and the rest of callbacks(onprocessfiles
) never got called where set imagesUploading
value false to abled the button.
Does anybody have the same issue?