vaadin/vaadin-upload

Unable to use `vaadin-upload-file` with `dom-repeat` inside `slot="file-list"`

limonte opened this issue · 2 comments

Description

When using vaadin-upload-file with dom-repeat inside slot="file-list", click on the "Abort upload" button of one file removes all files in the list:

vaadin-upload1

Live Demo

https://glitch.com/edit/#!/fuzzy-galley

Steps to reproduce

  1. Upload two or more files
  2. Click the "Abort upload" (cross) button.

Expected outcome

One file is removed from the list

Actual outcome

All files are removed from the list

Is the following function causing this issue in the vaadin-upload.html?

class UploadElement {
       ...
        /**
         * Remove file from upload list. Called internally if file upload was canceled.
         * @param {File} file File to remove
         */
        _removeFile(file) {
            this.splice('files', this.files.indexOf(file), 1);
        }
      ...
}

It should be something like this?

_removeFile(file) {
         if(this.files.indexOf(file) > -1) {
             this.splice('files', this.files.indexOf(file), 1);
         }
}

Can you try:

<vaadin-upload-file file="[[file]]" on-file-abort="_removeFile"></vaadin-upload-file>
_deleteFile(event){
       this.splice('files', this.files.indexOf(event.detail.file), 1);
}

Looks like it works, but try and see if it helps you.