Adding Ability to Submit File to Input Element From Local Filesystem (file upload)

[pihish]

Description
Our app takes a file from an user, does some work with it, and produces outputs based on the input the user provides. A bunch of things happen in the system during the processing and we expect project pages to be generated in a certain fashion after a project successfully completes. We need to be able to submit files through our webpage to test the affects of this process.

[brian-mann]

This requires sending native events.

We've been holding off on adding native event support because of the way the debugger protocol works in Chrome. It can only accept one connection which means dev tools cannot be open. Forcing users to close their dev tools is a big reason why the testing ecosystem is so awful.

We've been investigating the user experience around this and we have some pretty good ideas about how to improve this. Once we add native events you'll be able to not just upload files but send native keyboard events, mobile events, and a slew of other things.

[brian-mann]

Should also note that it is possible to upload files in your application but its different based on how you've written your own upload code.

For instance if you use the new fileReader API's you could use cy.readFile or cy.fixture to read in data, and then convert it to a Blob and then trigger the specific event your application is looking for and send in the Blob as a property.

Because the implementation is different per application there is no way for us to suggest how to do it. Once we implement native API's we will be able to show a recipe handling this.

[wescarr]

Wanted to add that I got this working by doing the following:

cy.fixture('path/to/image.png').as('logo')
  .get('input[type=file]').then(function(el) {
    return Cypress.Blob.base64StringToBlob(this.logo, 'image/png')
      .then(blob => {
        el[0].files[0] = blob
        el[0].dispatchEvent(new Event('change', {bubbles: true}))
      })
  })

[medeeiros]

I've tried everything and I can't get dropzone on my react app to recognise the file.

cy.get('input[type=file]', { force: true }).then(function(el) {
    const xml = new Blob([this.xbrl], { type: 'text/xml' } )

    el[0].files[0] = xml
    el[0].dispatchEvent(new Event('change', {
        bubbles: true,
        target: {
            files: [xml],
        }
    }))
})

[dziamid]

@brian-mann

Once we add native events you'll be able to not just upload files but send native keyboard events, mobile events, and a slew of other things.

Is there any progress on the road to native events? Having to hack around for file uploading, hovering and tabbing is a big deal for us.

[brian-mann]

Chromium team is still working on multiplex'd debugger support. Implementing native events without this is significantly difficult and there are many edge cases and UI changes we'd have to account for, and then once they do land this, we'd have to fork the code and handle it in a separate way.

I'm still on the side of waiting until this is implemented properly by them. You can essentially achieve most things without native event by firing events directly. You can't do things like tab, but you could always use a different tool just for those tests, while letting Cypress handle all the rest.

You can test file uploads using events directly if your app is using HTML5 API's and its not like an oldschool traditional form.

[dziamid]

Thanks for the detailed response. While I could get away without tabbing and work around file upload, this involved a lot of boilerplate, complexity and changes in the application code. Nevertheless, great product anyway and good to know that you are looking forward to switching to native events when things get stable on chrome side!

[rdamborsky]

Using el[0].files[0] = blob as @wescarr recommends worked until few weeks back (I don't recall what Chrome version it was).

But now, at least in v.61+ this no longer works and errors out with "TypeError: Failed to set an indexed property on 'FileList': Index property setter is not supported."

This is not an issue on side of Cypress. I just felt mentioning it might save time to someone running into this thread. Unfortunately, I didn't find a way around this yet.

[brian-mann]

Haven't looked into this, but oftentimes you can overwrite things manually using Object.defineProperty which can forcibly change the descriptor for values.

That is of course if it's configurable: true

[robrkerr]

I'm having the same issue @rdamborsky mentioned and can't find a way around it.

[aboutlo]

@brian-mann I tried to overwrite but it seems not possible:
https://stackoverflow.com/questions/1711357/how-would-you-overload-the-operator-in-javascript

The FileList descriptor is empty
Object.getOwnPropertyDescriptors($input[0].files) // => {}

Any suggestion to get a file upload tested? Perhaps we could pass an option to the cypress run command to turn off chrome security sandbox?

[brian-mann]

As mentioned above - there is no way to set values in file upload inputs, and there are no flags that chrome exposes to force this. You have to use native events. I commented on this recently yesterday.

#311 (comment)

The only other way to get file uploads working today is to understand how your application handles them with File API and then stub it out. It's possible but not generic enough to give any advice on it.

[aboutlo]

tks @brian-mann 👍

[rafiek]

I think Cypress is really awesome and am already using it within my company. We previously used Protractor and were able to add a file to an input[type="file"] element. Would really love to be able to this as well with Cypress, because it is sometimes an essential step when doing full e2e tests for our applications.

[anned20]

Hey everyone!

I fixed this for DropZone using this piece of code:

const dropEvent = {
    dataTransfer: {
        files: [
        ],
    },
};

cy.fixture('Path to picture fixture').then((picture) => {
    return Cypress.Blob.base64StringToBlob(picture, 'image/jpeg').then((blob) => {
        dropEvent.dataTransfer.files.push(blob);
    });
});

cy.get('Your dropzone element').trigger('drop', dropEvent);

I hope this will work for you too!

[brian-mann]

@anned20 this is really good - thank you for this.

One tidbit - you're missing a return statement on Cypress.blob.base64StringToBlob because that returns a promise and the cypress cy.then needs to know about it else it will not properly await it. This is working in your example by chance because the blob promise is resolving faster than the later cy.get and cy.trigger resolve.

Return the promise will always finish the promise chain first before moving on.

[anned20]

@brian-mann I updated the example, is this what you meant?

[brian-mann]

Yup 👍

[vicusbass]

Is there any workaround (other than using Electron) for file inputs (the dropzone example is not working for me) or we have to wait for the native events implementation?

[brian-mann]

The workaround is however your application is built. You fire the events and provide the object value properties and/or methods that you application uses to respond to the upload events.

There is no generic solution - you have to understand how your application works. Then however it works you fire what it needs to respond.

[danceric0919]

I'm new to Cypress.io and encounter issue when testing upload file implemented by Vue.js
We have a component like following:

<b-form-file id="upload-file" v-model="files[0]" @change="upload(payload)" >
</b-form-file>

I tried
cy.get('#upload-file').trigger('change', somepayload)
but nothing happened

is there any way to trigger change or proper event for application implemented by Vue?

Thanks for any respond.
Cheers.

[bahmutov]

@danceric0919 can you just call upload() method on the Vue component around this element? Like load the context from Cypress fixture then call the method? I should maybe make a recipe for this that uses Vue.js - where is b-form-file coming from? Is it a public component?

Ok found it - https://bootstrap-vue.js.org/docs/components/form-file/

[bahmutov]

@danceric0919 can you take a look how I test file upload in bahmutov/vue-vuex-todomvc@deff47a ? Just create a File in your test, set it in the component and trigger change event.

[danceric0919]

@bahmutov thanks for the reply.
I'll try it later today or tomorrow.
Appreciate 👍

2017/11/29 update
After updating application slightly, your example works in my site.
Really appreciate for the example, it saved my days.

[jackblackCH]

This e.g works for me mp4 files:

    cy.fixture('../fixtures/test.mp4', 'binary')
      .then(Cypress.Blob.binaryStringToBlob)
      .then((fileContent) => {
        cy.get('input[type="file"]').attachFile({
          fileContent: fileContent,
          filePath: '../fixtures/test.mp4',
          mimeType: 'video/mp4',
        })
       ...

[cypress-bot]

The code for this is done in cypress-io/cypress#19332, but has yet to be released.
We'll update this issue and reference the changelog when it's released.

[BlueWinds]

As an update, we've merged this into the 10.0 release, but it will actually go out in 9.3, scheduled for early January.

[cypress-bot]

The code for this is done in cypress-io/cypress#19524, but has yet to be released.
We'll update this issue and reference the changelog when it's released.

[tnrich]

A heads up that the changelog link to the blog about the new functionality is broken:

https://cypress.io/blog/2022/01/18/uploading-files-with-selectfile/

[cypress-bot]

Released in 9.3.0.

This comment thread has been locked. If you are still experiencing this issue after upgrading to
Cypress v9.3.0, please open a new issue.