Prime React File Upload Component setUploadedFiles unexpected behavior

Question

I'm using primereact 9.6.0 (released today!) and I'm also using custom upload prop to pass in my own uploadHandler. This is a follow up to this question about how to change the status to completed.

My Question

I want to change the status of the files uploaded to complete instead of pending after the uploadhandler finishes executing.

However, the uploaded file would show up twice on the list ( the old one ..pending and the completed one. ) after setUploadedFiles is called in the useEffect. How can I only have the new one show up?

const fileUploadRef = useRef(null)
// Media Uplaod
const [mediaList, setMediaList] = useState([]);

useEffect(() => {
    if (fileUploadRef.current) {
        fileUploadRef.current.setUploadedFiles(mediaList);
    }
}, [mediaList]);


                    <FileUpload
                        ref={fileUploadRef}
                        className={`w-full`}
                        name="demo[]"
                        customUpload={true}
                        onRemove={async (event) => {
                            const fileToRemove = event.file;
                            const updatedFiles = mediaList.filter(
                                (file) => file.name !== fileToRemove.name
                            );
                            setMediaList(updatedFiles);
                        }}
                        uploadHandler={async (e) => {
                            console.log(e)

                            e.files.map((image) => {
                                setMediaList((prev) => [...prev, image]);
                            });

                        }}
                        onUpload={async (e) => {
                            console.log('upload completed');
                        }}
                        multiple accept="image/*"
                        maxFileSize={1000000}

                        }
                    />

Answer 1

I basically logged fileUploadRef and found about more about the Component API.

Solution

useEffect(() => {

    if (fileUploadRef.current) {

        fileUploadRef.current.clear();

        fileUploadRef.current.setUploadedFiles(mediaList);
    }
}, [mediaList]);

I used fileUploadRef.current.clear() to clear the FileUploader list of the files. Then fileUploadRef.current.setUploadedFiles to set the list with my state of uploaded files.