italia/design-angular-kit

[BUG]: errore caricamento immagine nel componente UploadFileList

Closed this issue · 2 comments

Comportamento atteso

Una volta caricata e rimossa un immagine dovrebbe essere possibile ricaricare la stessa immagine.

Comportamento attuale

Una volta rimossa l'immagine non è possibile ricaricare la stessa immagine se prima non ne viene caricata una differente
Peek 2023-06-15 10-27

Possibili soluzioni

<input type="file" [id]="id" class="upload" [accept]="accept" [multiple]="isMultipleInput"
         (change)="onLoadFiles($event)" />

projects/design-angular-kit/src/lib/components/form/upload-file-list/upload-file-list.component.html

Il metodo onLoadFiles non viene triggerato con l'evento change.

Ho risolto modificando il metodo onLoadFiles:

 onLoadFiles(event: Event): void {
    const input = event.target as HTMLInputElement;
    const files = input?.files;
    const newFiles: Array<File>  = [];
    if (!files?.length) {
      return;
    }
    for (let i = 0; i < files.length; i++) {
      const file = files[i];
      const isAlreadyUploaded = this.fileList.some(item =>
        item.file.name === file.name && item.file.size === file.size && item.file.type === file.type
      );
      if (!isAlreadyUploaded) {
        newFiles.push(file);
      }
    }
    const fileList = new DataTransfer()
    newFiles.forEach(file => fileList.items.add(file));
    this.uploadFiles.emit(fileList.files);
    input.value = '';

  }

input.value = '' risolve il bug ma solo con questa istruzione è possibile aggiungere più immagini uguali, le altre istruzioni aggiunte evitano questo comportamento

Contesto

Angular 16, design-angular-kit 1.0.0-17

astagi commented

Grazie @antenucci96 , lascio la parola a @AntoninoBonanno

🎉 This issue has been resolved in version 0.14.0-prerelease.1 🎉

The release is available on:

Your semantic-release bot 📦🚀