{"_id":"@bastienmoulia/ngx-file-drop","_rev":"4-79a4f33849d2196468956a0705ee124c","time":{"7.0.0":"2019-05-29T12:52:05.913Z","created":"2019-05-29T12:52:27.154Z","7.0.1":"2019-05-29T12:52:27.329Z","modified":"2022-04-04T17:47:22.412Z"},"name":"@bastienmoulia/ngx-file-drop","dist-tags":{"latest":"7.0.1"},"versions":{"7.0.1":{"name":"@bastienmoulia/ngx-file-drop","version":"7.0.1","license":"MIT","keywords":["angular","file drop","folder drop","file upload","folder upload","typescript","drag and drop"],"repository":{"type":"git","url":"git+https://github.com/georgipeltekov/ngx-file-drop.git"},"peerDependencies":{"@angular/common":"^8.0.0","@angular/platform-browser":"^8.0.0","@angular/platform-browser-dynamic":"^8.0.0","rxjs":"^6.4.0","zone.js":"~0.9.1"},"devDependencies":{"@angular-devkit/build-angular":"^0.13.9","@angular-devkit/core":"^7.0.2","@angular/cli":"^7.0.0","@angular/common":"^7.0.0","@angular/compiler":"^7.0.0","@angular/compiler-cli":"^7.0.0","@angular/core":"^7.0.0","@types/node":"^8.0.53","ng-packagr":"^4.4.0","ts-node":"~7.0.1","tsickle":"^0.33.0","tslint":"5.11.0","typescript":"3.1.3"},"main":"bundles/bastienmoulia-ngx-file-drop.umd.js","module":"fesm5/bastienmoulia-ngx-file-drop.js","es2015":"fesm2015/bastienmoulia-ngx-file-drop.js","esm5":"esm5/bastienmoulia-ngx-file-drop.js","esm2015":"esm2015/bastienmoulia-ngx-file-drop.js","fesm5":"fesm5/bastienmoulia-ngx-file-drop.js","fesm2015":"fesm2015/bastienmoulia-ngx-file-drop.js","typings":"bastienmoulia-ngx-file-drop.d.ts","metadata":"bastienmoulia-ngx-file-drop.metadata.json","sideEffects":false,"dependencies":{"tslib":"^1.9.0"},"description":"[![npm](https://img.shields.io/npm/v/ngx-file-drop.svg?style=flat-square)](https://www.npmjs.com/package/ngx-file-drop) [![npm downloads](https://img.shields.io/npm/dm/ngx-file-drop.svg)](https://www.npmjs.com/package/ngx-file-drop) [![Travis](https://img","bugs":{"url":"https://github.com/georgipeltekov/ngx-file-drop/issues"},"homepage":"https://github.com/georgipeltekov/ngx-file-drop#readme","_id":"@bastienmoulia/ngx-file-drop@7.0.1","_npmVersion":"5.5.1","_nodeVersion":"8.9.0","_npmUser":{"name":"bastienmoulia","email":"bmoulia@gmail.com"},"dist":{"integrity":"sha512-y+S5iixAaqy7aFOaS6B+AB4wLZ7j10D8wQfDAOXlw35GsBK3zftK1HbbmL8TkqLHzX9UXn35WrKYeVI1w4vgBA==","shasum":"49346721265b1db97af613d0556cf9e87139ee15","tarball":"https://registry.npmjs.org/@bastienmoulia/ngx-file-drop/-/ngx-file-drop-7.0.1.tgz","fileCount":37,"unpackedSize":256243,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc7oCLCRA9TVsSAnZWagAAEUcQAJd0crVCEbAmiEJsnInq\nSBH835jjyU7uq41UlmbcE6q8pr4PW54u2EIkeUcayXsiJBF1pA66qqmOzWrB\nZphjayzT7lceULSar9LcQy34vNF21+tEOUCG4zeAZ58VsRXZ/+SR1KgOLw7j\n91PW8VnHnkyncrdK9mH672Pcz2xZMTgbSs9H6F12hDJSsWyl67YshKFLPTWY\nkrG/gI1YX5stM3tFgwePzJpw7fQu7rlZuoIvdL2WXMSKqOalanI43FYlBMO4\nzPf7e44mJ11KZxPqWkY1WlNhvUtfWk7EGBQMUPx5Y34pKCAf86I6uyu56lS/\nrCZWMNJ/NvC2mAbqZviXf46YOAe+e/JYMPmBEm3di4yAK6AtkGhoQsco4Ksi\nvhcCMoRRJCU3a/mR8+eGbupkW2nGP9ORuNGBu7o2wqK5w/KGl7rg/nLt07B5\nFvTWhWI7zS5pmMw7W4ZTbtehlAtz+HfaeahTYmhAKjQGvFhMd9OX48Ym4TzH\nGonWyAWkERdj1AsuRFi4oXhKsEyvun508Uw+4+us1+oc2OutmPxCYi+IIllk\n41GMjHQATPuh2fOdjQAgo06Xvo7mb+3nDZTRIajI9me/KU9yfdeX9Gw7imPj\nmi4cHDblyDc23VQhRuqw3yaBuz7cdH5/FEnqgF1ZM4kQmdxBONGAmWlger/2\nXknq\r\n=mK46\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCwbAF09TATY5WCjnzKvzNMbP6B4pHNSnIBuEzWNhcd5AIgJlbpv+I8ABAMHk9+5FcuNzQAVb8uyO3U4386ZGpD09w="}]},"maintainers":[{"name":"bastienmoulia","email":"bmoulia@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-file-drop_7.0.1_1559134347181_0.15174213194628772"},"_hasShrinkwrap":false}},"maintainers":[{"name":"bastienmoulia","email":"bmoulia@gmail.com"}],"description":"[![npm](https://img.shields.io/npm/v/ngx-file-drop.svg?style=flat-square)](https://www.npmjs.com/package/ngx-file-drop) [![npm downloads](https://img.shields.io/npm/dm/ngx-file-drop.svg)](https://www.npmjs.com/package/ngx-file-drop) [![Travis](https://img","homepage":"https://github.com/georgipeltekov/ngx-file-drop#readme","keywords":["angular","file drop","folder drop","file upload","folder upload","typescript","drag and drop"],"repository":{"type":"git","url":"git+https://github.com/georgipeltekov/ngx-file-drop.git"},"bugs":{"url":"https://github.com/georgipeltekov/ngx-file-drop/issues"},"license":"MIT","readme":"[![npm](https://img.shields.io/npm/v/ngx-file-drop.svg?style=flat-square)](https://www.npmjs.com/package/ngx-file-drop) [![npm downloads](https://img.shields.io/npm/dm/ngx-file-drop.svg)](https://www.npmjs.com/package/ngx-file-drop) [![Travis](https://img.shields.io/travis/georgipeltekov/ngx-file-drop.svg?style=flat-square)](https://travis-ci.org/georgipeltekov/ngx-file-drop) [![MIT licensed](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](https://github.com/georgipeltekov/ngx-file-drop/blob/master/LICENSE)\n\n## Overview\n\nAn Angular 7 module for simple desktop file and folder drag and drop. This library does not need rxjs-compat.\n\nFor Angular 6, 5 and 4 support please use older versions.\n\nThis library relies on HTML 5 File API thus IE and Safari are not supported\n\n## DEMO\nYou can check the [DEMO](https://georgipeltekov.github.io/) of the library \n\n## Installation\n\n```bash\nnpm install ngx-file-drop --save\n```\n\n## Usage\n\n\n### Importing The 'ngx-file-drop' Module\n\n```TypeScript\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { HttpClientModule } from '@angular/common/http';\n\nimport { AppComponent } from './app.component';\nimport { FileDropModule } from 'ngx-file-drop';\n\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    FormsModule,\n    HttpClientModule,\n    FileDropModule\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n\n```\n\n### Enabling File Drag\n\n\n```TypeScript\nimport { Component } from '@angular/core';\nimport { UploadEvent, UploadFile, FileSystemFileEntry, FileSystemDirectoryEntry } from 'ngx-file-drop';\n\n@Component({\n  selector: 'demo-root',\n  templateUrl: './app.component.html',\n  styleUrls: ['./app.component.scss']\n})\nexport class AppComponent {\n\n  public files: UploadFile[] = [];\n\n  public dropped(event: UploadEvent) {\n    this.files = event.files;\n    for (const droppedFile of event.files) {\n\n      // Is it a file?\n      if (droppedFile.fileEntry.isFile) {\n        const fileEntry = droppedFile.fileEntry as FileSystemFileEntry;\n        fileEntry.file((file: File) => {\n\n          // Here you can access the real file\n          console.log(droppedFile.relativePath, file);\n\n          /**\n          // You could upload it like this:\n          const formData = new FormData()\n          formData.append('logo', file, relativePath)\n\n          // Headers\n          const headers = new HttpHeaders({\n            'security-token': 'mytoken'\n          })\n\n          this.http.post('https://mybackend.com/api/upload/sanitize-and-save-logo', formData, { headers: headers, responseType: 'blob' })\n          .subscribe(data => {\n            // Sanitized logo returned from backend\n          })\n          **/\n\n        });\n      } else {\n        // It was a directory (empty directories are added, otherwise only files)\n        const fileEntry = droppedFile.fileEntry as FileSystemDirectoryEntry;\n        console.log(droppedFile.relativePath, fileEntry);\n      }\n    }\n  }\n\n  public fileOver(event){\n    console.log(event);\n  }\n\n  public fileLeave(event){\n    console.log(event);\n  }\n}\n\n\n```\n```HTML\n<div class=\"center\">\n    <file-drop dropZoneLabel=\"Drop files here\" (onFileDrop)=\"dropped($event)\" \n    (onFileOver)=\"fileOver($event)\" (onFileLeave)=\"fileLeave($event)\">\n        <span>optional content (don't set dropZoneLabel then)</span>\n    </file-drop>\n    <div class=\"upload-table\">\n        <table class=\"table\">\n            <thead>\n                <tr>\n                    <th>Name</th>\n                </tr>\n            </thead>\n            <tbody class=\"upload-name-style\">\n                <tr *ngFor=\"let item of files; let i=index\">\n                    <td><strong>{{ item.relativePath }}</strong></td>\n                </tr>\n            </tbody>\n        </table>\n    </div>\n</div>\n```\n\n## Parameters\n\nName  | Description | Example | \n------------- | ------------- | -------------\n(onFileDrop)  | On drop function called after the files are read | (onFileDrop)=\"dropped($event)\"\n(onFileOver)  | On drop over function| (onFileOver)=\"fileOver($event)\"\n(onFileLeave)  | On drop leave function| (onFileLeave)=\"fileLeave($event)\"\naccept  | String of accepted formats | accept=\"png\"\ndropZoneLabel  | Text to be displayed inside the drop box | dropZoneLabel=\"Drop files here\"\ndropZoneClassName  | Custom style class name(s) to be used on the \"drop-zone\" area | dropZoneClassName=\"my-style\"\ncontentClassName  | Custom style class name(s) to be used for the content area | contentClassName=\"my-style\"\n\\[disabled\\]  | Conditionally disable the dropzone  | \\[disabled\\]=\"condition\"\n\\[showBrowseBtn\\]  | Whether browse file button should be shown  | \\[showBrowseBtn\\]=\"true\"\nbrowseBtnClassName | Custom style class name(s) to be used for the button | browseBtnClassName=\"my-style\"\nbrowseBtnLabel  | The label of the browse file button  | browseBtnLabel=\"Browse files\"\nmultiple  | Whether multiple or single files are accepted  | multiple=\"true\"\n\n## License\n\n[MIT](/LICENSE)\n\n## Change Log\n\n[CHANGELOG](/CHANGELOG.md)\n\n## Donate Crypto\n* Ethereum: 0x22d557543ba1f8ac1dadc4eec5ea1b9ae03e0da8\n* Ripple: rJeJTHNyDkqurBBAAUzo4xhJyQo9mhTCJH\n\n\n","readmeFilename":"README.md"}