---
title: "Uploading html5 files made easy with the .selectFile command"
url: "https://www.cypress.io/blog/uploading-files-with-selectfile"
description: "Use Cypress’s built-in way to select files in an HTML5 input element & simulate dragging files into a browser with the .selectFile() command. Read the blog."
---

[Blog](/blog/)[Company: Announcements](/blog/tag/announcements)

# Uploading html5 files made easy with the .selectFile command

January 19, 2022

•

By The Cypress Team

Cypress has a built-in way for you to select files in an HTML5 input element and simulate dragging files into the browser with the introduction of the [`.selectFile()`](https://docs.cypress.io/api/commands/selectfile?ref=cypress-io.ghost.io) command.

## HTML5 input file upload

With the [`.selectFile()`](https://docs.cypress.io/api/commands/selectfile?ref=cypress-io.ghost.io) command, you can easily select a fixture file in a form element:

```JavaScript
cy.get('input[type=file]').selectFile('file.json')
```

Or multiple fixture files, as long as the file input has the `multiple` property:

```JavaScript
cy.get('input[type=file]').selectFile(['file.json', 'file2.json'])
```

You can also select a file created dynamically inside of a test, using the new [`Cypress.Buffer`](https://docs.cypress.io/api/utilities/buffer?ref=cypress-io.ghost.io) utility:

```JavaScript
cy.get('input[type=file]').selectFile({
  contents: Cypress.Buffer.from('file contents'),
  fileName: 'file.txt',
  lastModified: Date.now(),
})
```

## Dragging files into the browser

The [`.selectFile()`](https://docs.cypress.io/api/commands/selectfile?ref=cypress-io.ghost.io) command also allows you to simulate dragging and dropping a file over an element, using the `drag-drop` action:

```JavaScript
cy.get('input[type=file]').selectFile('file.json', {
  action: 'drag-drop'
})
```

And you can drop a file over the document:

```JavaScript
cy.document().selectFile('file.json', { action: 'drag-drop' })
```

## Manipulating binary data with Buffer

Cypress exposes an API for manipulating binary data, similar to the [nodejs `Buffer` class](https://nodejs.org/api/buffer.html?ref=cypress-io.ghost.io), as [`Cypress.Buffer`](https://docs.cypress.io/api/utilities/buffer?ref=cypress-io.ghost.io).

Not only are instances of `Cypress.Buffer` accepted by [`.selectFile()`](https://docs.cypress.io/api/commands/selectfile?ref=cypress-io.ghost.io) to specify files inline, but the [`cy.readFile()`](https://docs.cypress.io/api/commands/readfile?ref=cypress-io.ghost.io) and [`cy.fixture()`](https://docs.cypress.io/api/commands/fixture?ref=cypress-io.ghost.io) commands yield instances of `Cypress.Buffer` when the `encoding` is set to `null`:

```JavaScript
cy.readFile('images/logo.png', null).then((file) => {
  // file will be read as a buffer
  // and should look something like this:
  // Buffer([0, 0, ...])
  expect(Cypress.Buffer.isBuffer(file)).to.be.true
})

cy.fixture('images/logo.png', null).then((logo) => {
  // logo will be read as a buffer
  // and should look something like this:
  // Buffer([0, 0, ...])
  expect(Cypress.Buffer.isBuffer(logo)).to.be.true
})
```

## Migrating from the cypress-file-upload plugin

The [`.selectFile()`](https://docs.cypress.io/api/commands/selectfile?ref=cypress-io.ghost.io) command replaced the **cypress-file-upload** community plugin by [Paul Auramenka](https://github.com/abramenal?ref=cypress-io.ghost.io), and moving forward we recommend that you update your tests to use the new command.

In order to streamline this process, a comprehensive [Migration guide](https://docs.cypress.io/guides/references/migration-guide?ref=cypress-io.ghost.io#Migrating-from-cypress-file-upload-to-selectFile) has been written which explains the exact steps you need to take to update existing tests to use `.selectFile()`.

## Resources

-   [`.selectFile()` API documentation](https://docs.cypress.io/api/commands/selectfile?ref=cypress-io.ghost.io)
-   [`Cypress.Buffer` API documentation](https://docs.cypress.io/api/utilities/buffer?ref=cypress-io.ghost.io)
-   [Migration guide](https://docs.cypress.io/guides/references/migration-guide?ref=cypress-io.ghost.io#Migrating-from-cypress-file-upload-to-selectFile)

## Cypress wants to hear from you!

The Cypress team has been working hard to deliver this improved experience. We're excited to bring APIs like `.selectFile()` and `Cypress.Buffer` to our users, and as always, we're eager to hear your feedback.

You can submit an [issue](https://github.com/cypress-io/cypress/issues?ref=cypress-io.ghost.io) on Github or chat with us on our [Discord](https://discord.gg/Cd4CdSx?ref=cypress-io.ghost.io). Thanks for your support, and happy testing!

Join the [flourishing Cypress community](https://github.com/cypress-io/cypress/blob/develop/CONTRIBUTING.md?ref=cypress-io.ghost.io) and elevate your testing skills to unprecedented levels! Engage with a vibrant network of like-minded professionals, exchange valuable insights, and stay abreast of the cutting-edge trends in component testing.