Can't upload same file twice #220

New Issue

2016-05-24T15:02:53Z

ammar91 commented

2016-05-24 15:02:53 +00:00

(Migrated from github.com)

Seems like after uploading a file, it doesn't trigger the upload next time. I have to change the filename to make it work. However, I set the removeAfterUpload property to true but not seems to be work either. Is there anything else I need to configure?

👍 17

Inspiravetion commented

2016-05-25 18:42:18 +00:00

(Migrated from github.com)

+1

rajsharma243 commented

2016-06-13 06:44:06 +00:00

(Migrated from github.com)

I am facing the similar kind of issue in IE.
If I upload a file and than cancel than cancel the File and delete the file from its actual location.
Firstly I am not able to remove the file untill and Close the brower.

Somehow. IE if refering the file path. tried many options, but no one help.

I am facing the similar kind of issue in IE. If I upload a file and than cancel than cancel the File and delete the file from its actual location. Firstly I am not able to remove the file untill and Close the brower. Somehow. IE if refering the file path. tried many options, but no one help.

ammar91 commented

2016-06-13 10:05:37 +00:00

(Migrated from github.com)

A work around would be to put ngIfdirective on your file input element

Eg:
<input type="file" ng2FileSelect [uploader]="uploader" *ngIf="uploader.queue.length==0" />

A work around would be to put `ngIf`directive on your file input element Eg: `<input type="file" ng2FileSelect [uploader]="uploader" *ngIf="uploader.queue.length==0" />`

👍 1 🎉 1

t246246 commented

2016-06-14 07:26:29 +00:00

(Migrated from github.com)

Or creating custom button like in demo.ts and set the <input> value to ''.

public onChange($event: any): void {
    let target = $event.target || $event.srcElement;
    this.fileUploadService.addToQueue(target.files);
    target.value = '';
}

See http://stackoverflow.com/questions/3144419/how-do-i-remove-a-file-from-the-filelist#3162319
I don't know if it works on old IE, but looks OK for IE11.

Or creating custom button like in [demo.ts](https://github.com/valor-software/ng2-file-upload/blob/ef6091c670d3260ede3430d98c7863e861dcd609/demo/components/file-upload/zs-file-demo/demo.ts) and set the `<input>` value to ''. ``` javascript public onChange($event: any): void { let target = $event.target || $event.srcElement; this.fileUploadService.addToQueue(target.files); target.value = ''; } ``` See http://stackoverflow.com/questions/3144419/how-do-i-remove-a-file-from-the-filelist#3162319 I don't know if it works on old IE, but looks OK for IE11.

👍 9 🎉 4

t246246 commented

2016-06-14 15:08:41 +00:00

(Migrated from github.com)

You don't need to create custom button. Suppose your target from which you want to delete filename is single <input>, add change event to it:

<input type="file" ng2FileSelect [uploader]="uploader" (change)="onChange($event);"/>

then set onAfterAddingFile function that are called after added to queue:

  private target: any;

  public constructor(private uploader: FileUploader) { };

  public ngOnInit(): void {
    this.uploader.setOptions({ url: URL });
    // do other init.
    this.uploader.onAfterAddingFile = (item => {
      if (this.target) this.target.value = '';
    });
  }

  private onChange(event:any):void {
    this.target = event.target || event.srcElement;
  }

You don't need to create custom button. Suppose your target from which you want to delete filename is single `<input>`, add change event to it: ``` <input type="file" ng2FileSelect [uploader]="uploader" (change)="onChange($event);"/> ``` then set `onAfterAddingFile` function that are called after added to queue: ``` javascript private target: any; public constructor(private uploader: FileUploader) { }; public ngOnInit(): void { this.uploader.setOptions({ url: URL }); // do other init. this.uploader.onAfterAddingFile = (item => { if (this.target) this.target.value = ''; }); } private onChange(event:any):void { this.target = event.target || event.srcElement; } ```

👍 6 🎉 1 😆 1

Namek commented

2016-06-16 10:09:52 +00:00

(Migrated from github.com)

Little cleaner:

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

@ViewChild('uploadEl') uploadElRef: ElementRef

ngAfterViewInit() {
 this.uploader.onAfterAddingFile = (item => {
   this.uploadElRef.nativeElement.value = ''
  });
}

Little cleaner: ``` html <input #uploadEl type="file" ng2FileSelect [uploader]="uploader" /> ``` ``` ts @ViewChild('uploadEl') uploadElRef: ElementRef ngAfterViewInit() { this.uploader.onAfterAddingFile = (item => { this.uploadElRef.nativeElement.value = '' }); } ```

👍 37 ❤️ 8 🎉 12 😆 2

heidermatos commented

2016-07-08 16:58:49 +00:00

(Migrated from github.com)

Thank @Namek !!! It worked.

heidermatos commented

2016-07-08 18:53:43 +00:00

(Migrated from github.com)

@t246246 your solution also worked. Thank you.

heidermatos commented

2016-07-08 19:01:14 +00:00

(Migrated from github.com)

My Contructor:

constructor(public  _router:Router, private _uploadService:UploadService, private _slimLoader:LoadingBarService) {
    this.slimLoader = _slimLoader;
    ....
    this.uploader.onAfterAddingFile = (fileItem:FileItem) => {
      if (this.target) {
        this.target.value = '';
      }
      ...
    };
    ...
  }

Method

public onChange(event:any):void {
    this.target = event.target || event.srcElement;
}

HTML

<input type="file" ng2FileSelect [uploader]="uploader" (change)="onChange($event);"/>

**My Contructor:** ``` constructor(public _router:Router, private _uploadService:UploadService, private _slimLoader:LoadingBarService) { this.slimLoader = _slimLoader; .... this.uploader.onAfterAddingFile = (fileItem:FileItem) => { if (this.target) { this.target.value = ''; } ... }; ... } ``` **Method** ``` public onChange(event:any):void { this.target = event.target || event.srcElement; } ``` **HTML** `<input type="file" ng2FileSelect [uploader]="uploader" (change)="onChange($event);"/>`

👍 1 🎉 1 😆 1

MarcosEich commented

2016-09-22 13:44:25 +00:00

(Migrated from github.com)

Does anyone knows why this happen and if a fix in the project is possible?

deeg commented

2017-01-31 20:57:21 +00:00

(Migrated from github.com)

@valorkin, this was fixed in 1.2.0 and can be closed.

👎 4

valorkin commented

2017-01-31 21:48:05 +00:00

(Migrated from github.com)

awesome

valorkin commented

2017-01-31 21:48:09 +00:00

(Migrated from github.com)

thanks

MarcosEich commented

2017-02-28 15:32:18 +00:00

(Migrated from github.com)

Great, thank you!

gtzinos commented

2017-05-09 08:20:04 +00:00

(Migrated from github.com)

guys FileUploader not exists in angular 4. Any workaround ?

jdbeaver commented

2017-07-19 18:04:10 +00:00

(Migrated from github.com)

Same problem in version 1.2.1 so I would say not fixed....

👍 4

JDVS20 commented

2017-10-17 22:27:40 +00:00

(Migrated from github.com)

I resolved this issue using this,

onChange(event:any):void{
event.srcElement.value = "";
}

I resolved this issue using this, onChange(event:any):void{ event.srcElement.value = ""; }

👍 3

souflam commented

2017-11-01 10:45:55 +00:00

(Migrated from github.com)

@JDVS20 i test your code this worked for me, but in the input file i can't see the name of file

hejiaji commented

2018-01-04 06:24:34 +00:00

(Migrated from github.com)

@JDVS20 if in IE11, the 'event.srcElement.value = ""' sentence will trigger the onChange event again

brunobertechini commented

2018-02-21 20:24:32 +00:00

(Migrated from github.com)

Why is this issue closed if its not solved ?

Bruno

Why is this issue closed if its not solved ? Bruno

😕 2

nayanrana commented

2018-11-03 10:39:17 +00:00

(Migrated from github.com)

thank you so much.

javascriptsoldier commented

2018-12-04 11:53:19 +00:00

(Migrated from github.com)

you need to empty the input file value after upload(here !'m clearing input value after onSuccessItem you may go with on onErrorItem also
here the code worked for me
HTML:
<input type="file" name="myfile" #activeFrameinputFile ng2FileSelect [uploader]="frameUploader" (change)="frameUploader.uploadAll()" />

component
import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';

@ViewChild('activeFrameinputFile') InputFrameVariable: ElementRef;

this.frameUploader.onSuccessItem = (item, response, status, headers) => {
this.InputFrameVariable.nativeElement.value = '';
};

you need to empty the input file value after upload(here !'m clearing input value after onSuccessItem you may go with on onErrorItem also here the code worked for me **HTML:** ` <input type="file" name="myfile" ` **#activeFrameinputFile** `ng2FileSelect [uploader]="frameUploader" (change)="frameUploader.uploadAll()" />` **component** `import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';` `@ViewChild('`**activeFrameinputFile**`') `**InputFrameVariable**`: ElementRef;` ` this.frameUploader.onSuccessItem = (item, response, status, headers) => {` `this.`**InputFrameVariable**`.nativeElement.value = '';` ` };`

👍 2

Jessyka commented

2018-12-27 18:41:02 +00:00

(Migrated from github.com)

set value = '' worked here. Thank you!

sribala333 commented

2019-12-02 09:35:31 +00:00

(Migrated from github.com)

I resolved this issue using this,

onChange(event:any):void{
event.srcElement.value = "";
}

Working fine when the method is called after file upload method

> I resolved this issue using this, > > onChange(event:any):void{ > event.srcElement.value = ""; > } Working fine when the method is called after file upload method

👍 2

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: dc/ng2-file-upload#220