how can i get dicom tools to work with uploaded images using cornerstoneWADOImageLoader

Question

I can manage to get dcm image from a url to display and work with cornerstone tools

as shown in the snippet below. I have managed to get it to upload and display a dcm image from my machine the code snippet is also attached. But when I upload the dcm images from my machine the some of the dicom tools like brightness and invert seem to work but others don't work

// Setup image loader
cornerstoneWebImageLoader.external.cornerstone = cornerstone;
cornerstone.registerImageLoader('http', cornerstoneWebImageLoader.loadImage)
cornerstone.registerImageLoader('https', cornerstoneWebImageLoader.loadImage)

// Setup tools
const csTools = cornerstoneTools.init();

// Enable Element
const element = document.querySelector('.cornerstone-element');
cornerstone.enable(element);

// Display an image
const imageId = 'https://www.asteris.biz/Keystone/ImageDownload.aspx?ClinicCode=TESTKEYSTONE&ImageId=01b1755e-33d1-4b24-b9af-a4a019689d5f&ImageType=PreviewImage&FrameIndex=0';
cornerstone.loadImage(imageId).then(function (image) {
  cornerstone.displayImage(element, image);
});

    // Add event handlers to flip or rotate the image
    document.getElementById('hFlip').addEventListener('click', function (e) {
        const viewport = cornerstone.getViewport(element);
        viewport.hflip = !viewport.hflip;
        cornerstone.setViewport(element, viewport);
    });

.cornerstone-element-wrapper,
.cornerstone-element {
  width: 512px;
  height: 512px;
  margin: 0 auto;
}

  <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
  <script src="https://unpkg.com/[email protected]/dist/cornerstone.js"></script>
  <script src="https://unpkg.com/[email protected]/dist/cornerstoneMath.js"></script>
  <script src="https://unpkg.com/[email protected]/dist/cornerstoneWebImageLoader.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cornerstoneTools.js"></script>
<button id="hFlip" type="button" class="btn btn-default">HFlip</button>
<div class="cornerstone-element-wrapper">
  <div class="cornerstone-element" data-index="0" oncontextmenu="return false"></div>
</div>

But when I try to get it to upload an image from my computer the tools fail to work

below is my code

  ngOnInit(): void {
    // Setup image loader
    // Init Cornerstone Tools
    cornerstoneTools.external.cornerstone = cornerstone;
    cornerstoneTools.external.Hammer = Hammer;
    cornerstoneTools.external.cornerstoneMath = cornerstoneMath;
    cornerstoneTools.init({
      globalToolSyncEnabled: true
    });

    // Setup Tools
    cornerstoneTools.addTool(cornerstoneTools.WwwcTool);
    cornerstoneTools.setToolActive("Wwwc", { mouseButtonMask: 1 });
    cornerstoneTools.addTool(cornerstoneTools.ZoomTool);
    cornerstoneTools.setToolActive("Zoom", { mouseButtonMask: 2 });
    cornerstoneTools.addTool(cornerstoneTools.PanTool);
    cornerstoneTools.setToolActive("Pan", { mouseButtonMask: 4 });

    // Image Loader
    cornerstoneWADOImageLoader.external.cornerstone = cornerstone;
    cornerstoneWADOImageLoader.external.dicomParser = dicomParser;
    cornerstoneWADOImageLoader.webWorkerManager.initialize({
      maxWebWorkers: navigator.hardwareConcurrency || 1,
      startWebWorkersOnDemand: true,
      taskConfiguration: {
        decodeTask: {
          initializeCodecsOnStartup: false,
          usePDFJS: false,
          strict: false
        }
      }
    });

    // Enable element
    const element = document.querySelector(".cornerstone-element");
    cornerstone.enable(element);
  }

  uploadNewImage(input) {
    console.log("get file extension" + input.target.files[0].name.split(".").pop());

    let file_extension = input.target.files[0].name.split(".").pop()

    //Check file extension and do action accordingly
    if (file_extension === 'dcm') {
      console.log("we uploading a dcm file");

      var self = this;
      self.showResults = false;
      this.file = input.target.files[0];

      // Add the file to the cornerstoneFileImageLoader and get unique
      // number for that file
      const file = input.target.files[0];
      // const imageId =
      //   "dicomweb:https://www.asteris.biz/Keystone/ImageDownload.aspx?ClinicCode=TESTKEYSTONE&ImageId=01b1755e-33d1-4b24-b9af-a4a019689d5f&ImageType=DicomImage&FrameIndex=0";
      const imageId = cornerstoneWADOImageLoader.wadouri.fileManager.add(file);
      this.loadAndViewImage(imageId);
    }
    else {

      console.log("we uploading a jpg or any other filer");

    }
  }

  loadAndViewImage(imageId) {
    // Enable element
    const element = document.querySelector(".cornerstone-element");
    cornerstone.enable(element);
    // Display our image on the "enabled element"
    cornerstone.loadImage(imageId).then(function (image) {
      cornerstone.displayImage(element, image);
    });
  }

<input type="file" (change)="uploadNewImage($event)" id="sidebar-file-input"
                           accept="image/x-png, image/jpeg, .dcm" style="opacity: 0; width : 100%" #fileInp>Here

   <div class="cornerstone-element-wrapper">
      <div
        class="cornerstone-element"
        data-index="0"
        oncontextmenu="return false"
      ></div>
    </div>