Re-select the same file doesn't work #871

New Issue

2017-08-22T18:56:04Z

bhaidar commented

2017-08-22 18:56:04 +00:00

(Migrated from github.com)

Hello,
I noticed that when selecting a file, then I remove it, then I try to select the same file, I am not able to do it.

In my case I am using the Single file select. My app is Angular 4.

Any idea how to change this behavior?

Thanks

Hello, I noticed that when selecting a file, then I remove it, then I try to select the same file, I am not able to do it. In my case I am using the Single file select. My app is Angular 4. Any idea how to change this behavior? Thanks

👍 10

juan-m-medina commented

2017-09-06 18:47:14 +00:00

(Migrated from github.com)

I am experiencing the same type of issue. Selecting a file uploaded during a single control initialization does not seem to work. One can select other files, but any file uploaded can't be added again until the component is reinitialized.

juan-m-medina commented

2017-09-06 18:56:14 +00:00

(Migrated from github.com)

This behavior can be reproduced on the test webpage for the library http://valor-software.com/ng2-file-upload/, just select the same file two times in a row during an upload operation. Even after removing the file from the queue the file does not get added and the "Upload All" button remains disabled.

benjcallaghan commented

2017-09-09 18:07:32 +00:00

(Migrated from github.com)

In my own experience, this is the typical behavior of an HTML input tag. I've seen this issue on other websites that don't make use of ng2-file-upload. The input tag holds the previous value, and only kicks off an upload when that value changes. Selecting the same value again doesn't upload the file a second time. Here's my workaround:

@ViewChild('fileInput') fileInput: any;
...
uploadFile() {
  this.uploader.uploadAll();
  this.fileInput.nativeElement.value = '';
}

<input #fileInput id="file" type="file" ng2FileSelect [uploader]="uploader" (change)="uploadFile()"/>

In my own experience, this is the typical behavior of an HTML input tag. I've seen this issue on other websites that don't make use of ng2-file-upload. The input tag holds the previous value, and only kicks off an upload when that value changes. Selecting the same value again doesn't upload the file a second time. Here's my workaround: ```typescript @ViewChild('fileInput') fileInput: any; ... uploadFile() { this.uploader.uploadAll(); this.fileInput.nativeElement.value = ''; } ``` ```html <input #fileInput id="file" type="file" ng2FileSelect [uploader]="uploader" (change)="uploadFile()"/> ```

👍 16 ❤️ 1 🎉 7 😆 1 🚀 1

mygu commented

2017-09-18 01:47:06 +00:00

(Migrated from github.com)

@benjcallaghan It works for me! But I write it code in the upload success callback function, like this.

uploader.onSuccessItem = (item: FileItem, response: string, status: number, headers: ParsedResponseHeaders) => {
        ... // Some of your code

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

@benjcallaghan It works for me! But I write it code in the upload success callback function, like this. ``` uploader.onSuccessItem = (item: FileItem, response: string, status: number, headers: ParsedResponseHeaders) => { ... // Some of your code this.uploaderRef.nativeElement.value = ''; }; ```

👍 3

adrianfaciu commented

2017-10-01 10:22:47 +00:00

(Migrated from github.com)

This is more related to the input tag, but if you want to add some functionality to ng2-file-upload to natively handle this, a pull request would be more than welcome 😉

👍 1

ambert0123 commented

2018-02-02 07:40:25 +00:00

(Migrated from github.com)

I use this,
Because success and failure will be working

this.uploader.onCompleteAll = () => { this.fileInput.nativeElement.value = ''; }

I use this, Because success and failure will be working ` this.uploader.onCompleteAll = () => { this.fileInput.nativeElement.value = ''; } `

jpgupta07 commented

2018-07-31 13:27:03 +00:00

(Migrated from github.com)

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

WORK FOR ME

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

👍 1

javascriptsoldier commented

2018-12-04 11:49:21 +00:00

(Migrated from github.com)

you need to empty the input file value after upload
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 = '';
};

this will definitely works

you need to empty the input file value after upload 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 = '';` ` };` this will definitely works

👍 3

Zeeshan0201 commented

2019-02-18 12:18:07 +00:00

(Migrated from github.com)

if (this.selectedFiles.length === 0) { this.epubFileUploader.nativeElement.value = ''} worked for me..

👍 1

liangshen001 commented

2019-06-11 03:42:13 +00:00

(Migrated from github.com)

(<any> FileSelectDirective.prototype).__defineSetter__('uploader', function(uploader) {
            const directive = this;
            this._uploader = uploader;
            const {clearQueue, onCompleteAll} = this._uploader;
            this._uploader.clearQueue = function() {
                clearQueue.apply(this, arguments);
                directive.element.nativeElement.value = '';
            };
            this._uploader.onCompleteAll = function() {
                onCompleteAll.apply(this, arguments);
                if (directive.getOptions().removeAfterUpload) {
                    directive.element.nativeElement.value = '';
                }
            }
        });
        (<any> FileSelectDirective.prototype).__defineGetter__('uploader', function() {
            return this._uploader;
        });

``` (<any> FileSelectDirective.prototype).__defineSetter__('uploader', function(uploader) { const directive = this; this._uploader = uploader; const {clearQueue, onCompleteAll} = this._uploader; this._uploader.clearQueue = function() { clearQueue.apply(this, arguments); directive.element.nativeElement.value = ''; }; this._uploader.onCompleteAll = function() { onCompleteAll.apply(this, arguments); if (directive.getOptions().removeAfterUpload) { directive.element.nativeElement.value = ''; } } }); (<any> FileSelectDirective.prototype).__defineGetter__('uploader', function() { return this._uploader; }); ```

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: dc/ng2-file-upload#871