angular - DropzoneJS ascunde zona dropzone după încărcare, cum să o readuc înapoi?

Folosesc angular2-dropzone-wrapper pe care l-am făcut să funcționeze aproape așa cum am nevoie.

Am această configurație:

this.dropZoneConfig = {
    server: this.url,
    maxFilesize: 50,
    acceptedFiles: ".xml",
    parallelUploads: 5,
    uploadMultiple: true,
    createImageThumbnails: false,
    addRemoveLinks: true,
    headers: { "Authorization": "Bearer " + sessionStorage.getItem("AccessToken")}
};

Când selectez fișiere pentru încărcare, primesc frumoase bare de progres. Când toate fișierele sunt încărcate, ajung cu un bloc mare gol care anterior conținea barele de progres. Nu văd nimic pentru că am setat createImageThumbnails: false, ceea ce este corect deoarece încarc fișiere XML și nu am nevoie de miniaturi.

Când toate fișierele sunt finalizate, vreau ca zona de încărcare să se reseteze. Toate fișierele încărcate anterior sunt eliminate și zona de încărcare revine la starea inițială.

Am găsit mai multe exemple de utilizare a metodei removeFile(file). Care pare să rezolve problema, dar exemplele sunt în JavaScript și eu folosesc TypeScript și nu reușesc să înțeleg cum să le convertesc (sunt nou în TypeScript).

Ascult cu atenție QueueComplete:

private onDropZoneQueueComplete(event) {
    console.log("In onDropZoneQueueComplete");
}

Aici cred că trebuie să apelez metoda removeFiles sau să apelez removeFile în ascultătorul de evenimente 'Success'.

EDITARE: HTML-ul meu:

  <dropzone [config]="dropZoneConfig" [message]="'Click or drag images here to upload'"
          (error)="onDropZoneUploadError($event)"
          (sendingmultiple)="onDropZoneSendingMultiple($event)"
          (queuecomplete)="onDropZoneQueueComplete($event)"></dropzone>

Răspuns #1

Documentația Dropzone spune că trebuie să apelezi removeFile() sau removeAllFiles() pe instanța Dropzone, adică myDropzone.removeAllFiles().

Dar, răsfoind codul sursă al angular2-dropzone-wrapper, am dat peste o metodă reset() care apelează this.dropzone.removeAllFiles() pentru tine. NOTĂ: Când apelezi removeAllFiles(), fișierele care sunt în proces de încărcare NU VOR FI eliminate.

Ai putea apela metoda reset() cu următoarea sintaxă:

<dropzone #dz (queuecomplete)="dz.reset()"></dropzone>

Sau, dacă ai mai mult cod de executat la queuecomplete, ai putea apela o metodă personalizată și să îi transmiți referința către directiva (dz):

<dropzone #dz (queuecomplete)="onDropZoneQueueComplete($event, dz);"></dropzone>

Apoi în clasa ta:

private onDropZoneQueueComplete(event, dz) {
  this.filesListComponent.reload();  // additional code
  dz.reset();
}

Paul a menționat, de asemenea, că a adăugat următorul CSS:

.dz-preview.dz-file-preview.dz-processing.dz-success.dz-complete { display: none !important; }

Pentru informarea ta, ideea mea inițială a fost: să obținem instanța Dropzone creată de directiva dropzone! Din păcate, angular2-dropzone-wrapper NU îți permite să accesezi instanța dropzone pe care o creează (this.dropzone este o proprietate privată). De asemenea, nu face exportAs a instanței (ceea ce ți-ar fi permis să scrii ceva de genul <dropzone #mydz="dzinstance"></dropzone> pentru a obține instanța dropzone în propria ta proprietate mydz).