angular ng2 file upload issue

Question

I am trying to upload different documents. But the problem comes when i choose a file 2nd time it gets added to fileArray, it don't get replaced.

For example, i have choosen a picture for 1st input. Then i decided to choose different picture for the same input then it will get added to an array of files so when i will upload it, that previous picture will also be uploaded which i don't want to.

Is there any solution (other than using multiple files upload with single button ) so that when i choose a file 2nd time then it will get replaced instead of added to the files array ?

uploadDocument.html File :

<form (ngSubmit)=f.form.valid && formSubmit() #f="ngForm">

        <input type="file" class="form-control ml-2" name="photo" ng2FileSelect [uploader]="uploader" />
          <input type="file" class="form-control ml-2" name="document1" ng2FileSelect [uploader]="uploader" />
            <input type="file" class="form-control ml-2" name="pic2" ng2FileSelect [uploader]="uploader" />

    <button type="submit" class="btn btn-danger btn-lg btn-fill">Upload</button>

</form>

uploadDocument.component.ts File :

import { Component, OnInit, Renderer, ElementRef } from '@angular/core';
import { UserService } from '../_services';
import { ActivatedRoute, Router, Params} from '@angular/router';
import { FileUploader } from 'ng2-file-upload/ng2-file-upload';
import { FileSelectDirective } from 'ng2-file-upload';

const URL = 'http://localhost:3002/api/upload';

@Component({
    selector: 'app-uploadDocument',
    templateUrl: './uploadDocument.component.html',
    styleUrls: ['./uploadDocument.component.scss']
})

export class UploadDocument implements OnInit {
    model: any = {};
    mobile: number;
    options: boolean;
    loading = false;
    public uploader:FileUploader = new FileUploader({url: URL});

    constructor(private userService: UserService, private route:ActivatedRoute,private router:Router, private el: ElementRef) { }

    ngOnInit() {


        this.uploader.onBeforeUploadItem = (item)=> {console.log("Item"); console.log(item)};

        this.uploader.onAfterAddingFile = (file)=> { file.withCredentials = false;};

       this.uploader.onCompleteItem = (item:any, response:any, status:any, headers:any) => {
             console.log("ImageUpload:uploaded:", item, status, response);
        };
    }

    formSubmit() {
        this.uploader.uploadAll();
    }

}

Answer 1

Even I lost couple of hours due to this. At last I done one tweak to fix it. Whenever a new file is uploaded, the uploaded queue is reset to store only the latest file only.This is done with the help of onAfterAddingFile callback of the library provided function. Below is the changed code.

uploadDocument.component.ts File :

import { Component, OnInit, Renderer, ElementRef } from '@angular/core';
import { UserService } from '../_services';
import { ActivatedRoute, Router, Params} from '@angular/router';
import { FileUploader, FileItem } from 'ng2-file-upload';

const URL = 'http://localhost:3002/api/upload';

@Component({
    selector: 'app-uploadDocument',
    templateUrl: './uploadDocument.component.html',
    styleUrls: ['./uploadDocument.component.scss']
})

export class UploadDocument implements OnInit {
    model: any = {};
    mobile: number;
    options: boolean;
    loading = false;
    public uploader:FileUploader = new FileUploader({url: URL});

    constructor(private userService: UserService, private route:ActivatedRoute,private router:Router, private el: ElementRef) { }

    ngOnInit() {

         this.uploader.onAfterAddingFile = (fileItem: FileItem) => this.onAfterAddingFile(fileItem)

    }

    onAfterAddingFile(fileItem: FileItem) {
       let latestFile = this.uploader.queue[this.uploader.queue.length-1]
       this.uploader.queue = []; 
       this.uploader.queue.push(latestFile);
    }

    formSubmit() {
        this.uploader.uploadAll();
    }

}

Hope this helps you!.