input[type=file].value = '' does not reset input.files after triggerEvent

[nag5000]

const file = new File(['(⌐□_□)'], 'chucknorris.png', { type: 'image/png' });
await triggerEvent(fileInput, 'change', { files: [file] });
fileInput.files.length; // 1
fileInput.value = '';
fileInput.files.length; // Actual: 1, Expected: 0.

Tmp workaround:

const fileInputProto = Object.getPrototypeOf(fileInput);
const inputValueProp = Object.getOwnPropertyDescriptor(fileInputProto, 'value');
Object.defineProperty(fileInput, 'value', {
  configurable: true,
  get() {
    return inputValueProp.get.call(fileInput);
  },
  set(value) {
    inputValueProp.set.call(fileInput, value);

    Object.defineProperty(fileInput, 'files', {
      configurable: true,
      value: []
    });
  }
});

[rwjblue]

Huh. Are you supposed to be able to truncate it by just assigning value like that? I'm not opposed to the a PR adding the work around IFF that is a normal usage pattern for folks.

[nag5000]

It's by spec: https://html.spec.whatwg.org/multipage/input.html#dom-input-value-filename

On setting, if the new value is the empty string, empty the list of selected files; otherwise, throw an "InvalidStateError" DOMException.

And it's the most popular way to reset input[type=file] on stackoverflow ;)

[rwjblue]

Thank you! Sorry for not knowing, I just haven't used Files very much personally...

[rwjblue]

In order to fix, we need to:

• add a failing test case (seems basically to be exactly what you have written above)
• Add the work around that you mention here

ember-test-helpers/addon-test-support/@ember/test-helpers/dom/fire-event.ts

Lines 260 to 270 in e1cb9b4

	if (Array.isArray(files)) {
	Object.defineProperty(files, 'item', {
	value(index: number) {
	return typeof index === 'number' ? this[index] : null;
	},
	});
	Object.defineProperty(element, 'files', {
	value: files,
	configurable: true,
	});
	}