How to change label text "Uploaded Successfully! Upload another?"

[HaroldBernard]

+1

[lufelipe12]

+1

[Muhammadsaqib11]

useEffect(() => {

// Find the element with the class "sc-fqkvVR" const element = document.querySelector(".sc-fqkvVR");

if (element) { const successSpan = element.querySelector("span");

const innerSpans = element.querySelectorAll("span");

console.log("getElementsByClassName",successSpan?.textContent , element);

if (successSpan && successSpan.textContent.includes("Successfully")) {
  console.log("The word 'Successfully' is present.");

  // Update the text content of the found span
  successSpan.textContent = "please !"; // Replace with your desired text
} else {
  console.log("The word 'Successfully' is not present.");
}
if (element && element.textContent.includes("another")) {
  console.log("The word 'another' is present.");

  // Update the text content of the found span
  element.textContent = " Please Upload Again"; // Replace with your desired text
} else {
  console.log("The word 'Another' is not present.");
}

} }, [checkFile]);

i have solve this issue through core JS

[melforbes]

The above didn't work for me, here's what did, with an explanation, and also without the console.logs:

useEffect(() => {
    // use MutationObserver web API to asynchronously observe changes to the DOM (required for this as text changes when file is uploaded)
    const observer = new MutationObserver((mutationsList) => {
      // loop over list of mutations
      mutationsList.forEach((mutation) => {
        // check for changes in child nodes of element being observed
        if (mutation.type === "childList") {
          // target element's class
          const element = document.querySelector(".sc-fFGjHI.cgTcOH");
          /**
           * check if class exists (otherwise when component dismounts, an error occurs on null), then
           * check if the textContent property within the element includes text
           */
          if (element && element.textContent.includes("Upload another?")) {
            // then change to render this text only
            element.textContent = "Upload successful!";
          }
        }
      });
    });
    // as part of using the MutationObserver api, changes in the entire DOM needs to be observed for changes
    const targetNode = document.body;
    /**
     * the config object specifies the types of mutations to observe within the DOM, here we need to specify
     * the target node we're observing and all descendents of the target
     */
    const config = { childList: true, subtree: true };
    observer.observe(targetNode, config);

    return () => {
      // disconnect oberver when the component unmounts to prevent memory leaks
      observer.disconnect();
    };
  }, []);