我对SystemJS和NGModules有点迷失(我只是按照说明操作)。
对于dropzone,我尝试在我的head
中添加dropzone.js / css作为脚本,并在我的表单中添加了类dropzone
,但它没有'工作,没有创建dropzone ...
任何人都可以告诉我如何在Angular 2(最终版本)中实现Dropzone?
答案 0 :(得分:3)
这是一个包含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;
}
}
我真的希望有所帮助。
答案 1 :(得分:1)
我可以建议这样做:
https://github.com/zefoy/ngx-dropzone-wrapper
let Dropzone = require
不再被视为Angular 2+中的大炮(我们现在已达到5和近6版)
答案 2 :(得分:1)
在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上传文件的网址。
对我有用。干杯!
答案 3 :(得分:0)
如果您不受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>