React way of grabbing a button element and using disable property

Question

I have the following code where a user can select a file and hit upload and the Choose button is disabled.

Code Sanbox link is here:

 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);
    let inputFileType = document.querySelector("input[type=file]");
    //setDisableButton(true);
    inputFileType.classList.add("toDisableOnSelect");
    inputFileType.disabled = true;

    let htmlCollection = document.getElementsByClassName(
      "p-button p-component p-button-icon-only"
    );
    console.log("Printing htmlCollection");
    console.log(htmlCollection.length);
    console.log(htmlCollection);

    // htmlCollection.addEventListener("click", function () {
    //   inputFileType.disabled = false;
    // });
    //console.log(htmlCollection.item(19));
  };

  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);

So Inside onTemplateAdvancedSelect function, I want to set inputFileType.disabled to false once user hits the cross icon as shown below:

I don't want to use getElementByClassName just like I have attempted to use in my code of above function. What would be a better way to achieve my goal?

Primereact version I'm using : 4.2.2

where is exactly the p-button p-component p-button-icon-only element? is it inside your react components hierarchy? — Heartbit
– Heartbit, Commented Jan 3, 2022 at 21:35
@Heartbit If you select a file using Choose button and right click on the selected file to inspect it, you will see that. Please see this image screenshot with Inspect thing on Firefox : i.sstatic.net/P8mwB.png — Tan
– Tan, Commented Jan 3, 2022 at 21:41

Heartbit · Accepted Answer · 2022-01-04 09:19:44Z

1

One solution is customizing the row item of the selected file. so the itemTemplate prop is exactly for that goal.

export const FileUploadDemo = () => {
  const toast = useRef(null);
  const fileUploadRef = useRef(null) // reference to uploader node
  const [disableButton, setDisableButton] = useState(false);
  const onTemplateRemove = (file, callback) => {
        // setTotalSize(totalSize - file.size);
        const domInput = fileUploadRef.current.fileInput;
        domInput.disabled = false;
        callback();
  }
  const onTemplateAdvancedSelect = () => {
     const domInput = fileUploadRef.current.fileInput; // pure dome element
     domInput.disabled = true;
     
  }
  const itemTemplate = (file, props) => {
        return (
            <>
            <div>
                <img alt={file.name} role="presentation" src={file.src} width="50" />

            </div>
            <div class="p-fileupload-filename">{file.name}</div>
            <div>{file.size}</div>
            <div>
                { /* here you have access to that button */}
                <button
                  type="button"
                  class="p-button p-component p-button-icon-only"
                  onClick={() => onTemplateRemove(file, props.onRemove)}>
                    <span class="p-button-icon p-c pi pi-times"></span>
                    <span class="p-button-label p-c">&nbsp;</span>
                </button>
            </div>
            </>
        )
    }
  return (
    <div>
      <div className="card">
        <h5>Advanced</h5>
        <FileUpload
          ref={fileUploadRef} // pass a reference for `input` manipulation
          multiple={false}
          name="demo[]"
          url="https://primefaces.org/primereact/showcase/upload.php"
          onUpload={onUpload}
          id={"myId"}
          accept="image/*"
          maxFileSize={1000000}
          /* here we should pass the customized template as prop */
          itemTemplate={itemTemplate} 
          onSelect={onTemplateAdvancedSelect}
          disabled={disableButton}
          emptyTemplate={
            <p className="p-m-0">Drag and drop files to here to upload.</p>
          }
        />
      </div>
    </div>
  );

edited Jan 4, 2022 at 9:19

answered Jan 3, 2022 at 22:37

Heartbit

1,8542 gold badges16 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Tan Over a year ago

Thank you!. One question - where should I set the property(inputFileType.disabled = false;) inside itemTemplate function which I set to true inside onTemplateAdvancedSelect function?

Tan Over a year ago

I think I can do the following inside onTemplateRemove() function, like the following: ` const onTemplateRemove = (file, callback) => { // setTotalSize(totalSize - file.size); let inputFileType = document.querySelector("input[type=file]"); inputFileType.disabled = false; callback(); };`

Tan Over a year ago

For some reason, it's not getting enabled again in my code after I used it like I mentioned in my comment above.

Heartbit Over a year ago

you should pass ref and do dom manipulation with that reference

Tan Over a year ago

Sorry I am little confused. The button seems to be getting disabled after using domeInput.disabled = true. However, I am wondering Where would I put ` const domeInput = fileUploadRef.current.fileInput; domeInput.disabled = false;` to enable it once user hit the cross icon of the button? Thanks!

|

Prateek · Accepted Answer · 2022-01-03 21:26:52Z

0

Please use useRef hook provided by react. Example below:

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` points to the mounted text input element
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

answered Jan 3, 2022 at 21:26

Prateek

4444 silver badges7 bronze badges

1 Comment

Tan Over a year ago

Can you answer in the context of my question? refs came to my mind but I am not sure how to use it to grab a button element which gets created on the fly and then work on it. Thanks

Gábor Ottlik · Accepted Answer · 2022-01-03 21:58:38Z

0

I'm trying to understand your use case. Do you want to remove the image from the upload stack by clicking the x button?

I think you should rather use the built-in API to trigger functionality. If that doesn't help you can extend the library.

answered Jan 3, 2022 at 21:58

Gábor Ottlik

614 bronze badges

6 Comments

Tan Over a year ago

Do you want to remove the image from the upload stack by clicking the x button? Yes, and while doing that I want to set inputFileType.disabled to false since it has been set to true inside onTemplateAdvancedSelect function when a user clicked the Choose button and selected a file.

Tan Over a year ago

Can you explain via code - how to use ref on p-button p-component p-button-icon-only inside onTemplateRemove ?

Gábor Ottlik Over a year ago

Ideally, you would use useRef but since you don't have access to input[type=file] it's ok to use querySelector. You can contribute to the lib to have a prop that is setting the input type to disabled.

Tan Over a year ago

Could you elaborate on You can contribute to the lib to have a prop that is setting the input type to disabled. ? Thanks !

Gábor Ottlik Over a year ago

I see there is a disabled property. I guess that's setting the input filed to disabled. Why don't you use that instead of imperatively setting the disabled property?

|

Sam · Accepted Answer · 2022-01-03 22:09:31Z

0

You don't need to do a getElementsByClassName. You can use the onRemove event to handle the file remove event.

<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>
      }
      onRemove={(e, file) => setDisableButton(false)}
    />

edited Jan 3, 2022 at 22:09

answered Jan 3, 2022 at 21:53

Sam

6321 gold badge5 silver badges11 bronze badges

3 Comments

Tan Over a year ago

This seems to be not working since I have set ` inputFileType.disabled = true;` inside onTemplateAdvancedSelect function. Please let me know if there is another way of handling my goal.Thanks!

Sam Over a year ago

I've tested in the sandbox you've shared and this worked fine. Please have a look again.

Tan Over a year ago

Thanks. I think you were setting setDisableButton(true) somewhere in onTemplateAdvancedSelect function because I don't think I am using it anywhere in my sandbox even though i have declared it? One problem with this approach is that as soon as I select a file, it disables all the three buttons so a user won't be able to upload the selected file if he wants to. If you could share your version of modified sandbox with your solution, that would be great.

Collectives™ on Stack Overflow

React way of grabbing a button element and using disable property

4 Answers 4

11 Comments

1 Comment

6 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

11 Comments

1 Comment

6 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related