ngx-uploader icon indicating copy to clipboard operation
ngx-uploader copied to clipboard

Subsequent uploads in ngFileSelect do nothing.

Open BBaysinger opened this issue 7 years ago • 12 comments

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 avatar Feb 08 '18 01:02 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.

BBaysinger avatar Feb 08 '18 01:02 BBaysinger

@BBaysinger which browser do you use?

retailify avatar Feb 08 '18 07:02 retailify

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

BBaysinger avatar Feb 08 '18 12:02 BBaysinger

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

rocketkittens avatar Feb 12 '18 18:02 rocketkittens

Same issue here, chrome on osx

maikdiepenbroek avatar Feb 16 '18 15:02 maikdiepenbroek

I've created a PR for this: https://github.com/bleenco/ngx-uploader/pull/428

maikdiepenbroek avatar Feb 19 '18 07:02 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 = ''" />

maikdiepenbroek avatar Feb 21 '18 06:02 maikdiepenbroek

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

paulbonner avatar Feb 26 '18 19:02 paulbonner

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.

TardigradeX avatar Aug 03 '18 10:08 TardigradeX

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

dmayerdesign avatar Aug 13 '18 20:08 dmayerdesign

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

victor-panaite avatar Sep 26 '19 14:09 victor-panaite

I am also facing same issue subsequent uploads with angular 10, "ngx-uploader" v-"10.0.0". Also tried the suggested solutions https://github.com/bleenco/ngx-uploader/issues/423#issuecomment-535526767 but it is also not working in our case.

Is there any workaround?

ssharm2 avatar Jan 18 '21 13:01 ssharm2