DropzoneJS hides dropzone area after uploading, ho

Question

I'm using angular2-dropzone-wrapper which I got working almost as I need.

I have this configuration:

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

When I select files to upload I get nicely progress bars. When all files are uploaded I end up with a large empty block which previously contained the progress bars. I don't see anything because I set createImageThumbnails: false which is correct because I'm uploading XML-files and don't need thumbnails.

When all files are finished I want the dropzone to reset. All previously uploaded files are removed and the dropzone area is back.

I've found several examples of using the removeFile(file) method. Which seems to do the trick but the examples are in JavaScript and I'm using TypeScript and can't figure out how to convert it (I'm new to TypeScript).

I do listen to the QueueComplete:

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

In here I think I need to call the removeFiles method or call removeFile in the 'Success' event listener.

EDIT: My HTML:

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

Answer 1

The Dropzone documentation says you need to call removeFile() or removeAllFiles() on the Dropzone instance, i.e. myDropzone.removeAllFiles().

But, browsing angular2-dropzone-wrapper's source code I stumbled upon a reset() method which calls this.dropzone.removeAllFiles() for you. SIDE NOTE: When calling removeAllFiles(), files that are in the process of being uploaded WILL NOT be removed.

You could call the reset() method with the following syntax:

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

Or, if you have more code to execute on queuecomplete you could call a custom method and pass it the reference to the directive (dz):

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

Then in your class:

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

Paul also mentionned he added the following CSS:

.dz-preview.dz-file-preview.dz-processing.dz-success.dz-comp‌​lete { display: none !important; }

FYI, my initial idea was: let's get a hold of the Dropzone instance created by the dropzone directive! Unfortunately angular2-dropzone-wrapper does NOT let you access the dropzone instance it creates (this.dropzone is a private property). Nor does it exportAs the instance (which would have let you write something like <dropzone #mydz="dzinstance"></dropzone> to get a hold of the dropzone instance in your own mydz property).