Upload

Use the following actions to work with file upload input elements.

Populate File Upload Input

Populates the specified file upload input with file paths.

t.setFilesToUpload( selector, filePath )
Parameter Type Description
selector Function | String | Selector | Snapshot | Promise Identifies the input field to which file paths are written. See Selecting Target Elements.
filePath String | Array The path to the uploaded file, or several such paths. Relative paths resolve from the folder with the test file.

The following example illustrates how to use the t.setFilesToUpload action.

fixture `My fixture`
    .page `http://www.example.com/`;

test('Uploading', async t => {
    await t
        .setFilesToUpload('#upload-input', [
            './uploads/1.jpg',
            './uploads/2.jpg',
            './uploads/3.jpg'
        ])
        .click('#upload-button');
});

The t.setFilesToUpload action removes all file paths from the input before populating it with new ones.

If an error occurs while uploading files, the test will fail.

Clear File Upload Input

Removes all file paths from the specified file upload input.

t.clearUpload( selector )
Parameter Type Description
selector Function | String | Selector | Snapshot | Promise Identifies the input field that needs to be cleared. See Selecting Target Elements.

The example below shows how to use the t.clearUpload action.

import { Selector } from 'testcafe';

const uploadBtn = Selector('#upload-button');

fixture `My fixture`
    .page `http://www.example.com/`;

test('Trying to upload with no files specified', async t => {
    await t
        .setFilesToUpload('#upload-input', [
            './uploads/1.jpg',
            './uploads/2.jpg',
            './uploads/3.jpg'
        ])
        .clearUpload('#upload-input')
        .expect(uploadBtn.visible).notOk();
});