Trying to get File objects from fixtures in Cypress.io

files_from_fixtures_in_cypress.js

function getFile(f) {
  return new Cypress.Promise((resolve, reject) => {
    return cy.fixture(f).then((img) => {
      const file = makeFile({
        name: f,
        dataURL: `data:image/${f.slice(f.length - 3)};base64,${img}`,
      })
      resolve(file)
    })
  })
}

function getFiles(filenames) {
  return Cypress.Promise.map(filenames, filename => getFile(filename))
}

function createDtWithFiles(files = []) {
  return {
    dataTransfer: {
      files,
      types: ['Files'],
      getData: (name) => null,
    }
  }
}

function dataURLtoBlob(dataurl) {
  var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
  bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
  while(n--){
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], {type:mime});
}

function makeFile({name, dataURL}) {
  return new File([dataURLtoBlob(dataURL)], name)
}

// ...

  describe('Object detector', () => {
    beforeEach(() => {
      cy.get('.spectrum-ActionButton').contains('Add').click()
      cy.get('.spectrum-Menu-item').contains('Object detector').click()
    })

    it('can handle one dragged and dropped image file', function() {
      getFile('noisyDataScience.png').then((file) => {
        const evt = createDtWithFiles([file])
        cy.get('input[type="file"]').trigger('drop', {...evt, force: true})
        cy.get('#run-workflow-btn').click()
        cy.contains('Poster: 84%')
      })

// ...      

If you make this into a standalone code we can run in a fork of cypress-test-tiny, we could modify it and see if we need to clarify examples in our docs or if we need to add another example to https://github.com/cypress-io/cypress-example-recipes

Maybe we need to add Fixture -> File code example to https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/file-upload-react ?