Skip to content

Commit

Permalink
Emit change event on uploadFile calls (#5389)
Browse files Browse the repository at this point in the history
In puppeteer 1.20.0, the following code emitted an alert:
```
const puppeteer = require('puppeteer');

(async () => {
	const browser = await puppeteer.launch({args: ['--no-sandbox'], headless: false});
	const page = (await browser.pages())[0];

	await page.setContent(`
		<input type=file>
		<script>
		document.querySelector('input').addEventListener('change', () => {
			alert('Uploaded a file');
		});
		</script>
		`);
	const input = await page.waitForSelector('input[type="file"]');
	await input.uploadFile(__filename);
})();
```

A bisection yielded 6091a34 as the commit that broke this.

Emitting the change event as well seems to fix the problem.
  • Loading branch information
phihag committed Mar 12, 2020
1 parent a3d1536 commit 067662c
Show file tree
Hide file tree
Showing 2 changed files with 7 additions and 0 deletions.
1 change: 1 addition & 0 deletions lib/JSHandle.js
Expand Up @@ -341,6 +341,7 @@ class ElementHandle extends JSHandle {
}
element.files = dt.files;
element.dispatchEvent(new Event('input', { bubbles: true }));
element.dispatchEvent(new Event('change', { bubbles: true }));
}, files);
}

Expand Down
6 changes: 6 additions & 0 deletions test/input.spec.js
Expand Up @@ -27,8 +27,14 @@ module.exports.addTests = function({testRunner, expect, puppeteer}) {
await page.goto(server.PREFIX + '/input/fileupload.html');
const filePath = path.relative(process.cwd(), FILE_TO_UPLOAD);
const input = await page.$('input');
await page.evaluate(e => {
window._inputEvents = [];
e.addEventListener('change', ev => window._inputEvents.push(ev.type));
e.addEventListener('input', ev => window._inputEvents.push(ev.type));
}, input);
await input.uploadFile(filePath);
expect(await page.evaluate(e => e.files[0].name, input)).toBe('file-to-upload.txt');
expect(await page.evaluate(() => window._inputEvents)).toEqual(['input', 'change']);
expect(await page.evaluate(e => {
const reader = new FileReader();
const promise = new Promise(fulfill => reader.onload = fulfill);
Expand Down

0 comments on commit 067662c

Please sign in to comment.