Subsequent uploads in ngFileSelect do nothing.

[BBaysinger]

After uploading a single file or multiple files once, using ngFileSelect, does nothing. That is, my callback function onUploadOutput is not getting called the second time I use it.

This is in contrast with ngFileDrop, that will continue to let me drag/drop files and my callback function gets invoked as expected.

Does it need reset? Is there a workaround?

[BBaysinger]

I should also point out that the ngFileSelect does open the OS file-select dialog/modal (whatever it's called) but the component does nothing after that. So this is clearly a bug.

[retailify]

@BBaysinger which browser do you use?

[BBaysinger]

Oops, sorry. This was in Chrome on OS X.

[rocketkittens]

I am having the same issue. How do you reset component?

[maikdiepenbroek]

Same issue here, chrome on osx

[maikdiepenbroek]

I've created a PR for this: #428

[maikdiepenbroek]

Workaround is possible by adding a local template variable (#) to the input field and adding a click handler, like so:
<input #fileInput (click)="fileInput.value = ''" />

[paulbonner]

I had been seeing this problem only when attempting to upload the same file twice in a row. @maikdiepenbroek's suggestion works.

[TardigradeX]

Hi, the workaround given by @maikdiepenbroek has not worked for me.
But I found out the Upload Option maxUploads?: number was set to 1 in my case.
I thought that this option would handle how many uploads can be performed in one go,
but it seems it handles how many uploads the ngFileSelect directive allows through its lifetime.
Im not sure if thats intended behaviour, but for me removing the maxUploads option altogether allows
me to choose and upload any amount of files using the ngFileSelect directive.

[dmayerdesign]

@maikdiepenbroek's workaround worked for me, thank you!

[victor-panaite]

A solution that worked for me in case of restarting the upload was to add a reference on the component

<input
      #fakeUpload
      type="file"
      ngFileSelect
      [options]="options"
      [uploadInput]="uploadInput"
      (uploadOutput)="onUploadOutput($event)"
    />

and then right before creating the event for this.uploadInput.emit(event); I've manually trigger a change event on that reference.

const ev = new Event('change');    
this.fakeUploadInput.nativeElement.dispatchEvent(ev);
const event: UploadInput = {
      file: this.file,
      headers: {
        Authorization: `JWT ${token}`
      },
      method: 'POST',
      type: 'uploadAll',
      url: this.url
    };
this.uploadInput.emit(event);

[ssharm2]

I am also facing same issue subsequent uploads with angular 10, "ngx-uploader" v-"10.0.0". Also tried the suggested solutions #423 (comment) but it is also not working in our case.

Is there any workaround?