ng2FileSelect clearing text after upload/cancel #744

New Issue

2017-04-13T12:25:17Z

jakoito commented

2017-04-13 12:25:17 +00:00

(Migrated from github.com)

Hi there,
I think it would be good idea to have an option to clear the text after successful upload.

Please excuse my poor knowledge of the matter but i did not find a nice way of doing it other way.
I would expose a method with this.element.nativeElement.value = '';
Or maybe some listener

Hi there, I think it would be good idea to have an option to clear the text after successful upload. Please excuse my poor knowledge of the matter but i did not find a nice way of doing it other way. I would expose a method with this.element.nativeElement.value = ''; Or maybe some listener

SouengKimmeng commented

2017-04-20 03:14:41 +00:00

(Migrated from github.com)

+1

amitdahan commented

2017-04-25 10:53:50 +00:00

(Migrated from github.com)

+1

qwe852147 commented

2017-05-04 00:13:29 +00:00

(Migrated from github.com)

removeAfterUpload ?

davidjconnolly commented

2017-05-15 02:32:02 +00:00

(Migrated from github.com)

It doesn't work.. It clears the queue but the text remains in the input control. Any suggestions? The only thing I've been able to get to work is a reset button. Calling resetForm from a method within the component doesn't even seem to work. I'm a little stumped.

jodevsa commented

2017-05-15 02:41:53 +00:00

(Migrated from github.com)

@davidjconnolly
Not Sure if it's the same case i had, but if it's about the view not updating it self or not in sync (no data binding)
try this fix:

definitions:
import {ChangeDetectorRef} from "angular/core"
constructor(private detector: ChangeDetectorRef){}

and after removeAfterupdate line :
this.detector.detectChanges();

@davidjconnolly Not Sure if it's the same case i had, but if it's about the view not updating it self or not in sync (no data binding) try this fix: definitions: import {ChangeDetectorRef} from "angular/core" constructor(private detector: ChangeDetectorRef){} and after removeAfterupdate line : this.detector.detectChanges();

davidjconnolly commented

2017-05-15 02:54:08 +00:00

(Migrated from github.com)

Thanks @jodevsa, I tried this.detctor.detectChanges() after calling .upload but it didn't work. removeAfterUpload is a property on the uploader library not something that you're able to call I don't think.

I have a complete hack workaround in the meantime until I can figure out how to fix it properly:

  onSubmit() {
    this.uploader.queue[0].upload()
    $('#reset-file-uploader').click()
  }

Thanks @jodevsa, I tried this.detctor.detectChanges() after calling .upload but it didn't work. removeAfterUpload is a property on the uploader library not something that you're able to call I don't think. I have a complete hack workaround in the meantime until I can figure out how to fix it properly: ``` onSubmit() { this.uploader.queue[0].upload() $('#reset-file-uploader').click() } ```

Ondrazar commented

2017-05-24 20:07:09 +00:00

(Migrated from github.com)

@davidjconnolly Can you share the button code as well please?

davidjconnolly commented

2017-05-26 02:52:07 +00:00

(Migrated from github.com)

Hey @Ondrazar ya sorry here's my code:

component.ts:

onSubmit() {
  this.uploader.queue[0].upload()
  $('#reset-file-uploader').click()
}

component.html:

<form (ngSubmit)="onSubmit()" novalidate>
  <div class="input-group input-group-sm">
    <input type="file" ng2FileSelect [uploader]="uploader" />
    <div class="input-group-btn">
      <button id="reset-file-uploader" type="reset" class="btn btn-outline-danger"><i class="fa fa-times"></i></button>
    </div>
    <div class="input-group-btn">
      <button type="submit" class="btn btn-outline-warning"><i class="fa fa-search"></i></button>
    </div>
  </div>
</form>

Hey @Ondrazar ya sorry here's my code: component.ts: ``` onSubmit() { this.uploader.queue[0].upload() $('#reset-file-uploader').click() } ``` component.html: ``` <form (ngSubmit)="onSubmit()" novalidate> <div class="input-group input-group-sm"> <input type="file" ng2FileSelect [uploader]="uploader" /> <div class="input-group-btn"> <button id="reset-file-uploader" type="reset" class="btn btn-outline-danger"><i class="fa fa-times"></i></button> </div> <div class="input-group-btn"> <button type="submit" class="btn btn-outline-warning"><i class="fa fa-search"></i></button> </div> </div> </form> ```

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: dc/ng2-file-upload#744