Re-select the same file doesn't work

[bhaidar]

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

[juan-m-medina]

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]

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]

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()"/>

[mygu]

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

[adrianfaciu]

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 😉

[ambert0123]

I use this,
Because success and failure will be working

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

[jpgupta07]

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

WORK FOR ME

[javascriptsoldier]

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

[Zeeshan0201]

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

[liangshen001]

(<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;
        });

[brianreinhold]

@benjcallaghan

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()"/>

I don't understand your work-a-round but it solves the problem. I know it is a while ago but I would greatly appreciate it if you could explain it or point me to a reference as to what is happening here. (Aside: What is the data type of 'fileInput'?)

Thanks

[benjcallaghan]

If you have <input type="file"/>, select a file, then re-select the same file, the change event only fires once. To make the change event fire every time, even if the user selects the same file, I reset the value of the input back to nothing (after I'm done processing whatever file is). Thus, when the user selects the file a second time, the input "changes" from nothing to the file, and the change event fires as normal.

fileInput has the type ElementRef<HTMLInputElement>

For the record, I have no idea if such a workaround is good practice anymore. I have long since moved away from the project that used it, and I've moved away from the company that owns it.

[brianreinhold]

@benjcallaghan Thanks for the explanation. I still have not caught on to the details of how to programmatically directly interoperate with the html - I am still at the level of the Angular directives for that purpose.

That being said, your work-a-round still proved good in my use case which is using Angular 16!