How to assert whether the file has been uploaded or not?

Question

<div class="form-fill-file">
    <input data-val="true" data-val-requiredif="Please upload invoice file." id="Upload_File" name="Upload.File" 
    type="file" value="" class="valid" aria-invalid="false">
        </div>

I have written the following script:

it('Upload file', () => {
        
        const filepath = 'air1.pdf'
        cy.get('#Upload_File').attachFile(filepath).click()
        cy.get('.form-fill-file').contains('air1.pdf')

    })

After I add the file, file name is displayed as shown in the image, but I am not able to assert this. I am getting the following error:

Answer 1

Please note that this does not check that the file is uploaded; merely that the file has been inserted in the field (put differently, you're not testing your app as much as your browser).

A better way would be to actually upload the document (add it to the field and click the Upload button or whatever it is that triggers your upload), then verify information that your application displays after the upload, or by re-downloading the file if your application lets you do that.