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

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?

CodePudding user response：

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

CodePudding user response：

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.

CodePudding user response：

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)}
    />

CodePudding user response：

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);
        callback();
  }
  const onTemplateAdvancedSelect = () => {
     const domeInput = fileUploadRef.current.fileInput; // pure dome element
     domeInput.disabled = true;
     
  }
  const itemTemplate = (file, props) => {
        return (
            <>
            <div>
                <img alt={file.name} role="presentation" src={file.src} width="50" />

            </div>
            <div >{file.name}</div>
            <div>{file.size}</div>
            <div>
                { /* here you have access to that button */}
                <button
                  type="button"
                  
                  onClick={() => onTemplateRemove(file, props.onRemove)}>
                    <span ></span>
                    <span >&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>
  );