### Project Setup and Execution
Source: https://github.com/abramenal/cypress-file-upload/blob/main/recipes/angularjs-ng-file-upload/README.md
Installs project dependencies, starts the development server, and runs tests in open mode.
```bash
npm install
npm start
```
```bash
npm run test:open
```
--------------------------------
### Installation and Testing
Source: https://github.com/abramenal/cypress-file-upload/blob/main/recipes/react-html5-input/README.md
Installs project dependencies and starts the development server. Also includes a command to open the test runner.
```bash
npm install
npm start
```
```bash
npm run test:open
```
--------------------------------
### Install and Start react-dropzone
Source: https://github.com/abramenal/cypress-file-upload/blob/main/recipes/react-dropzone/README.md
Installs project dependencies using npm and starts the development server. Also includes a command to open the test runner.
```bash
npm install
npm start
```
```bash
npm run test:open
```
--------------------------------
### Install and Start Project
Source: https://github.com/abramenal/cypress-file-upload/blob/main/recipes/shadow-dom-native/README.md
Installs project dependencies and starts the development server. Also includes instructions to open the Cypress test runner.
```bash
npm install
npm start
```
```bash
npm run test:open
```
--------------------------------
### Installation and Setup
Source: https://github.com/abramenal/cypress-file-upload/blob/main/README.md
Instructions for installing the cypress-file-upload package via npm and configuring it in your Cypress project's support files for TypeScript and JavaScript.
```bash
npm install --save-dev cypress-file-upload
```
--------------------------------
### Basic File Upload with Cypress
Source: https://github.com/abramenal/cypress-file-upload/blob/main/recipes/react-html5-input/src/index.html
Demonstrates a basic file upload scenario using the cypress-file-upload library. This involves selecting a file and triggering the upload.
```javascript
cy.get('input[type="file"]').attachFile('my-file.txt');
```
--------------------------------
### Basic File Upload with Cypress
Source: https://github.com/abramenal/cypress-file-upload/blob/main/recipes/react-dropzone/src/index.html
This snippet demonstrates a basic file upload scenario using cypress-file-upload. It targets an input element that is hidden and styled with CSS.
```javascript
cy.get('input[type="file"]').attachFile('my-file.txt');
```
--------------------------------
### File Upload with Custom Options
Source: https://github.com/abramenal/cypress-file-upload/blob/main/recipes/react-html5-input/src/index.html
Shows how to upload a file with custom options, such as specifying the file name or content type. This allows for more control over the upload process.
```javascript
cy.get('input[type="file"]').attachFile({
fileContent: 'This is the content of the file.',
fileName: 'my-custom-file.txt',
mimeType: 'text/plain'
});
```
--------------------------------
### File Upload Example
Source: https://github.com/abramenal/cypress-file-upload/blob/main/recipes/angularjs-ng-file-upload/src/index.html
This snippet shows a basic file upload scenario. It includes a button to select a file and displays the selected file's name, along with any associated error messages.
```html
File(s):
{{f.name}}
{{f.name}} {{f.$error}} {{f.$errorParam}}
{{errorMsg}}
```
--------------------------------
### Handling Hidden File Inputs
Source: https://github.com/abramenal/cypress-file-upload/blob/main/recipes/react-html5-input/src/index.html
Provides an example of how to upload a file when the file input element is hidden using CSS. This often requires interacting with a visible button that triggers the hidden input.
```javascript
cy.get('.hidden-uploader input[type="file"]').attachFile('image.png');
```
--------------------------------
### Cypress File Upload Example
Source: https://github.com/abramenal/cypress-file-upload/blob/main/README.md
This snippet demonstrates how to upload a file using Cypress. It utilizes the 'cypress-file-upload' plugin to handle file inputs in web applications.
```javascript
import { mount } from 'cypress-vue-unit-test'
import Component from './Component.vue'
it('uploads a file', () => {
mount(Component, {
propsData: {
file: 'test.txt'
}
})
cy.get('input[type="file"]').upload('test.txt')
cy.get('.uploaded-file').should('contain', 'test.txt')
})
```
--------------------------------
### Basic File Attachment
Source: https://github.com/abramenal/cypress-file-upload/blob/main/README.md
Example of using the attachFile command to upload a single file to an HTML5 file input element.
```javascript
cy.get('[data-cy="file-input"]')
.attachFile('myfixture.json');
```
--------------------------------
### File Upload to Specific Input
Source: https://github.com/abramenal/cypress-file-upload/blob/main/recipes/react-html5-input/src/index.html
Illustrates uploading a file to a specific file input element on the page, identified by its selector. This is useful when multiple file inputs are present.
```javascript
cy.get('#file-upload-input').attachFile('document.pdf');
```
--------------------------------
### CSS for Hidden File Upload
Source: https://github.com/abramenal/cypress-file-upload/blob/main/recipes/react-html5-input/src/index.html
CSS rules used to style and hide file input elements, often in conjunction with custom upload buttons.
```css
.hidden-uploader {
position: relative;
display: none;
width: 60px;
height: 30px;
}
```
```css
.upload-button {
border: 1px solid #333;
}
```
```css
.upload-wrapper {
height: 0;
overflow: hidden;
}
```
```css
.upload-wrapper input {
position: absolute;
top: 0;
right: 0;
height: 100%;
}
```
--------------------------------
### Upload via Shadow DOM
Source: https://github.com/abramenal/cypress-file-upload/blob/main/recipes/shadow-dom-native/src/index.html
Demonstrates how to upload a file to an HTML5 input element that is located within a shadow DOM. This is a common scenario in web components.
```javascript
cy.get('your-shadow-host').shadow().find('input[type="file"]').attachFile('path/to/your/file.txt');
```
--------------------------------
### File Attachment with Encoding
Source: https://github.com/abramenal/cypress-file-upload/blob/main/README.md
Example of attaching a file with a specified encoding, useful for files not supported by default or when encountering encoding errors.
```javascript
cy.get('[data-cy="file-input"]')
.attachFile({ filePath: 'test.shp', encoding: 'utf-8' });
```
--------------------------------
### Contributor Other Contributions
Source: https://github.com/abramenal/cypress-file-upload/blob/main/README.md
This snippet lists contributors with other types of contributions, such as answering questions, providing examples, reviewing pull requests, or offering ideas.
```html
```
--------------------------------
### CSS for Hidden File Input
Source: https://github.com/abramenal/cypress-file-upload/blob/main/recipes/react-dropzone/src/index.html
This CSS is used to style a file input element, making it hidden and positioning it to overlay a clickable element, which is a common pattern for custom file upload buttons.
```css
.hidden-uploader { position: relative; width: 60px; height: 30px; }
.upload-button { border: 1px solid #333; }
.upload-wrapper { height: 0; overflow: hidden; }
.upload-wrapper input { position: absolute; top: 0; right: 0; height: 100%; }
```
--------------------------------
### Shadow DOM Native Recipe
Source: https://github.com/abramenal/cypress-file-upload/blob/main/recipes/README.md
This recipe demonstrates how to test file uploads within a Shadow DOM environment using Cypress.
```JavaScript
import '@testing-library/cypress/add-commands';
describe('File Upload - Shadow DOM Native', () => {
beforeEach(() => {
cy.visit('/shadow-dom-native');
});
it('should upload a file within Shadow DOM', () => {
cy.get('shadow-root-element').find('input[type="file"]').attachFile('image.jpg');
cy.contains('File uploaded to Shadow DOM: image.jpg').should('be.visible');
});
});
```
--------------------------------
### Cypress File Upload API Reference
Source: https://github.com/abramenal/cypress-file-upload/blob/main/README.md
Provides a comprehensive reference for the `attachFile` command exposed by the cypress-file-upload plugin. It details the `fixture` and `processingOpts` parameters, including their properties and expected types. The `fixture` parameter can be a string path or an object with `filePath`, `fileName`, `fileContent`, `mimeType`, `encoding`, and `lastModified`. The `processingOpts` parameter includes `subjectType`, `force`, and `allowEmpty`.
```APIDOC
cySubject.attachFile(fixture, processingOpts);
fixture:
- filePath {string}: file path (with extension)
- fileName {string}: the name of the file to be attached, this allows to override the name provided by `filePath`
- fileContent {Blob}: the binary content of the file to be attached
- mimeType {string}: file [MIME][mime] type. By default, it gets resolved automatically based on file extension.
- encoding {string}: normally [`cy.fixture`][cy.fixture] resolves encoding automatically, but in case it cannot be determined you can provide it manually.
- lastModified {number}: The unix timestamp of the lastModified value for the file. Defaults to current time.
processingOpts:
- subjectType {string}: target (aka subject) element kind: `'drag-n-drop'` component or plain HTML `'input'` element. Defaults to `'input'`
- force {boolean}: same as for [`cy.trigger`][cy.trigger], it enforces the event triggers on HTML subject element. Defaults to `false`
- allowEmpty {boolean}: when true, do not throw an error if `fileContent` is zero length. Defaults to `false`
```
--------------------------------
### React Dropzone Recipe
Source: https://github.com/abramenal/cypress-file-upload/blob/main/recipes/README.md
This recipe shows how to test file uploads with React using the React Dropzone component and Cypress.
```JavaScript
import '@testing-library/cypress/add-commands';
describe('File Upload - React Dropzone', () => {
beforeEach(() => {
cy.visit('/react-dropzone');
});
it('should upload a file using Dropzone', () => {
cy.get('[data-testid="dropzone"]').attachFile('example.png');
cy.contains('File uploaded: example.png').should('be.visible');
});
});
```
--------------------------------
### React HTML5 File Input Recipe
Source: https://github.com/abramenal/cypress-file-upload/blob/main/recipes/README.md
This recipe illustrates testing file uploads with a standard HTML5 file input in React using Cypress.
```JavaScript
import '@testing-library/cypress/add-commands';
describe('File Upload - React HTML5 File Input', () => {
beforeEach(() => {
cy.visit('/react-html5-input');
});
it('should upload a file via HTML5 input', () => {
cy.get('input[type="file"]').attachFile('document.pdf');
cy.contains('Selected file: document.pdf').should('be.visible');
});
});
```
--------------------------------
### Uploading an Empty Fixture File
Source: https://github.com/abramenal/cypress-file-upload/blob/main/README.md
Demonstrates how to handle uploading an empty file by setting the `allowEmpty` option to `true`. This prevents errors when the fixture file is intentionally empty.
```javascript
cy.get('[data-cy="file-input"]')
.attachFile({ filePath: 'empty.txt', allowEmpty: true });
```
--------------------------------
### Working with Raw File Contents (Binary to Blob)
Source: https://github.com/abramenal/cypress-file-upload/blob/main/README.md
Demonstrates how to upload a file by providing its raw binary content as a Blob. This is useful for custom file preprocessing. It requires reading the fixture in binary format, converting it to a Blob using `Cypress.Blob.binaryStringToBlob`, and then attaching it with specified properties like `filePath`, `encoding`, and `lastModified`.
```javascript
const special = 'file.spss';
cy.fixture(special, 'binary')
.then(Cypress.Blob.binaryStringToBlob)
.then(fileContent => {
cy.get('[data-cy="file-input"]').attachFile({
fileContent,
filePath: special,
encoding: 'utf-8',
lastModified: new Date().getTime()
});
});
```
--------------------------------
### Attaching Multiple Files
Source: https://github.com/abramenal/cypress-file-upload/blob/main/README.md
Shows how to attach multiple files to a file input by passing an array of file names to the attachFile command.
```javascript
cy.get('[data-cy="file-input"]')
.attachFile(['myfixture1.json', 'myfixture2.json']);
```
--------------------------------
### AngularJS ng-file-upload Recipe
Source: https://github.com/abramenal/cypress-file-upload/blob/main/recipes/README.md
This recipe demonstrates how to test file uploads with AngularJS using the ng-file-upload library and Cypress.
```JavaScript
import '@testing-library/cypress/add-commands';
describe('File Upload - AngularJS ng-file-upload', () => {
beforeEach(() => {
cy.visit('/angularjs-ng-file-upload');
});
it('should upload a file successfully', () => {
cy.get('input[type="file"]').attachFile('example.json');
cy.contains('File uploaded successfully').should('be.visible');
});
});
```
--------------------------------
### Cypress Command Import
Source: https://github.com/abramenal/cypress-file-upload/blob/main/README.md
How to import the custom attachFile command into your Cypress project's commands.js file.
```javascript
import 'cypress-file-upload';
```
--------------------------------
### TypeScript Configuration
Source: https://github.com/abramenal/cypress-file-upload/blob/main/README.md
Configuration for TypeScript projects to include the types for cypress-file-upload commands.
```json
{
"compilerOptions": {
"types": ["cypress", "cypress-file-upload"]
}
}
```
--------------------------------
### Importing Commands in Index.js
Source: https://github.com/abramenal/cypress-file-upload/blob/main/README.md
Ensuring that the commands.js file, which imports cypress-file-upload, is imported into the main Cypress index.js file.
```javascript
// Import commands.js using ES2015 syntax:
import './commands';
```
--------------------------------
### Contributor Documentation Contributions
Source: https://github.com/abramenal/cypress-file-upload/blob/main/README.md
This snippet lists contributors who have made documentation contributions to the project. It includes their GitHub avatars and links to their documentation work.
```html
```
--------------------------------
### Drag-and-Drop File Attachment
Source: https://github.com/abramenal/cypress-file-upload/blob/main/README.md
Demonstrates how to use attachFile for simulating a drag-and-drop file upload by specifying the subjectType as 'drag-n-drop'.
```javascript
cy.get('[data-cy="dropzone"]')
.attachFile('myfixture.json', { subjectType: 'drag-n-drop' });
```
--------------------------------
### Working with Raw File Contents (Manual Metadata)
Source: https://github.com/abramenal/cypress-file-upload/blob/main/README.md
Shows how to upload a file using its raw content when manual metadata specification is needed. This method allows overriding `fileName`, `mimeType`, `encoding`, and `lastModified` properties explicitly, especially when the `filePath` alone is insufficient for metadata resolution.
```javascript
cy.fixture('file.spss', 'binary')
.then(Cypress.Blob.binaryStringToBlob)
.then(fileContent => {
cy.get('[data-cy="file-input"]').attachFile({
fileContent,
fileName: 'whatever',
mimeType: 'application/octet-stream',
encoding: 'utf-8',
lastModified: new Date().getTime()
});
});
```
--------------------------------
### Contributor Information
Source: https://github.com/abramenal/cypress-file-upload/blob/main/README.md
This snippet extracts and displays information about project contributors, including their GitHub profile link, avatar, name, and the type of contribution they made (e.g., Code, Documentation, Tests). It uses HTML table structure to present this data.
```html
```
--------------------------------
### HTML File Input Element
Source: https://github.com/abramenal/cypress-file-upload/blob/main/README.md
This snippet shows a basic HTML file input element, which is the target for file uploads in web applications. The 'cypress-file-upload' plugin interacts with such elements.
```html
```
--------------------------------
### Contributor Bug Report Contributions
Source: https://github.com/abramenal/cypress-file-upload/blob/main/README.md
This snippet lists contributors who have reported bugs in the project. It includes their GitHub avatars and links to their bug reports.
```html
```
--------------------------------
### Waiting for File Upload Completion
Source: https://github.com/abramenal/cypress-file-upload/blob/main/README.md
Explains how to use `cy.wait` to pause execution until a file upload request is completed. It involves setting up `cy.server` and `cy.route` to alias the upload request, then using `cy.wait` with a timeout to ensure the upload finishes before proceeding.
```javascript
// start watching the POST requests
cy.server({ method:'POST' });
// and in particular the one with 'upload_endpoint' in the URL
cy.route({
method: 'POST',
url: /upload_endpoint/
}).as('upload');
const fileName = 'upload_1.xlsx';
cy.fixture(fileName, 'binary')
.then(Cypress.Blob.binaryStringToBlob)
.then(fileContent => {
cy.get('#input_upload_file').attachFile({
fileContent,
fileName,
mimeType: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
encoding:'utf8',
lastModified: new Date().getTime()
})
})
// wait for the 'upload_endpoint' request, and leave a 2 minutes delay before throwing an error
cy.wait('@upload', { requestTimeout: 120000 });
// stop watching requests
cy.server({ enable: false })
// keep testing the app
// e.g. cy.get('.link_file[aria-label="upload_1"]').contains('(xlsx)');
```
--------------------------------
### Contributor Code Contributions
Source: https://github.com/abramenal/cypress-file-upload/blob/main/README.md
This snippet lists contributors who have made code contributions to the project. It includes their GitHub avatars and links to their contributions.
```html
```
--------------------------------
### Override File Name During Upload
Source: https://github.com/abramenal/cypress-file-upload/blob/main/README.md
Illustrates how to attach a file while overriding its original name. This is achieved by providing both `filePath` and `fileName` properties in the options object, allowing the uploaded file to have a different name than its source fixture.
```javascript
cy.get('[data-cy="file-input"]')
.attachFile({ filePath: 'myfixture.json', fileName: 'customFileName.json' });
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.
