Drag & Drop upload

We are still looking for an option to test Drag & Drop file uploads. Is there anything in the plans about this?

Would be nice if I could drop a fixture onto the selected subject. Something like this maybe:

// fixture reference according to: 
// https://docs.cypress.io/api/commands/fixture.html#Shortcuts
cy.get('.dnd-upload-area').dropFile('fixture:image.jpg');

Thanks in advance 😊

[jennifer-shehane]

@egucciar You have to look at the way the particular drag and drop you want to test is currently working. The way I do this is, within the Sources panel of the DevTools, you set some Event Listener Breakpoints for Drag/drop, then you use the drag and drop normally in your app by dragging an image in. Then you can see exactly what these events look like and the data that it uses in your application.

Set a global Event Listener Breakpoint

The dataTransfer object from me dragging in a photo manually to their site

Doing this with the demo page of angular-file-upload, I can see that a dragover, drop and dragleave are all triggered (you’ll need to select and deselect them one by one as you set the breakpoint to inspect each one.

From this, I can see that they have code around more data than my implementation above cared about in their dragover and drop event. They’re expecting a types array in the dataTransfer object for example. And in order to get the filename to show up in the table, they have more data in their files array. The test code below should help get you started. I’m closing this issue.

describe('Drag and Drop', function() {
  const fileName = "foobar.jpg"
  
  beforeEach(function() {
    this.dropEvent = {
      dataTransfer: {
        files: [{
          name: fileName,
          size: 32796,
          type: "image/jpeg",
          lastModified: 1510154936000,
          webkitRelativePath: ""
        }],
        types: ["Files"]
      }
    }
  })
  
  it('drag and drop upload', function(){
    cy.visit('http://nervgh.github.io/pages/angular-file-upload/examples/simple/')
    cy.get('.my-drop-zone').first()
      .trigger('dragover', this.dropEvent)
      .should('have.class', 'nv-file-over')
      .trigger('drop', this.dropEvent)

    cy.get('table').contains(fileName)
  })
})

[andygock]

I’ve actually found a solution to my previous question, referring to this comment:

To drag and drop upload file myfile.csv from fixtures/

Cypress.Commands.add('upload_file', (selector, fileUrl, type = '') => {
  return cy.fixture(fileUrl, 'base64')
    .then(Cypress.Blob.base64StringToBlob)
    .then(blob => {
      const nameSegments = fileUrl.split('/')
      const name = nameSegments[nameSegments.length - 1]
      const testFile = new File([blob], name, { type })
      const event = { dataTransfer: { files: [testFile] } }
      return cy.get(selector).trigger('drop', event)
    })
});

describe("drag and drop upload", () => {
  it("uploads file from filesystem", () => {
    cy.upload_file('.drop', 'myfile.csv');
  });
});