DropzoneJS上传后隐藏了dropzone区域，如何找回它？ [英] DropzoneJS hides dropzone area after uploading, how to get it back?

问题描述

我正在使用 angular2-dropzone-wrapper 我几乎可以根据需要工作。

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

我具有以下配置：

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

当我选择要上传的文件时，我会得到很好的进度条。
上传完所有文件后，我最终得到一个大的空白块，该块之前包含进度条。我什么也看不到，因为我设置了 createImageThumbnails：false 这是正确的，因为我正在上传XML文件，不需要缩略图。

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.

所有文件完成后，我希望重置dropzone。

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

我发现了几个使用removeFile（file）方法的示例。看起来似乎可以解决问题，但是示例使用JavaScript，并且我使用的是TypeScript，却不知道如何转换（我是TypeScript的新手）。

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

我确实听了 QueueComplete ：

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

在这里，我想我需要调用removeFiles方法或调用removeFile 成功事件监听器。

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

编辑：
我的HTML：

EDIT: My HTML:

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

推荐答案

Dropzone文档说，您需要调用 removeFile（）或 Dropzone实例上> removeAllFiles（），即 myDropzone.removeAllFiles（）。

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

但是，在浏览angular2-dropzone-wrapper的源代码时，我偶然发现了 reset（）方法，该方法将为您调用 this.dropzone.removeAllFiles（）。注意：调用 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.

您可以使用以下语法调用 reset（）方法：

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

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

或者，如果您还有更多代码要在 queuecomplete 您可以调用自定义方法，并将其引用传递给指令（ dz ）：

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>

然后在您的课程中：

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

Paul还提到他添加了以下CSS：

Paul also mentionned he added the following CSS:

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

仅供参考，我的最初想法是：让我们掌握一下dropzone指令创建的Dropzone实例！不幸的是，angular2-dropzone-wrapper不允许您访问它创建的dropzone实例（ this.dropzone 是私有财产）。它也不会 exportAs 实例（这会让您编写类似< dropzone＃mydz = dzinstance>< / dropzone> 来拥有您自己的 mydz 属性中的dropzone实例）。

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

这篇关于DropzoneJS上传后隐藏了dropzone区域，如何找回它？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！