CODEWITHSUNDEEP
angulartypescriptangular-material
Grid
Grid

Reputation: 13

Can't add same file to array twice in a row (file upload form)

First time posting an issue here 😀 !

So, I have been trying to create my own file upload component with a drag & drop feature, but whenever I try to add an identical file twice in a row, nothing happens. No errors, no nothing. My startUpload() function is simply not executed.

To replicate my issue follow these steps :

  1. Add a file (let's call it test1.png) to the array while drag & dropping it or using the button

  2. Repeat the first step and you'll see that no file is added to the array.

You can add an identical file twice in the array, but not in a row. Adding test1.png, then test2.png and again test1.png works.

I know my explanation is kinda messy so here's a link to a Stackblitz project I made to show the issue I'm having :

https://stackblitz.com/edit/angular-dragdropupload

The expected behavior would be that even if a file is identical, I'd be able to add it twice to the array of files.

Upvotes: 1

Views: 3603

Answers (3)

ValentinG
ValentinG

Reputation: 196

The solution of @paul is correct but just put the reset value after the For

startUpload(event) {
    for (let i = 0; i < event.length; i++) {
      const file = event[i];
      if (file.type.split("/")[0] !== "image") {
        console.error("The file type of", file.name, "is not supported");
      } else {
        this.files.push(file);
        console.log(file);
      }
    }

    this.fileInput.nativeElement.value = '';
}

Upvotes: 1

Neeraj Chauhan
Neeraj Chauhan

Reputation: 11

The Issue with what you have done here is that you are listening to the "change" event on your input, and the way this event works is that since you are uploading the same exact file to that form-control, it correctly detects that there is no change here and does not trigger your function.

In my opinion, logically this makes sense. But if you still want to implement this, change the event you are listening to. Change and input will behave this way only, you can use (click) event.

Upvotes: 1

paul
paul

Reputation: 22011

You can drag/drop the same file twice in a row, but you cannot add the same file twice using the plus button.

What you need to do is to clear the value of the input control after adding each file.

import { Component, OnInit, Input, ElementRef, ViewChild } from "@angular/core";

...

export class FileUploadComponent implements OnInit {

  @Input() accept = "image/*";

  // get reference to fileInput DOM element
  @ViewChild('fileInput', null) fileInput: ElementRef;

  ...

  startUpload(event) {
    for (let i = 0; i < event.length; i++) {
      const file = event[i];
      if (file.type.split("/")[0] !== "image") {
        console.error("The file type of", file.name, "is not supported");
      } else {
        this.files.push(file);
        console.log(file);
      }
      //  clear fileinput box after adding file
      this.fileInput.nativeElement.value = '';
    }
  }

  ...

}

Upvotes: 2

Related Questions