{"_id":"@churchs19/ng2-dnd","_rev":"1-824e0c5a4adef2cf2918931c48a05927","name":"@churchs19/ng2-dnd","dist-tags":{"latest":"6.0.0"},"versions":{"6.0.0":{"name":"@churchs19/ng2-dnd","description":"Angular 6 Drag-and-Drop without dependencies","version":"6.0.0","repository":{"type":"git","url":"git+https://github.com/churchs19/ng2-dnd.git"},"keywords":["angular","angular2","angular 2","angular4","angular 4","angular5","angular 5","angular6","angular 6","drag","drop","drag-and-drop"],"author":{"name":"Shane Church"},"license":"MIT","bugs":{"url":"https://github.com/churchs19/ng2-dnd/issues"},"main":"bundles/churchs19-ng2-dnd.umd.js","module":"fesm5/churchs19-ng2-dnd.js","typings":"churchs19-ng2-dnd.d.ts","homepage":"https://github.com/churchs19/ng2-dnd#readme","peerDependencies":{"@angular/core":"^4.0.0 || ^5.0.0 || ^6.0.0","@angular/forms":"^4.0.0 || ^5.0.0 || ^6.0.0"},"devDependencies":{"@angular/animations":"^6.1.10","@angular/common":"^6.1.10","@angular/compiler":"^6.1.10","@angular/compiler-cli":"^6.1.10","@angular/core":"^6.1.10","@angular/forms":"^6.1.10","@angular/platform-browser":"^6.1.10","@angular/platform-browser-dynamic":"^6.1.10","@angular/platform-server":"^6.1.10","@types/hammerjs":"^2.0.36","@types/jasmine":"^2.8.9","@types/node":"^8.0.53","awesome-typescript-loader":"^3.1.3","codelyzer":"^4.5.0","core-js":"^2.5.7","istanbul-instrumenter-loader":"^3.0.1","jasmine-core":"^2.99.0","karma":"^1.7.0","karma-chrome-launcher":"^2.1.1","karma-coverage":"^1.1.2","karma-firefox-launcher":"^1.0.1","karma-jasmine":"^1.1.0","karma-mocha-reporter":"^2.2.3","karma-remap-coverage":"~0.1.4","karma-sourcemap-loader":"^0.3.7","karma-webpack":"^2.0.3","loader-utils":"^1.1.0","ng-packagr":"^4.3.0","reflect-metadata":"^0.1.10","rxjs":"^6.3.3","rxjs-compat":"^6.3.3","source-map-loader":"^0.2.1","ts-helpers":"1.1.2","tslib":"^1.9.0","tslint":"^5.4.3","tslint-loader":"^3.5.3","typescript":"^2.9.2","webpack":"^3.6.0","zone.js":"~0.8.26"},"engines":{"npm":">4.0.0"},"es2015":"fesm2015/churchs19-ng2-dnd.js","esm5":"esm5/churchs19-ng2-dnd.js","esm2015":"esm2015/churchs19-ng2-dnd.js","fesm5":"fesm5/churchs19-ng2-dnd.js","fesm2015":"fesm2015/churchs19-ng2-dnd.js","metadata":"churchs19-ng2-dnd.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.9.0"},"_id":"@churchs19/ng2-dnd@6.0.0","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"churchs19","email":"shane@s-church.net"},"dist":{"integrity":"sha512-2sPl8B/mIqlxwFGQaFbQgp3jAbe3J2hQez+es5+shwkQjl6SK0mE2DQ7Isx4HX2aOnsZFESf+0EXp/D3Exp6gA==","shasum":"a05ec84a5551983ff9c698708ea515ada8d80068","tarball":"https://registry.npmjs.org/@churchs19/ng2-dnd/-/ng2-dnd-6.0.0.tgz","fileCount":43,"unpackedSize":974603,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbwN5iCRA9TVsSAnZWagAAyskP/RTnoxs4CbPbnjihA3QB\ncuKSGQ67WVzD0QD/E4s8B158swpeLOCT9fNJx0mFfMgHZfEtVnTLF4MmMWN5\npCt9i7SYKmXpwfTeLXYOBHe2t71/pBwuMjvTw+iamJP8y3pVsNoOryDqD38z\n/NwnSQsWbzQYb8tzPv0SAzaQdR34/+Ubf8UIAAdb2tqRHjLkYdfrJ2t+K0Wi\nj1gFg+xc6h8zVxsbvmj/2drMYchSFjI9UKpN6941af89s7Lp8v9xjQZD1pC+\nrTMhVXi/rGm4P1Nkp4mHwNWjN6SaSL/6LCn/Xd+OvktMpNnpr5BKHMF/1/0X\nSlkxYzg1fgri/J3ZqIYNMmwftke6nIcSJIp1ulnVNNrW/G7LwZAVlgaiHajx\ngsk4STKkOKwBZ54Ep2zZgrgEv2OO/Qj2KfbTQ+CkBwk3/yKw4IX+ghV+po+z\ndXwqLOCDOMPUn2AuQSePnltIrUviVHYZGEJm5XWamEvrGWwXXFxY6CA4MxzJ\nkw0oyrVMsxRw53jWKpoXxrXx98M/n9VrJZLKUctmhSBe/3Gc3zG4W7ZqBIVI\nzVZIvITLpiy1JJ4hXmepDON+ByTvVn1VrgkAyMuj9qRXCBpSYWsnbxe2HOxH\nQMmQDtr+4amf5iXe13UDo5xsByLC7AoBQotubjhwbVm35EQgz7Oo7wuGcR1j\nKLWH\r\n=ZvpH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCZA+DhS50Z4Se4SCiZPVFXslgUvEfy+c6343H9LOmougIgSB+s/cz7v7ItuY05JOc+gqrO6anm9bzkvevih3Hrt1M="}]},"maintainers":[{"name":"churchs19","email":"shane@s-church.net"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ng2-dnd_6.0.0_1539366497926_0.42538514182653"},"_hasShrinkwrap":false}},"time":{"created":"2018-10-12T17:48:17.762Z","6.0.0":"2018-10-12T17:48:18.022Z","modified":"2022-04-04T22:57:14.001Z"},"maintainers":[{"name":"churchs19","email":"shane@s-church.net"}],"description":"Angular 6 Drag-and-Drop without dependencies","homepage":"https://github.com/churchs19/ng2-dnd#readme","keywords":["angular","angular2","angular 2","angular4","angular 4","angular5","angular 5","angular6","angular 6","drag","drop","drag-and-drop"],"repository":{"type":"git","url":"git+https://github.com/churchs19/ng2-dnd.git"},"author":{"name":"Shane Church"},"bugs":{"url":"https://github.com/churchs19/ng2-dnd/issues"},"license":"MIT","readme":"# Angular 6 Drag-and-Drop\n\nAngular 6 Drag-and-Drop without dependencies.\n\nForked from [Sergey Akopkokhyants - https://github.com/akserg/ng2-dnd](https://github.com/akserg/ng2-dnd).\n\n[![Build Status](https://travis-ci.org/churchs19/ng2-dnd.svg?branch=master)](https://travis-ci.org/churchs19/ng2-dnd)\n[![Dependency Status](https://david-dm.org/churchs19/ng2-dnd.svg)](https://david-dm.org/churchs19/ng2-dnd)\n[![devDependency Status](https://david-dm.org/churchs19/ng2-dnd/dev-status.svg)](https://david-dm.org/churchs19/ng2-dnd#info=devDependencies)\n[![Known Vulnerabilities](https://snyk.io/test/github/churchs19/ng2-dnd/badge.svg)](https://snyk.io/test/github/churchs19/ng2-dnd)\n\n_Some of these APIs and Components are not final and are subject to change!_\n\n## Transpilation to Angular Package Format\n\nThe library uses [ng-packagr](https://github.com/dherges/ng-packagr) to transpile into the Angular Package Format:\n\n- Bundles library in `FESM2015`, `FESM5`, and `UMD` formats\n\n- The npm package can be consumed by `Angular CLI`, `Webpack`, or `SystemJS`\n- Creates type definitions (`.d.ts`)\n- Generates Ahead-of-Time metadata (`.metadata.json`)\n- Auto-discovers and bundles secondary entry points such as `@my/foo`, `@my/foo/testing`, `@my/foo/bar`\n\n## Installation\n\n```bash\nnpm install @churchs19/ng2-dnd --save\n```\n\n## Demos (From original repo by Sergey Akopkokhyants)\n\n- Webpack demo available [here](https://angular-dxqjhj.stackblitz.io)\n- SystemJS demo available [here](http://embed.plnkr.co/JbG8Si)\n\n## Usage\n\nIf you use SystemJS to load your files, you might have to update your config:\n\n```js\nSystem.config({\n map: {\n 'ng2-dnd': 'node_modules/@churchs19/ng2-dnd/bundles/ng2-dnd.umd.js'\n }\n});\n```\n\n### 1. Add the default styles\n\n- Import the `style.css` into your web page from `node_modules/@churchs19/ng2-dnd/bundles/style.css`\n\n### 2. Import the `DndModule`\n\nImport `DndModule.forRoot()` in the NgModule of your application.\nThe `forRoot` method is a convention for modules that provide a singleton service.\n\n```ts\nimport {BrowserModule} from \"@angular/platform-browser\";\nimport {NgModule} from '@angular/core';\nimport {DndModule} from '@churchs19/ng2-dnd';\n\n@NgModule({\n imports: [\n BrowserModule,\n DndModule.forRoot()\n ],\n bootstrap: [AppComponent]\n})\nexport class AppModule {\n}\n```\n\nIf you have multiple NgModules and you use one as a shared NgModule (that you import in all of your other NgModules),\ndon't forget that you can use it to export the `DndModule` that you imported in order to avoid having to import it multiple times.\n\n```ts\n@NgModule({\n imports: [\n BrowserModule,\n DndModule\n ],\n exports: [BrowserModule, DndModule],\n})\nexport class SharedModule {\n}\n```\n\n### 3. Use Drag-and-Drop operations with no code\n\n```js\nimport {Component} from '@angular/core';\n\n@Component({\n selector: 'simple-dnd',\n template: `\n

Simple Drag-and-Drop

\n
\n
\n
\n
Available to drag
\n
\n
\n
\n
Drag Me
\n
\n
\n
\n
\n
\n
\n
\n
Place to drop
\n
\n
Item was dropped here
\n
\n
\n
\n
`\n})\nexport class SimpleDndComponent {\n simpleDrop: any = null;\n}\n```\n\n### 4. Add handle to restrict draggable zone of component\n\n```js\nimport {Component} from '@angular/core';\n\n@Component({\n selector: 'simple-dnd-handle',\n template: `\n

Simple Drag-and-Drop with handle

\n
\n
\n
\n
Available to drag
\n
\n
\n
\n
\n = \n Drag Handle\n
\n
\n
\n
\n
\n
\n
\n
\n
Place to drop
\n
\n
Item was dropped here
\n
\n
\n
\n
`\n})\nexport class SimpleDndHandleComponent {\n simpleDrop: any = null;\n}\n```\n\n### 5. Restriction Drag-and-Drop operations with drop zones\n\nYou can use property *dropZones* (actually an array) to specify in which place you would like to drop the draggable element:\n\n```js\nimport {Component} from '@angular/core';\n\n@Component({\n selector: 'zone-dnd',\n template: `\n

Restricted Drag-and-Drop with zones

\n
\n
\n
\n
Available to drag
\n
\n
\n
\n
Drag Me
\n
Zone 1 only
\n
\n
\n
\n
\n\n
\n
Available to drag
\n
\n
\n
\n
Drag Me
\n
Zone 1 & 2
\n
\n
\n
\n
\n
\n
\n
\n
Zone 1
\n
\n
Item was dropped here
\n
\n
\n
\n
\n
\n
Zone 2
\n
\n
Item was dropped here
\n
\n
\n
\n
`\n})\nexport class ZoneDndComponent {\n restrictedDrop1: any = null;\n restrictedDrop2: any = null;\n}\n```\n\n#### 6. Transfer custom data via Drag-and-Drop\n\nYou can transfer data from draggable to droppable component via *dragData* property of Draggable component:\n\n```js\nimport {Component} from '@angular/core';\n\n@Component({\n selector: 'custom-data-dnd',\n template: `\n

Transfer custom data in Drag-and-Drop

\n
\n
\n
\n
Available to drag
\n
\n
\n
\n
Drag Me
\n
{{transferData | json}}
\n
\n
\n
\n
\n
\n
\n
\n
Place to drop (Items:{{receivedData.length}})
\n
\n
0\" *ngFor=\"let data of receivedData\">{{data | json}}
\n
\n
\n
\n
`\n})\nexport class CustomDataDndComponent {\n transferData: Object = {id: 1, msg: 'Hello'};\n receivedData: Array = [];\n\n transferDataSuccess($event: any) {\n this.receivedData.push($event);\n }\n}\n```\n\n### 7. Use a custom function to determine where dropping is allowed\n\nFor use-cases when a static set of `dropZone`s is not possible, a custom function can be used to dynamically determine whether an item can be dropped or not. To achieve that, set the `allowDrop` property to this boolean function.\n\nIn the following example, we have two containers that only accept numbers that are multiples of a user-input base integer. `dropZone`s are not helpful here because they are static, whereas the user input is dynamic.\n\n```js\nimport { Component } from '@angular/core';\n\n@Component({\n selector: 'custom-function-dnd',\n template: `\n

Use a custom function to determine where dropping is allowed

\n
\n
\n
\n
Available to drag
\n
\n
\n
dragData = 6
\n
\n
\n
dragData = 10
\n
\n
\n
dragData = 30
\n
\n
\n
\n
\n
\n 
allowDropFunction(baseInteger: any): any {{ '{' }}\n  return (dragData: any) => dragData % baseInteger === 0;\n{{ '}' }}
\n
\n
\n
\n
\n Multiples of\n \n only\n
\n
\n
dragData = {{item}}
\n
\n
\n
\n
\n
\n
\n Multiples of\n \n only\n
\n
\n
dragData = {{item}}
\n
\n
\n
\n
\n
\n
\n`\n})\nexport class CustomFunctionDndComponent {\n box1Integer: number = 3;\n box2Integer: number = 10;\n\n box1Items: string[] = [];\n box2Items: string[] = [];\n\n allowDropFunction(baseInteger: number): any {\n return (dragData: any) => dragData % baseInteger === 0;\n }\n\n addTobox1Items($event: any) {\n this.box1Items.push($event.dragData);\n }\n\n addTobox2Items($event: any) {\n this.box2Items.push($event.dragData);\n }\n}\n```\n\n### 8. Shopping basket with Drag-and-Drop\n\nHere is an example of shopping backet with products adding via drag and drop operation:\n\n```js\nimport { Component } from '@angular/core';\n\n@Component({\n selector: 'shoping-basket-dnd',\n template: `\n

Drag-and-Drop - Shopping basket

\n
\n\n
\n
\n
Available products
\n
\n
0\" [dragData]=\"product\" (onDragSuccess)=\"orderedProduct($event)\" [dropZones]=\"['demo1']\">\n
\n
{{product.name}} - \\${{product.cost}}
(available: {{product.quantity}})
\n
0\">{{product.name}}
(NOT available)
\n
\n
\n
\n
\n
\n
\n
\n
Shopping Basket
(to pay: \\${{totalCost()}})
\n
\n
\n
\n {{product.name}}
(ordered: {{product.quantity}}
cost: \\${{product.cost * product.quantity}})\n
\n
\n
\n
\n
\n
`\n})\nexport class ShoppingBasketDndComponent {\n availableProducts: Array = [];\n shoppingBasket: Array = [];\n\n constructor() {\n this.availableProducts.push(new Product('Blue Shoes', 3, 35));\n this.availableProducts.push(new Product('Good Jacket', 1, 90));\n this.availableProducts.push(new Product('Red Shirt', 5, 12));\n this.availableProducts.push(new Product('Blue Jeans', 4, 60));\n }\n\n orderedProduct($event: any) {\n let orderedProduct: Product = $event.dragData;\n orderedProduct.quantity--;\n }\n\n addToBasket($event: any) {\n let newProduct: Product = $event.dragData;\n for (let indx in this.shoppingBasket) {\n let product: Product = this.shoppingBasket[indx];\n if (product.name === newProduct.name) {\n product.quantity++;\n return;\n }\n }\n this.shoppingBasket.push(new Product(newProduct.name, 1, newProduct.cost));\n this.shoppingBasket.sort((a: Product, b: Product) => {\n return a.name.localeCompare(b.name);\n });\n }\n\n totalCost(): number {\n let cost: number = 0;\n for (let indx in this.shoppingBasket) {\n let product: Product = this.shoppingBasket[indx];\n cost += (product.cost * product.quantity);\n }\n return cost;\n }\n}\n\nclass Product {\n constructor(public name: string, public quantity: number, public cost: number) {}\n}\n```\n\n### 9. Simple sortable with Drag-and-Drop\n\nHere is an example of simple sortable of favorite drinks moving in container via drag and drop operation:\n\n```js\nimport {Component} from '@angular/core';\n\n@Component({\n selector: 'simple-sortable',\n template: `\n

Simple sortable

\n
\n
\n
\n
\n Favorite drinks\n
\n
\n
    \n
  • {{item}}
    • \n
\n
\n
\n
\n
\n
\n
\n My prefences:
\n {{i + 1}}) {{item}}
\n
\n
\n
\n
`\n})\nexport class SimpleSortableComponent {\n listOne: Array = ['Coffee', 'Orange Juice', 'Red Wine', 'Unhealty drink!', 'Water'];\n}\n```\n\n### 10. Simple sortable with Drag-and-Drop handle\n\nAdd handle to restict grip zone of sortable component.\n\n```js\nimport {Component} from '@angular/core';\n\n@Component({\n selector: 'simple-sortable-handle',\n template: `\n

Simple sortable handle

\n
\n
\n
\n
\n Favorite drinks\n
\n
\n
    \n
  • \n = \n {{item}}\n
    • \n
\n
\n
\n
\n
\n
\n
\n My prefences:
\n {{i + 1}}) {{item}}
\n
\n
\n
\n
`\n})\nexport class SimpleSortableHandleComponent {\n listOne: Array = ['Coffee', 'Orange Juice', 'Red Wine', 'Unhealty drink!', 'Water'];\n}\n```\n\n### 11. Simple sortable With Drop into recycle bin\n\nHere is an example of multi list sortable of boxers moving in container and between containers via drag and drop operation:\n\n```js\nimport {Component} from '@angular/core';\n\n@Component({\n selector: 'recycle-multi-sortable',\n template: `\n

Simple sortable With Drop into recycle bin

\n
\n
\n
\n
\n Favorite drinks\n
\n
\n
    \n
  • {{item}}
    • \n
\n
\n
\n
\n
\n
\n
\n Recycle bin: Drag into me to delete it
\n
\n
\n
\n Recycled: {{listRecycled.toString()}} \n
\n
\n
`\n})\nexport class RecycleMultiSortableComponent {\n listOne: Array = ['Coffee', 'Orange Juice', 'Red Wine', 'Unhealty drink!', 'Water'];\n listRecycled: Array = [];\n}\n```\n\n### 12. Simple sortable With Drop into something, without delete it\n\nHere is an example of simple sortable list of items copying in target container:\n\n```js\nimport {Component} from '@angular/core';\n\n@Component({\n selector: 'simple-sortable-copy',\n template: `\n

Simple sortable With Drop into something, without delete it

\n
\n
\n
\n
Source List
\n
\n
    \n
  • {{source.name}}
    • \n
\n
\n
\n
\n
\n
\n
Target List
\n
\n
    \n
  • \n {{target.name}}\n
    • \n
\n
\n
\n
\n
`\n})\nexport class SimpleSortableCopyComponent {\n\n sourceList: Widget[] = [\n new Widget('1'), new Widget('2'),\n new Widget('3'), new Widget('4'),\n new Widget('5'), new Widget('6')\n ];\n\n targetList: Widget[] = [];\n addTo($event: any) {\n this.targetList.push($event.dragData);\n }\n}\n\nclass Widget {\n constructor(public name: string) {}\n}\n```\n\n### 13. Multi list sortable between containers\n\nHere is an example of multi list sortable of boxers moving in container and between containers via drag and drop operation:\n\n```js\nimport {Component} from '@angular/core';\n\n@Component({\n selector: 'embedded-sortable',\n template: `\n

Move items between multi list sortable containers

\n
\n
\n Drag Containers \n
\n
\n
\n
\n {{container.id}} - {{container.name}}\n
\n
\n
    \n
  • {{widget.name}}
    • \n
\n
\n
\n
\n
\n
\n
\n
\n
Widgets
\n
\n
\n
\n {{widget.name}}\n
\n
\n
\n
\n
\n
`\n})\nexport class EmbeddedSortableComponent {\n dragOperation: boolean = false;\n\n containers: Array = [\n new Container(1, 'Container 1', [new Widget('1'), new Widget('2')]),\n new Container(2, 'Container 2', [new Widget('3'), new Widget('4')]),\n new Container(3, 'Container 3', [new Widget('5'), new Widget('6')])\n ];\n\n widgets: Array = [];\n addTo($event: any) {\n if ($event) {\n this.widgets.push($event.dragData);\n }\n }\n}\n\nclass Container {\n constructor(public id: number, public name: string, public widgets: Array) {}\n}\n\nclass Widget {\n constructor(public name: string) {}\n}\n```\n\n### 14. Simple FormArray sortable with Drag-and-Drop\n\nHere is an example of simple sortable of favorite drinks moving in container via drag and drop operation but using FormArray instead of Array:\n\n```js\nimport {Component} from '@angular/core';\nimport {FormArray, FormControl} from '@angular/forms';\n\n@Component({\n selector: 'simple-formarray-sortable',\n template: `\n

Simple FormArray sortable

\n
\n
\n
\n
\n Favorite drinks\n
\n
\n
    \n
    • \n
\n
\n
\n
\n
\n
\n
\n My prefences:
\n {{i + 1}}) {{item.value}}
\n
\n
\n
\n
`\n})\nexport class SimpleFormArraySortableComponent {\n listOne: FormArray = new FormArray([\n new FormControl('Coffee'),\n new FormControl('Orange Juice'),\n new FormControl('Red Wine'),\n new FormControl('Unhealty drink!'),\n new FormControl('Water')\n ]);\n}\n```\n\n## How to pass multiple data in dragData while dragging\n\n1) As an array:\n\n``` html\n[dragData]=\"[aComponent,'component-in-bar']\"\n```\n\n``` javascript\nloadComponent($event){\n console.log($event.dragData[0]); // aComponent\n console.log($event.dragData[1]); // 'component-in-bar' OR 'component-in-designer'\n}\n```\n\n\n2) As an object:\n\n\n``` html\n[dragData]=\"{component: aComponent, location: 'component-in-bar'}\"\n```\n\n``` javascript\nloadComponent($event){\n console.log($event.dragData.component); // aComponent\n console.log($event.dragData.location); // 'component-in-bar' OR 'component-in-designer'\n}\n```\n\n### Retreiving files in a drop zone\n\nSince it is possible to drag and drop one or more files to a drop zone, you need to handle the incoming files.\n\n```js\nimport {Component} from '@angular/core';\nimport {Http, Headers} from '@angular/http';\nimport {DND_PROVIDERS, DND_DIRECTIVES} from '@churchs19/ng2-dnd/ng2-dnd';\nimport {bootstrap} from '@angular/platform-browser-dynamic';\n\nbootstrap(AppComponent, [\n DND_PROVIDERS // It is required to have 1 unique instance of your service\n]);\n\n@Component({\n selector: 'app',\n directives: [DND_DIRECTIVES],\n template: `\n

Simple Drag-and-Drop

\n
\n
\n
>\n
Place to drop
\n
\n
\n
\n
\n
\n`\n})\nexport class AppComponent {\n\n constructor(private _http: Http) { }\n\n /**\n * The $event is a structure:\n * {\n * dragData: any,\n * mouseEvent: MouseEvent\n * }\n */\n transferDataSuccess($event) {\n // let attachmentUploadUrl = 'assets/data/offerspec/offerspec.json';\n // loading the FileList from the dataTransfer\n let dataTransfer: DataTransfer = $event.mouseEvent.dataTransfer;\n if (dataTransfer && dataTransfer.files) {\n\n // needed to support posting binaries and usual form values\n let headers = new Headers();\n headers.append('Content-Type', 'multipart/form-data');\n\n let files: FileList = dataTransfer.files;\n \n // uploading the files one by one asynchrounusly\n for (let i = 0; i < files.length; i++) {\n let file: File = files[i];\n \n // just for debugging\n console.log('Name: ' + file.name + '\\n Type: ' + file.type + '\\n Size: ' + file.size + '\\n Date: ' + file.lastModifiedDate);\n \n // collecting the data to post\n var data = new FormData();\n data.append('file', file);\n data.append('fileName', file.name);\n data.append('fileSize', file.size);\n data.append('fileType', file.type);\n data.append('fileLastMod', file.lastModifiedDate);\n \n // posting the data\n this._http\n .post(attachmentUploadUrl, data, {\n headers: headers\n })\n .toPromise()\n .catch(reason => {\n console.log(JSON.stringify(reason));\n });\n }\n }\n }\n}\n\n# Credits\n- [Sergey Akopkokhyants](https://github.com/akserg/ng2-dnd)\n- [Francesco Cina](https://github.com/ufoscout)\n- [Valerii Kuznetsov](https://github.com/solival)\n- [Shane Oborn](https://github.com/obosha)\n- [Juergen Gutsch](https://github.com/JuergenGutsch)\n- [Damjan Cilenšek](https://github.com/loudandwicked)\n\n# License\n [MIT](/LICENSE)\n","readmeFilename":"README.md"}