Not able to upload a png file in cypress

I am trying to upload a png file using cypress and this is that i have tried so far

Cypress.Commands.add('upload_file', (fileName, selector) => {
  return cy.get(selector).then(subject => {
    return cy.fixture(fileName, 'base64')
      .then(Cypress.Blob.base64StringToBlob)
      .then(blob => {
        const el = subject[0]
        const testFile = new File([blob], fileName, { type: 'image/png' })
        const dataTransfer = new DataTransfer()
        dataTransfer.items.add(testFile)
        el.files = dataTransfer.files
        return subject;
      })
  })
})

calling this in my test as below:

cy.upload_file("logo.png", ".jss378");

Have also tried different locators but no luck

it does not give any error but also it does not upload anything. note that the selector(.jss378) is dynamic so i want to use something that is not dynamic

Here is my HTML code

I am not getting any error but it not uploading anything

[mbilalbakhtawar]

    it('Uploading png image', () => {
        cy.fixture('testPicture.png').then(fileContent => {
            cy.get('input[type="file"]').upload({
                fileContent: fileContent.toString(),
                fileName: 'testPicture.png',
                mimeType: 'image/png'
            });
        });
    });

Use cypress file upload package: https://www.npmjs.com/package/cypress-file-upload Note: testPicture.png must be in fixture folder of cypress

[chirag-jogogo]

@must-git-good - thank you, it worked