Disable only Choose button and not upload and cancel button of the prime react advance uploader

Viewed 369

I am using prime react advanced uploader and I want to disable the Choose button when a user is done selecting first file. This is to prevent user from clicking the Choose file button again and attach another one even though multiple files option has been disabled.I don't want to disable Upload and maybe Cancel button so that user can upload the file and cancel it if they want to.

But when I try to disable the button, it is disabling all the three buttons as shown in the example below. Is there a way to achieve what I am looking for?

Here is my code:

import "primeicons/primeicons.css";
import "primereact/resources/themes/lara-light-indigo/theme.css";
import "primereact/resources/primereact.css";
import "primeflex/primeflex.css";
import "../../index.css";
import ReactDOM from "react-dom";

import React, { useRef, useState } from "react";
import { FileUpload } from "primereact/fileupload";

export const FileUploadDemo = () => {
  const toast = useRef(null);
  const [disableButton, setDisableButton] = useState(false);

  const onUpload = () => {
    toast.current.show({
      severity: "info",
      summary: "Success",
      detail: "File Uploaded"
    });
  };

  const onTemplateAdvancedSelect = (e) => {
    console.log("Printing onTemplateAdvancedSelect ");
    console.log(e);
    setDisableButton(true);
  };

  return (
    <div>
      <div className="card">
        <h5>Advanced</h5>
        <FileUpload
          multiple={false}
          name="demo[]"
          url="https://primefaces.org/primereact/showcase/upload.php"
          onUpload={onUpload}
          id={"myId"}
          accept="image/*"
          maxFileSize={1000000}
          onSelect={onTemplateAdvancedSelect}
          disabled={disableButton}
          emptyTemplate={
            <p className="p-m-0">Drag and drop files to here to upload.</p>
          }
        />
      </div>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<FileUploadDemo />, rootElement);

Here is my codesandbox example with above code.

0 Answers
Related