当前位置: 首页 > 软件库 > Web应用开发 > Web框架 >

ngx-dropzone

授权协议 Readme
开发语言 JavaScript
所属分类 Web应用开发、 Web框架
软件类型 开源软件
地区 不详
投 递 者 通安宁
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

ngx-dropzone

A lightweight and highly customizable Angular dropzone component for file uploads.

For a demo see DEMO. And the CODE for the demo.

Install

$ npm install --save ngx-dropzone

Usage

// in app.module.ts
import { NgxDropzoneModule } from 'ngx-dropzone';

@NgModule({
  ...
  imports: [
    NgxDropzoneModule
  ],
  ...
})
export class AppModule { }
<!-- in app.component.html -->
<ngx-dropzone (change)="onSelect($event)">
	<ngx-dropzone-label>Drop it, baby!</ngx-dropzone-label>
	<ngx-dropzone-preview *ngFor="let f of files" [removable]="true" (removed)="onRemove(f)">
		<ngx-dropzone-label>{{ f.name }} ({{ f.type }})</ngx-dropzone-label>
	</ngx-dropzone-preview>
</ngx-dropzone>
// in app.component.ts
files: File[] = [];

onSelect(event) {
  console.log(event);
  this.files.push(...event.addedFiles);
}

onRemove(event) {
  console.log(event);
  this.files.splice(this.files.indexOf(event), 1);
}

You can also use special preview components to preview images or videos:

<ngx-dropzone-image-preview ngProjectAs="ngx-dropzone-preview" *ngFor="let f of files" [file]="f">
  <ngx-dropzone-label>{{ f.name }} ({{ f.type }})</ngx-dropzone-label>
</ngx-dropzone-image-preview>
<ngx-dropzone-video-preview ngProjectAs="ngx-dropzone-preview" *ngFor="let f of files" [file]="f">
  <ngx-dropzone-label>{{ f.name }} ({{ f.type }})</ngx-dropzone-label>
</ngx-dropzone-video-preview>

Component documentation

ngx-dropzone

This component is the actual dropzone container. It contains the label and any file previews.It has an event listener for file drops and you can also click it to open the native file explorer for selection.

Use it as a stand-alone component <ngx-dropzone></ngx-dropzone> or by adding it as an attribute to a custom div (<div class="custom-dropzone" ngx-dropzone></div>).It will add the classes ngx-dz-hovered and ngx-dz-disabled to its host element if necessary. You could override the styling of these effects if you like to.

This component has the following Input properties:

  • [multiple]: Allow the selection of multiple files at once. Defaults to true.
  • accept: Set the accepted file types (as for a native file element). Defaults to '*'. Example: accept="image/jpeg,image/jpg,image/png,image/gif"
  • [maxFileSize]: Set the maximum size a single file may have, in bytes. Defaults to undefined.
  • [disabled]: Disable any user interaction with the component. Defaults to false.
  • [expandable]: Allow the dropzone container to expand vertically as the number of previewed files increases. Defaults to false which means that it will allow for horizontal scrolling.
  • [disableClick]: Prevent the file selector from opening when clicking the dropzone.
  • [id], [aria-label], [aria-labelledby], [aria-describedby]: Forward the accessibility properties to the file input element.

It has the following Output event:

  • (change): Emitted when any files were added or rejected. It returns a NgxDropzoneChangeEvent with the properties source: NgxDropzoneComponent, addedFiles: File[] and rejectedFiles: RejectedFile[].

The RejectedFile extends the native File and adds an optional reason property to tell you why the file was rejected. Its value will be either 'type' for the wrong acceptance type, size if it exceeds the maximum file size or no_multiple if multiple is set to false and more than one file is provided.

If you'd like to show the native file selector programmatically then do it as follows:

<ngx-dropzone #drop></ngx-dropzone>
<button (click)="drop.showFileSelector()">Open</button>

ngx-dropzone-label

This component has no attributes or methods and acts as a container for the label text using content projection.You can place anything inside of it and the text will always be centered.

ngx-dropzone-preview

This component shows a basic file preview when added inside the dropzone container. The previews can be focused using the tab key and be deleted using the backspace or delete keys.

This component has the following Input properties:

  • [file]: The dropped file to preview.
  • [removable]: Allow the user to remove files. Required to allow keyboard interaction and show the remove badge on hover.

It has the following Output event:

  • (removed): Emitted when the element should be removed (either by clicking the remove badge or by pressing backspace/delete keys). Returns the file from the Input property.

The ngx-dropzone-image-preview and ngx-dropzone-video-preview components inherit from this component but expand the preview functionality to display either images or videos directly in the component. See the wiki on how to implement your own custom preview components.

ngx-dropzone-remove-badge

This component is used within the previews to remove selected files. You can use it within your own preview component implementation if you like (see the wiki).

Other

How to upload a file to a Web API?

Licence

MIT © Peter Freeman

 相关资料
  • ngx-weui 是一个使用 Angular 构建的 WeUI 组件。 在线示例以及API文档。

  • ngx-fastdfs 是 nginx + lua +fastdfs 实现分布式图片实时动态压缩。 install 进入docker目录docker build -t  fastdfs:dev . 使用 docker -idt -p 80:80 fastdfs:dev /bin/bash进入容器执行/etc/rc.local 测试 进入容器执行test目录下的./test.sh或者直接执行下面脚本

  • ngx-markdown ngx-markdown is an Angular library that combines... Marked to parse markdown to HTML Prism.js for language syntax highlight Emoji-Toolkit for emoji support KaTeX for math expression rende

  • ngx-admin Who uses ngx-admin?| Documentation | Installation Guidelines | Angular templates New! Material theme for ngx-admin Material admin theme is based on the most popular Angular dashboard templat

  • @sweetalert2/ngx-sweetalert2 Official SweetAlert2 integration for Angular This is not a regular API wrapper for SweetAlert (which already works very well alone), it intends to provide Angular-esque ut

  • ngx-slick Support angular 6+, Slick 1.8.1 Example Installation To install this library, run: $ npm install ngx-slick --save Consuming your library Once you have published your library to npm, you can