Add options parameter to uploadHandler callback on FileUpload

[godomainz]

I'm submitting a ... (check one with "x")

[x ] bug report
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://forum.primefaces.org/viewforum.php?f=57

Current behavior
I have FileUpload component like this

<FileUpload
                            mode="basic"
                            name="baptism_certificate"
                            accept="image/*"
                            customUpload
                            uploadHandler={onBaptismCertificateUploadAuto}
                            chooseLabel="Browse"
                            maxFileSize={1000000}
                          />

This is my onBaptismCertificateUploadAuto method

 const onBaptismCertificateUploadAuto = ({ files }) => {
    const [file] = files;
    dispatch(uploadParishionerBaptismCertificate(parishioner.id, file));
  };

``

Image is successfully uploading BUT file name stays same. and Old file is still attached to button.
See below screenshow
https://tinyurl.com/yzel7wgx

Expected behavior
Button name should change to "Browse" and I should be able to select new image

Please tell us about your environment:

OS: windows 10 Pro
package manager : npm
HTTP server(backend) : Django

• React version:
  "react": "^17.0.1",

• PrimeReact version:
  "primereact": "^6.3.2",

• Browser: [Chrome 90.0.4430.93 (Official Build) (64-bit)|]

• Language: [ TypeScript 4.1.3 ]

[mertsincan]

Hi,

You can use clear method of FileUpload;

fileUploadRef.current.clear();

<FileUpload ref={fileUploadRef} ... />

Best Regards,

[mertsincan]

Also, I added options param to uploadHandler method;

    clear(): void;
    props: FileUploadProps;
}

Exp;

const onBaptismCertificateUploadAuto = ({ files, options }) => {
   // options.clear() -> Clear selected files
   // options.props -> FileUpload props

    const [file] = files;
    dispatch(uploadParishionerBaptismCertificate(parishioner.id, file));
  };

Best Regards,

[godomainz]

Also, I added options param to uploadHandler method;

    clear(): void;
    props: FileUploadProps;
}

Exp;

const onBaptismCertificateUploadAuto = ({ files, options }) => {
   // options.clear() -> Clear selected files
   // options.props -> FileUpload props

    const [file] = files;
    dispatch(uploadParishionerBaptismCertificate(parishioner.id, file));
  };

Best Regards,

Nope it gives me following error

TypeError: Cannot set property 'value' of null
FileUpload.clearInputElement
I:/ReactJS Projects/church/frontend/node_modules/primereact/components/fileupload/FileUpload.js:167
  164 | }, {
  165 |   key: "clearInputElement",
  166 |   value: function clearInputElement() {
> 167 |     this.fileInput.value = '';
      | ^  168 |   }
  169 | }, {
  170 |   key: "clearIEInput",

This what I tried
` const onBaptismCertificateUploadAuto = ({ files, options }) => {

const [file] = files;

dispatch(uploadParishionerBaptismCertificate(parishioner.id, file));

options.clear();

};`

[godomainz]

Hi,

You can use clear method of FileUpload;

fileUploadRef.current.clear();

<FileUpload ref={fileUploadRef} ... />

Best Regards,

Nope It gives me below error

TypeError: Cannot set property 'value' of null
FileUpload.clearInputElement
I:/ReactJS Projects/church/frontend/node_modules/primereact/components/fileupload/FileUpload.js:167
  164 | }, {
  165 |   key: "clearInputElement",
  166 |   value: function clearInputElement() {
> 167 |     this.fileInput.value = '';
      | ^  168 |   }
  169 | }, {
  170 |   key: "clearIEInput",

This is what I tried

const baptismFileUploadRef = useRef<any>(null);

const onBaptismCertificateUploadAuto = ({ files }) => {
    const [file] = files;
    dispatch(uploadParishionerBaptismCertificate(parishioner.id, file));
    baptismFileUploadRef.current.clear();
  };

<FileUpload
                            mode="basic"
                            name="baptism_certificate"
                            accept="image/*"
                            customUpload
                            uploadHandler={onBaptismCertificateUploadAuto}
                            chooseLabel="Browse"
                            maxFileSize={1000000}
                            ref={baptismFileUploadRef}
                          />