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

Question

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 :

Add a file (let's call it test1.png) to the array while drag & dropping it or using the button
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.

i see no problems in the above link. It works fine for me... I am able to upload 2 png files one after another without any issues. — Nutan
– Nutan, Commented Aug 28, 2019 at 9:55
My bad @xdecdec, I just edited my original post, here's the link : stackblitz.com/edit/angular-dragdropupload — Grid
– Grid, Commented Aug 28, 2019 at 9:55
Yes .. Maybe I checked on your older link. I will check on new link — Nutan
– Nutan, Commented Aug 28, 2019 at 9:56

paul · Accepted Answer · 2019-08-28 10:09:01Z

2

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 = '';
    }
  }

  ...

}

answered Aug 28, 2019 at 10:09

paul

22.1k1 gold badge56 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Grid Over a year ago

Thank you, I'll test this as soon as I finish my lunch ! I'll keep you updated

Grid Over a year ago

@paul your solution works when dragging one or multiple files to the drop zone, but selecting multiple files with the input window (opened when clicking on the + button or on the drag & drop div) won't work. When selecting multiple files, only the first selected file is added to the array.

paul Over a year ago

@Mateo yes, that's an additional problem with your code, I only solved the problem you mentioned in your question

Grid Over a year ago

@paul I'm sorry, as I said before I'm a beginner so I might not understand the behavior of an input when selecting multiple files. I don't get why clearing the value of an input makes it impossible to select multiple files through the input window while dragging multiple files works flawlessly. Is my entire startUpload() function broken ?

ValentinG · Accepted Answer · 2019-08-31 19:04:47Z

1

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 = '';
}

answered Aug 31, 2019 at 19:04

ValentinG

2164 silver badges6 bronze badges

Comments

Neeraj Chauhan · Accepted Answer · 2019-08-28 10:22:46Z

1

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.

answered Aug 28, 2019 at 10:22

Neeraj Chauhan

112 bronze badges

1 Comment

Grid Over a year ago

I'm a beginner and can't really figure out how (click) could be applied to this feature. Afaik (click) won't work when dropping files inside the drag & drop div because it requires the input (or the elements which are bound to it) to be clicked... But I'm probably wrong ! How would you apply (click) in this specific use case ?

Collectives™ on Stack Overflow

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

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related