{"_id":"@ajayg12/ngx-file-drag-drop","_rev":"3-cef7a807f38861d601af433541855282","name":"@ajayg12/ngx-file-drag-drop","dist-tags":{"latest":"20.0.2"},"versions":{"20.0.0":{"name":"@ajayg12/ngx-file-drag-drop","version":"20.0.0","_id":"@ajayg12/ngx-file-drag-drop@20.0.0","maintainers":[{"name":"ajayg12","email":"ajaygawali120892@gmail.com"}],"dist":{"shasum":"93417a81b08f4cd7c7a267dd5897b0f8f947570f","tarball":"https://registry.npmjs.org/@ajayg12/ngx-file-drag-drop/-/ngx-file-drag-drop-20.0.0.tgz","fileCount":22,"integrity":"sha512-8TqRejme0Vi0jv7zJzRFW7elzrHg36NRK285Ko/4ZhdDKdj+8Kl9sLlTBrUQAD5QQdV57piDtZd/VdOv0SfpAA==","signatures":[{"sig":"MEUCIAFLNJlvDsMO6YiUVAnDvvf+WhCOnndFWV0jmOsssVZcAiEA/0BT2h4YJWcxprIlebKe5YxoURmtdhJSW7twSvkHWsY=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":48248},"public":true,"gitHead":"ab99cd8e93c6972aad66d4151db9cee5f05d4bbc","scripts":{"ng":"ng","build":"ng build","start":"ng serve","watch":"ng build --watch --configuration development"},"_npmUser":{"name":"ajayg12","email":"ajaygawali120892@gmail.com"},"_npmVersion":"11.6.2","description":"``` npm i ngx-file-drag-drop ```","directories":{},"_nodeVersion":"25.2.1","dependencies":{"rxjs":"~7.8.2","tslib":"^2.8.1","zone.js":"~0.15.0","@angular/cdk":"^20.2.14","@angular/core":"^20.3.15","@angular/forms":"^20.3.15","@angular/common":"^20.3.15","@angular/router":"^20.3.15","@angular/compiler":"^20.3.15","@angular/material":"^20.2.14","@angular/animations":"^20.3.15","@angular/platform-browser":"^20.3.15","@angular/platform-browser-dynamic":"^20.3.15"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"ng-packagr":"^20.3.2","typescript":"~5.9.3","@angular/cli":"^20.3.13","@angular/build":"^20.3.13","@angular/compiler-cli":"^20.3.15"},"_npmOperationalInternal":{"tmp":"tmp/ngx-file-drag-drop_20.0.0_1765194430930_0.7938270606461411","host":"s3://npm-registry-packages-npm-production"}},"20.0.1":{"name":"@ajayg12/ngx-file-drag-drop","version":"20.0.1","_id":"@ajayg12/ngx-file-drag-drop@20.0.1","maintainers":[{"name":"ajayg12","email":"ajaygawali120892@gmail.com"}],"dist":{"shasum":"87eba51782b15d24286997a2cad41eef54654c6a","tarball":"https://registry.npmjs.org/@ajayg12/ngx-file-drag-drop/-/ngx-file-drag-drop-20.0.1.tgz","fileCount":22,"integrity":"sha512-vneyZ8lInFEC2pLyHa3mrkTu3fuUuEq+HCsuG2l5uhMPEGVO4ykTIMUtYQuUrVDLrRVLjlJuHMsySDHk0zKJQQ==","signatures":[{"sig":"MEQCIAHOuUnL1u2/kE+/xR0OgJTJwXXpjxd7W4a/vdDx/4ioAiBND8zuecvJ902znQvskrYMurI+U49ShIDgCnnBxcsPnQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":48248},"public":true,"gitHead":"216dcb17e7b586acefbb7ad63111f13b44bd41e2","scripts":{"ng":"ng","build":"ng build","start":"ng serve","watch":"ng build --watch --configuration development"},"_npmUser":{"name":"ajayg12","email":"ajaygawali120892@gmail.com"},"_npmVersion":"11.6.2","description":"``` npm i ngx-file-drag-drop ```","directories":{},"_nodeVersion":"25.2.1","dependencies":{"rxjs":"~7.8.2","tslib":"^2.8.1","zone.js":"~0.15.0","@angular/cdk":"^20.2.14","@angular/core":"^20.3.15","@angular/forms":"^20.3.15","@angular/common":"^20.3.15","@angular/router":"^20.3.15","@angular/compiler":"^20.3.15","@angular/material":"^20.2.14","@angular/animations":"^20.3.15","@angular/platform-browser":"^20.3.15","@angular/platform-browser-dynamic":"^20.3.15"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"ng-packagr":"^20.3.2","typescript":"~5.9.3","@angular/cli":"^20.3.13","@angular/build":"^20.3.13","@angular/compiler-cli":"^20.3.15"},"_npmOperationalInternal":{"tmp":"tmp/ngx-file-drag-drop_20.0.1_1765274761457_0.12026934754903373","host":"s3://npm-registry-packages-npm-production"}},"20.0.2":{"name":"@ajayg12/ngx-file-drag-drop","version":"20.0.2","peerDependencies":{"@angular/common":"^20.0.0","@angular/core":"^20.0.0","@angular/cdk":"^20.0.0","@angular/material":"^20.0.0"},"description":"angular material file input component supports file drag and drop, and selection with native file picker","homepage":"https://github.com/telebroad/ngx-file-drag-drop","keywords":["angular","material","file","input","component","file-picker","drag-and-drop","file-drop","ngx-file-drag-drop"],"bugs":{"url":"https://github.com/telebroad/ngx-file-drag-drop/issues"},"repository":{"type":"git","url":"git+https://github.com/telebroad/ngx-file-drag-drop.git"},"dependencies":{"tslib":"^2.8.0"},"sideEffects":false,"module":"fesm2022/ajayg12-ngx-file-drag-drop.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","default":"./fesm2022/ajayg12-ngx-file-drag-drop.mjs"}},"gitHead":"216dcb17e7b586acefbb7ad63111f13b44bd41e2","_id":"@ajayg12/ngx-file-drag-drop@20.0.2","_nodeVersion":"25.2.1","_npmVersion":"11.6.2","dist":{"integrity":"sha512-IylOzqJZcclnE/JXo84J0er0UXpE6IQimf+I9Iq872NN7/p/AwMi8M+smvSDduoZHP+qke4ujWpgsx836/YH5Q==","shasum":"fab2f44421ab8c8548f7581d090b72132fc54a60","tarball":"https://registry.npmjs.org/@ajayg12/ngx-file-drag-drop/-/ngx-file-drag-drop-20.0.2.tgz","fileCount":5,"unpackedSize":53792,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIHPlym8Iuxl8SCJhVN7DuerTXYwk4Sb6vL582V3Kk1PRAiApc2XRlB6yQyN691EXNFhgfTAMxLozhtc+9eW7dUtb1Q=="}]},"_npmUser":{"name":"ajayg12","email":"ajaygawali120892@gmail.com"},"directories":{},"maintainers":[{"name":"ajayg12","email":"ajaygawali120892@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ngx-file-drag-drop_20.0.2_1765280675917_0.5807071173346239"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-08T11:47:10.877Z","modified":"2025-12-09T11:44:36.261Z","20.0.0":"2025-12-08T11:47:11.077Z","20.0.1":"2025-12-09T10:06:01.608Z","20.0.2":"2025-12-09T11:44:36.067Z"},"description":"angular material file input component supports file drag and drop, and selection with native file picker","maintainers":[{"name":"ajayg12","email":"ajaygawali120892@gmail.com"}],"readme":"# ngx-file-drag-drop\n\n#### Check out the [Demo](https://stackblitz.com/edit/ngx-file-drag-drop)\n\n## Install\n\n```\nnpm i ngx-file-drag-drop\n```\n\n### NgxFileDragDropComponent\n\nselector: ``\n\nimplements: [ControlValueAccessor](https://angular.io/api/forms/ControlValueAccessor) to work with angular forms\n\n**Additionnal properties**\n\n| Name | Description |\n| -------------------------------------------------------- | ------------------------------------------------------------------------ |\n| _@Input()_ multiple: `boolean` | Allows multiple file inputs, `false` by default |\n| _@Input()_ accept: `string` | Any value the native `accept` attribute can get. Doesn't validate input. |\n| _@Input()_ disabled: `boolean` | Disable the input. |\n| _@Input()_ emptyPlaceholder : `string` | Placeholder for empty input, default `Drop file or click to select` |\n| _@Input()_ displayFileSize : `boolean` | Show file size in chip rather than in tooltip, default `false` |\n| _@Input()_ activeBorderColor: `string` | A css color for when file is dragged into drop area, default `purple` |\n| _@Output()_ valueChanged:`EventEmitter` | Event emitted when input value changes |\n| addFiles():`(files: File[] \\| FileList \\| File) => void` | Update input |\n| removeFile():`(file:File) => void` | Removes the file from the input |\n| clear(): `() => void` | Removes all files from the input |\n| files: `File[]` | Getter for form value |\n| isEmpty: `boolean` | Whether the input is empty (no files) or not |\n\n### BytePipe\n\nUsage:\n\n```html\n{{ 104857600 | byteFormat }}\n```\n\n_Output:_ 100 MB\n\n### Validators\n\n```ts\nimport { FileValidators } from \"ngx-file-drag-drop\";\n```\n\n| Validator | Description |\n| ------------------------------------- | -------------------------------------- |\n| `uniqueFileNames` | Disallow two files with same file name |\n| `fileExtension(ext: string[])` | Required file extensions |\n| `fileType(types: string[] \\| RegExp)` | Required Mime Types |\n| `maxFileCount(count: number)` | Max number of files |\n| `maxFileSize(bytes: number)` | Max bytes allowed per file |\n| `maxTotalSize(bytes: number)` | Max total input size |\n| `required` | At least one file required |\n","readmeFilename":"README.md","homepage":"https://github.com/telebroad/ngx-file-drag-drop","keywords":["angular","material","file","input","component","file-picker","drag-and-drop","file-drop","ngx-file-drag-drop"],"repository":{"type":"git","url":"git+https://github.com/telebroad/ngx-file-drag-drop.git"},"bugs":{"url":"https://github.com/telebroad/ngx-file-drag-drop/issues"}}