2

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.

Tan
  • 1,433
  • 5
  • 27
  • 47
  • By Design, `Choose` button is used to select local file and upload button is for to upload it to server. so It is not possible to disabled `Choose` button. – Varit J Patel Dec 18 '21 at 04:14
  • Thanks. Is there a documentation where I can read more about it? Since it's not possible, a user can upload multipl file then even though multiple option is set to false, right? – Tan Dec 18 '21 at 04:32
  • No. you can not set multiple files. In case new file is uploaded that will be replaced with the earlier one. Documentation is here: https://www.primefaces.org/primereact/fileupload/ but your use case is not mentioned as such. If you want to support your use case, then you need to create custom component which facilitate the requirement. – Varit J Patel Dec 18 '21 at 04:48

1 Answers1

0

You can do a lot of customizing by adding your own headerTemplate, as described in the documentation here: https://primereact.org/fileupload/#advanced:~:text=Advanced-,%23,-FileUpload%20is%20an

I was able to remove the cancel and upload buttons completely and implement my own upload process after the file is selected.

LMabley
  • 489
  • 5
  • 6