State of the upload is not updating

[youngrake]

type UploaderProps = {
  helpMessage: React.ReactElement | string;
  accept: string;
};

const Preview: IDropzoneProps["PreviewComponent"] = ({ meta }) => {
  const { name, status, uploadedDate } = meta;

  return (
    <div className='flex flex-row justify-between p-2'>
      <span className='max-w-[200px] min-w-[100px]'>{name}</span>
      <span className='italic'>Uploaded on {uploadedDate}</span>
      <span>{status}</span>
    </div>
  );
};

const Layout: IDropzoneProps["LayoutComponent"] = ({
  input,
  previews,
  dropzoneProps,
  files,
  extra: { maxFiles },
}) => {
  return (
    <div>
      <div className='relative border-dashed border-2 p-12'>
        <div {...dropzoneProps}>{files.length < maxFiles && input}</div>
      </div>

      {previews?.length ? <h1 className='text-2xl font-bold'>Active Uploads</h1> : <></>}
      <div className='flex flex-col'>{previews}</div>
    </div>
  );
};

const Uploader = ({ helpMessage, accept }: UploaderProps) => {
  // specify upload params and url for your files
  const getUploadParams: IDropzoneProps["getUploadParams"] = ({ meta }) => {
    return { url: "https://httpbin.org/post" };
  };

  // called every time a file's `status` changes
  const handleChangeStatus: IDropzoneProps["onChangeStatus"] = ({ meta, file }, status) => {};

  // receives array of files that are done uploading when submit button is clicked
  const handleSubmit: IDropzoneProps["onSubmit"] = (files, allFiles) => {
    allFiles.forEach((f) => f.remove());
  };

  return (
    <div className='p-5'>
      <div className='mb-4 text-center'>{helpMessage}</div>
      <Dropzone
        classNames={{
          dropzone: "p-8 border-dashed",
          inputLabelWithFiles: defaultClassNames.inputLabel,
        }}
        getUploadParams={getUploadParams}
        onSubmit={handleSubmit}
        onChangeStatus={handleChangeStatus}
        inputContent={() => <UploadIcon size={72} />}
        accept={accept}
        LayoutComponent={Layout}
      />
      <hr className='bg-gray w-100 mt-8' />
    </div>
  );
};

Hi guys, with this code when I am making upload, I don't have any changes on the UI, it does not rerender for me.

[amir0ff]

Same problem on localhost 🤔 The deployed and bundled version just works although the code is basically the same I cannot think of ways to debug this at the moment 🥲

[raoufslv]

same problem, @youngrake @amir0ff did you find any solution ?

[raoufslv]

i found a solution that woked for me on here : https://github.com/fortana-co/react-dropzone-uploader/issues/200#issuecomment-1296916175