Cypress selectFile woes - stuck on this for several days now...

[magick93]

I'm attempting to test, using cypress, the functionality of a file upload widget.

The cypress tests which I've tried are:

const filePath = './cypress/fixtures/example.jpg'

    cy.get('.dropzone')
    .selectFile(filePath, 
    { action: 'drag-drop',
      force: true, }).trigger('drop', {force: true})

and

    cy.get('.dropzone > input[type="file"]').should('exist').invoke('show')
    .selectFile(filePath, {
      action: 'drag-drop',
      force: true,
      log: true,
    })
    .trigger('drop', {force: true})

and

cy.get('.dropzone')
    .children('input[type="file"]')
    .should('exist')
    .invoke('show')
    .selectFile(filePath, { force: true })
    .then(input => {
      expect(input[0].files[0].name).to.equal('example.jpg')
    })
    .wait(6000)
    .trigger('dragstart', { force: true, 
    dataTransfer: dataTransfer })
    .wait(50)
    .trigger('dragover', { force: true })
    .wait(50)
    .trigger('drop', { force: true })
    .wait(50)
    .trigger('dragend', { force: true })
    .wait(50)
    .trigger('change', { force: true });

and

cy.document().get('.dropzone')
    .children('input[type="file"]').selectFile(filePath, { action: 'drag-drop' })

and

cy.document().get('.dropzone')
    .children('input[type="file"]')
    .selectFile(filePath, { action: 'drag-drop', force: true })
    .trigger('drop', { force: true });

The html that the tests are executing against is:

<div tabindex="0" role="button" class="dropzone  svelte-817dg2" style="">
<input accept="image/*" type="file" name="avatar" autocomplete="off" tabindex="-1" style="display: none;"> 
<p>Drag 'n' drop some files here, or click to select files</p>
</div>

I am using this svelte component for the drag 'n' drop file upload - https://github.com/thecodejack/svelte-file-dropzone

In both cases, and every variation on these, the tests never actually upload a file.

However, in the cypress chrome browser, I'm able to manually perform the drag n drop action successfully.