i am using cypress and ruuning throgh test runner. whole the html runs in iframe of test runner.

below is my HTML:

<div data-ng-show="previewType === 'image' || previewType === 'none'" class="" style="">
          <div class="col-md-12 px-0" id="CanvasHoldingElement">
            <canvas id="the-canvas" data-ng-mousedown="mouseEvent.DOWN($event)" data-ng-mouseup="mouseEvent.UP($event)" data-ng-mousemove="mouseEvent.MOVE($event)" data-ng-mouseenter="mouseEvent.ENTER()" data-ng-mouseleave="mouseEvent.LEAVE()" data-tool-mode="none" width="563" height="177" style="width: 563.5px; height: 177.906px;"> Sorry but your browser does not
              support
              HTML canvas.
            </canvas>
          </div>
        </div>

below is my spec.js file code.

SingleDeposit(docType)
    {
        cy.get("#ChooseAppdeposit").click()
        cy.wait(5000)
        const imgfile = '75140.pdf';
        cy.get("#selectDocumentComponent > div").invoke('attr','type','file').attachFile(imgfile,{subjectType: 'drag-n-drop'})
       
        cy.get('#depositTableSelect').select(docType)
        cy.wait(18000)
        cy.get('#btnDepositDocument').click({force: true})//cy.get('body > mosaic-page > div > mosaic-container > a > mosaic-app-name').click()
        
    }

file is getting selected, but it is not previewed in the preview section.