How to load an array of fixtures in cypress?

Hi there, I’m wondering how to upload an array of fixtures for them to be drag and dropped into a file upload. My code currently looks like:

Cypress.Commands.add('uploadFiles', (selector, fileUrlOrUrls, type = '') => {
  const fileUrls = Array.isArray(fileUrlOrUrls)
    ? fileUrlOrUrls
    : [fileUrlOrUrls]
  Promise.all(
    fileUrls.map(fileUrl => {
      const nameSegments = fileUrl.split('/')
      const name = nameSegments[nameSegments.length - 1]
      return cy
        .fixture(fileUrl, 'base64')
        .then(Cypress.Blob.base64StringToBlob)
        .then(blob => {
          console.log('name:', name)
          return new File([blob], name, { type })
        })
    })
  ).then(files => {
    console.log('files:', files)
    const event = { dataTransfer: { files } }
    return cy.get(selector).trigger('drop', event)
  })
})

I want to use it like so:

cy.uploadFiles('.tg-dropzone',["filePath1", "filePath2"])

This promise all doesn’t seem to work. Multiple files are returned in the promise.all, but they are all the same! Is this because you can’t really use cypress like normal promises? If so, how can I do what I want – upload an array of fixtures?

Thanks!

[tomatau]

Yeah I’m not keen on the callback hell being the recommendation here either, especially when the language has features to move past that now.

This worked for me and could scale to more.

        const fixtures = []

        Cypress.Promise.all([
          cy.fixture('first.json').then(fx => fixtures.push(fx)),
          cy.fixture('second.json').then(fx => fixtures.push(fx)),
        ]).then((fx) => {
			const [ first, second ] = fixtures
        })

edit: it should also be faster than the nesting as the requests are being made concurrently.

[bahmutov]

I recommend looking at the “Fixtures” recipe I have added to https://github.com/cypress-io/cypress-example-recipes - which shows how to load one or several fixtures