On Remove, how removing the actual files? #343

New Issue

2016-08-10T10:24:04Z

simoazzo commented

2016-08-10 10:24:04 +00:00

(Migrated from github.com)

Hi Guys,

I am using the ng2-file-upload, and when I click on remove,

<button type="button" class="btn btn-danger btn-xs"
                                (click)="item.remove()">
                            <span class="glyphicon glyphicon-trash"></span> Remove
                        </button>

files will still be there.

How can I actual delete them please?

Kind Regards

Hi Guys, I am using the ng2-file-upload, and when I click on remove, ``` <button type="button" class="btn btn-danger btn-xs" (click)="item.remove()"> <span class="glyphicon glyphicon-trash"></span> Remove </button> ``` files will still be there. How can I actual delete them please? Kind Regards

👍 4

duongNA commented

2016-09-01 05:29:00 +00:00

(Migrated from github.com)

I had the same problem. I want to clear the file in input tag after uploading.
ng2-file-upload does not support that thing yet. So you can use @ViewChild of angular 2.
for example:
html file

<input #selectedPicture type="file" ng2FileSelect [uploader]="fileUploader" />

component class

export class PictureCreateComponent implements OnInit {
  @ViewChild('selectedPicture') selectedPicture: any;

  clearSelectedPicture() {
    this.selectedPicture.nativeElement.value = '';
  }
}

I had the same problem. I want to clear the file in input tag after uploading. ng2-file-upload does not support that thing yet. So you can use @ViewChild of angular 2. for example: **html file** ``` html <input #selectedPicture type="file" ng2FileSelect [uploader]="fileUploader" /> ``` **component class** ``` javascript export class PictureCreateComponent implements OnInit { @ViewChild('selectedPicture') selectedPicture: any; clearSelectedPicture() { this.selectedPicture.nativeElement.value = ''; } } ```

👍 1 🎉 3

akashgill1687 commented

2016-12-05 17:19:15 +00:00

(Migrated from github.com)

Is there any other method to achieve this ? Also if i select a file and remove it before uploading from queue and try to add it again, i am not able to add it in queue.

hetzbr commented

2016-12-13 15:45:07 +00:00

(Migrated from github.com)

This works, but I don't understand it. When does clearSelectedPicture get called?

daangeerdink commented

2017-01-25 23:07:14 +00:00

(Migrated from github.com)

@hetzbr

This works, but I don't understand it. When does clearSelectedPicture get called?

You can call it anywhere you want. What you can do is create a new method on the component that handles removing, like this:

removeFile(item) {
    this.uploader.removeFromQueue(item);
    clearSelectedPicture();
}

And then use it like this:

<ul *ngIf="uploader.queue.length > 0">
    <li *ngFor="let item of uploader.queue">
        {{ item?.file?.name }}
        <span (click)="removeFile(item)">Remove</span>
    </li>
</ul>

@hetzbr > This works, but I don't understand it. When does clearSelectedPicture get called? You can call it anywhere you want. What you can do is create a new method on the component that handles removing, like this: ```js removeFile(item) { this.uploader.removeFromQueue(item); clearSelectedPicture(); } ``` And then use it like this: ```html <ul *ngIf="uploader.queue.length > 0"> <li *ngFor="let item of uploader.queue"> {{ item?.file?.name }} <span (click)="removeFile(item)">Remove</span> </li> </ul> ```

👍 1

jitendra-kr commented

2018-05-11 07:23:43 +00:00

(Migrated from github.com)

this.selectedPicture.deleteAll();

Worked for me

this.selectedPicture.deleteAll(); Worked for me

pasbolaprashant commented

2020-07-03 14:53:10 +00:00

(Migrated from github.com)

this.uploader.queue=[];

worked for me.

above things is not working for me. I'm using angular 6.

Thanks All.

this.uploader.queue=[]; worked for me. above things is not working for me. I'm using angular 6. Thanks All.

dinumarathe commented

2021-01-19 10:34:06 +00:00

(Migrated from github.com)

deleteFile(index: number) {
this.attachments.splice(index, 1);
}

deleteFile(index: number) { this.attachments.splice(index, 1); }

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: dc/ng2-file-upload#343