Removing files from the file upload list does not remove them from the upload action

[dajtxx]

Description

The file-upload component allows files to be removed from the list shown under the file selection button. But removing files from here does not remove them from the input control's files property so they get uploaded anyway when the submit button is pressed.

I could not see a way to modify the files property on the input element so either the option to remove a file should be removed or some JavaScript needs to be used to filter the content of the input element and do the uploads.

I see the file-upload component is stand-alone but it seems to be putting a lot of burden on the developer to process and upload the edited file list.

To Reproduce

1. Create a small page with a file-upload component allowing the selection of multiple files and a button connected to some javascript to log the entries of the input element's files property.
2. Select 4 files.
3. Remove a file.
4. Press the button to show the files entries and 4 files should be listed.

Expected behaviour

Either:

1. The files should be removed from the input element's files property (MDN seems to say this is read-only).
2. Don't allow files to be removed from the list.
3. Use JavaScript to upload the files in the list rather than the files in the input element's files property.

I think option 2 is good - simple and the set the files can be changed by selecting a new set with the input element.

[DFSIdigital]

Hi @dajtxx,

Thanks for bringing this to our attention and for the detailed bug report. We appreciate the time you took to outline the issue and your suggestions for improvement.

We will review the issue with the file-upload component and its handling of the input control's files property. Our aim is to implement a fix that resolves this issue and simplifies the process for developers.

We’ll keep you updated on our progress.

[dajtxx]

I forgot to mention the data-replace-files attribute. This didn't make sense to me, at least in the context of using normal form processing to upload the files.

If I choose files 'a' and 'b', then choose files 'c' and 'd' by using the input element a second time, my list shows all 4 files but only files 'c' and 'd' will be uploaded because they're the ones the files input element knows about.

It seems to be the behaviour should be as if the data-replace-files attribute is present, but I didn't know about the attribute until I read the source code.

I'm probably holding it wrong but it wasn't clear to me in the documentation that the file upload via the usual form submission isn't the intended usage.

So I think the docs and demo or example should show how this component is to be used in the wider context of a form, not just the component itself.