Question

我对SystemJS和NGModules有点迷失（我只是按照说明操作）。

对于dropzone，我尝试在我的head中添加dropzone.js / css作为脚本，并在我的表单中添加了类dropzone，但它没有'工作，没有创建dropzone ...

任何人都可以告诉我如何在Angular 2（最终版本）中实现Dropzone？

Answer 1

这是一个包含Dropzone.js的小组件：

首次运行

npm install --save dropzone

import { Component, AfterViewInit, EventEmitter, OnDestroy } from '@angular/core';
import { Output } from '@angular/core/src/metadata/directives';

let Dropzone = require('../../../node_modules/dropzone/dist/dropzone-amd-module');

@Component({
  selector: 'hsr-dropzone',
  templateUrl: 'dropzone.component.html',
  styleUrls: ['dropzone.component.scss']
})
export class DropzoneComponent implements AfterViewInit, OnDestroy {
  @Output() filesUploading: EventEmitter<File[]> = new EventEmitter<File[]>();
  // TODO: acceptedFiles option as input

  dropzone;

  constructor() {
  }

  get fileDropped(): boolean {
    if (this.dropzone) {
      return this.dropzone.files.length > 0;
    }
    return false;
  }

  ngAfterViewInit() {
    this.dropzone = new Dropzone('div#my_dropzone', {
      url: (files) => {
        this.filesUploading.emit(files);
      },
      autoProcessQueue: false,
      uploadMultiple: true,
      parallelUploads: 20,
      hiddenInputContainer: '#dropzone-drop-area',
      dictDefaultMessage: '',
      maxFiles: 20,
      acceptedFiles: 'image/*',
      clickable: '#dropzone-drop-area',
      previewsContainer: '#dropzone-drop-area',
      previewTemplate: `
<div class="dz-preview dz-file-preview">
  <div class="dz-details">
    <img data-dz-thumbnail/>
  </div>
</div>
`
    });
    this.dropzone.autoDiscover = false;

    this.dropzone.on('addedfile', (file) => {
      /*file.previewElement.addEventListener('click', () => {
       this.dropzone.removeFile(file);
       });*/
    });
    this.dropzone.on('completemultiple', (files) => {
      this.dropzone.removeAllFiles();
    });
    // Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead
    // of the sending event because uploadMultiple is set to true.
    this.dropzone.on('sendingmultiple', () => {
      console.log('sending!!!!!!!');
    });
  }

  ngOnDestroy() {
    this.dropzone.disable();
  }

  upload() {
    this.dropzone.processQueue();
  }
}

TEMPLATE：

<div class="dropzone-container" id="my_dropzone">
  <div id="dropzone-drop-area" class="dropzone-drop-area">
    <div *ngIf="!fileDropped" class="centered noselect clickthrough">
      <ng-content></ng-content>
    </div>
  </div>
</div>

<button md-raised-button style="float: right;" *ngIf="fileDropped" (click)="upload()">
  <i class="fa fa-upload fa-lg"></i>
</button>

样式：

.dropzone-container {
  width: 100%;
}

.dropzone-drop-area {
  border: dashed 3px grey;
  width: 100%;
  min-height: 120px;
  box-sizing: border-box;
  padding: 6px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  cursor: pointer;
  position: relative;
  &:hover {
    color: darkorange;
    border-color: darkorange;
  }
}

我真的希望有所帮助。

Answer 2

我可以建议这样做：

https://github.com/zefoy/ngx-dropzone-wrapper

let Dropzone = require不再被视为Angular 2+中的大炮（我们现在已达到5和近6版）

Answer 3

在Angular 6（Angular版本：6.1.8）中使用Dropzone的步骤

1。。使用angular CLI创建angular项目并从dropzonejs.com网站下载 dropzone dist文件夹。

2。（从下载的dist文件夹中）放入 dropzone.css 在项目 ../ src / assets / css 文件夹中（如果没有）存在，然后创建），然后将其导入 styles.css 文件中，如下所示：

styles.css
----------

@import "../src/assets/css/dropzone.css";

3。（从下载的dist文件夹中）放置 dropzone.js 文件到项目 ../ src / assets / js 文件夹中（如果不存在，然后创建）并将以下值放在 angular.json 文件的scripts选项中：

angular.json
------------

    "scripts": [
        "src/assets/js/lib/dropzone.js"
    ]

4。现在，在组件ts文件（例如，app.component.ts）中，按照以下方式定义Dropzone及其选项：

app.component.ts
----------------

    import { Component, OnInit } from '@angular/core';

    declare var Dropzone: any;

    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent implements OnInit {

      ngOnInit(): void {

        Dropzone.options.pdfDropzone = {
          paramName: 'file',
          maxFilesize: 5, // MB
          uploadMultiple: true,
          autoProcessQueue: true,
          init: function () {
              this.on('addedfile', function (file) {
                  const removeButton = Dropzone.createElement('<button class=\'btn btn-sm btn-block\'>Remove file</button>');
                  const _this = this;
                  removeButton.addEventListener('click', function (e) {
                      e.preventDefault();
                      e.stopPropagation();
                      _this.removeFile(file);
                  });

                  file.previewElement.appendChild(removeButton);
              });
          }
      };
      }
    }

5。。现在，在html文件中添加以下div：

app.component.html
------------------

    <div>
        <form action="http://localhost:8080/api/upload/file"
              class="dropzone dz-clickable"
              id="pdf-dropzone">
        </form>
    </div>

表单元素的操作属性是dropzone上传文件的网址。

对我有用。干杯！

Answer 4

如果您不受dropzone.js的约束，我可能会建议您使用以下库。

我编写了一个高度可定制的Angular组件，该组件实现了正确的Drag'n'Drop行为，因此我不需要一遍又一遍地复制它。它返回已删除文件的列表作为输出事件。
可以找到here。

导入模块后，您可以访问该组件：

<ngx-dropzone [multiple]="false" [maxFileSize]="2000"></ngx-dropzone>

您可以设置一些选项，它带有不错的默认样式（屏幕快照可以在GitHub存储库中找到）。如果需要，您甚至可以将自己的div容器与您的自定义样式和悬停效果一起放入放置区。有关详细信息，请参见API说明。

<ngx-dropzone [customContent]="customDropzone" (filesDropped)="onFilesDropped($event)">
<ng-template #customDropzone>
    <div class="custom-dropzone">
        This is my custom content
    </div>
</ng-template>

使用带有Angular 2的dropzone的简单方法

4 个答案: