{"_rev":"3-fdc0072c7738a4a1844cfee2fe9b1887","time":{"created":"2024-05-31T08:03:22.012Z","modified":"2024-05-31T08:03:22.558Z","1.0.0":"2024-05-31T07:43:11.432Z","1.1.0":"2024-05-31T08:03:22.264Z"},"_id":"@annie_gee/ngx-dropzone","name":"@annie_gee/ngx-dropzone","dist-tags":{"latest":"1.1.0"},"versions":{"1.1.0":{"name":"@annie_gee/ngx-dropzone","description":"A highly configurable dropzone component for Angular.","version":"1.1.0","author":{"name":"@annie_gee"},"keywords":["angular","angular 2","ngx","drag","drop","dropzone","ngx-dropzone","file","upload","image"],"license":"MIT","publishConfig":{"access":"public"},"homepage":"https://github.com/gichiraanne/ngx-dropzone","repository":{"type":"git","url":"git+https://github.com/gichiraanne/ngx-dropzone.git"},"peerDependencies":{"@angular/common":"^17.3.7","@angular/core":"^17.3.7","@angular/forms":"^17.3.7"},"bugs":{"url":"https://github.com/gichiraanne/ngx-dropzone/issues"},"module":"fesm2022/annie_gee-ngx-dropzone.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","esm2022":"./esm2022/annie_gee-ngx-dropzone.mjs","esm":"./esm2022/annie_gee-ngx-dropzone.mjs","default":"./fesm2022/annie_gee-ngx-dropzone.mjs"}},"sideEffects":false,"dependencies":{"tslib":"^2.6.2"},"gitHead":"401d5250a37ce177956504d4bd3640b1a9ce4d45","_id":"@annie_gee/ngx-dropzone@1.1.0","_nodeVersion":"18.17.0","_npmVersion":"9.6.7","dist":{"integrity":"sha512-BetO5CBxeLo5PqhDmk+e4a9N3/Ym/orkZFbZEU0MMs8vyLPRMIsteKdX1seMe5DYtCu5A2mVIOZ1aJO4zcpHVA==","shasum":"d91b90445f431b310b2bbccfb367aac379a660cd","tarball":"https://registry.npmjs.org/@annie_gee/ngx-dropzone/-/ngx-dropzone-1.1.0.tgz","fileCount":26,"unpackedSize":186392,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICN3zVIZgXFoJGtXagsHMiIuKSU4b582Qucu8vuQuPzfAiEA7OsvHDBr0uRwL9qCd4tbg8q5dQQY3YjZxh/HA2ql59s="}]},"_npmUser":{"name":"annie_gee","email":"gichiraanne@gmail.com"},"directories":{},"maintainers":[{"name":"annie_gee","email":"gichiraanne@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-dropzone_1.1.0_1717142602124_0.5311594482439099"},"_hasShrinkwrap":false}},"maintainers":[{"name":"annie_gee","email":"gichiraanne@gmail.com"}],"description":"A highly configurable dropzone component for Angular.","homepage":"https://github.com/gichiraanne/ngx-dropzone","keywords":["angular","angular 2","ngx","drag","drop","dropzone","ngx-dropzone","file","upload","image"],"repository":{"type":"git","url":"git+https://github.com/gichiraanne/ngx-dropzone.git"},"author":{"name":"@annie_gee"},"bugs":{"url":"https://github.com/gichiraanne/ngx-dropzone/issues"},"license":"MIT","readme":"# ngx-dropzone\n\nA lightweight and highly customizable Angular dropzone component for file uploads. \nBased on [peterfreeman/ngx-dropzone](https://github.com/peterfreeman/ngx-dropzone) repository. \nCompatible with Angular 17.\n\n\n\n\n\nFor a demo see [DEMO](https://ngx-dropzone.stackblitz.io). And the [CODE for the demo](https://stackblitz.com/edit/ngx-dropzone).\n\n## Install\n\n```\n$ npm install --save @annie_gee/ngx-dropzone\n```\n\n## Usage\n\n```js\n// in app.module.ts\nimport { NgxDropzoneModule } from 'ngx-dropzone';\n\n@NgModule({\n ...\n imports: [\n NgxDropzoneModule\n ],\n ...\n})\nexport class AppModule { }\n```\n\n```html\n\n\n\tDrop it, baby!\n\t\n\t\t{{ f.name }} ({{ f.type }})\n\t\n\n```\n\n```js\n// in app.component.ts\nfiles: File[] = [];\n\nonSelect(event) {\n console.log(event);\n this.files.push(...event.addedFiles);\n}\n\nonRemove(event) {\n console.log(event);\n this.files.splice(this.files.indexOf(event), 1);\n}\n```\n\nYou can also use special preview components to preview images or videos:\n\n```html\n\n {{ f.name }} ({{ f.type }})\n\n```\n\n```html\n\n {{ f.name }} ({{ f.type }})\n\n```\n\n## Component documentation\n\n#### ngx-dropzone\n\nThis component is the actual dropzone container. It contains the label and any file previews.\nIt has an event listener for file drops and you can also click it to open the native file explorer for selection.\n\nUse it as a stand-alone component `` or by adding it as an attribute to a custom `div` (``).\nIt 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.\n\nThis component has the following Input properties:\n\n* `[multiple]`: Allow the selection of multiple files at once. Defaults to `true`.\n* `accept`: Set the accepted file types (as for a native file element). Defaults to `'*'`. Example: `accept=\"image/jpeg,image/jpg,image/png,image/gif\"`\n* `[maxFileSize]`: Set the maximum size a single file may have, in *bytes*. Defaults to `undefined`.\n* `[disabled]`: Disable any user interaction with the component. Defaults to `false`.\n* `[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.\n* `[disableClick]`: Prevent the file selector from opening when clicking the dropzone.\n* `[id], [aria-label], [aria-labelledby]`, `[aria-describedby]`: Forward the accessibility properties to the file input element.\n* `[processDirectoryDrop]`: Enable extracting files from dropped directories. Defaults to `false`.\n\nIt has the following Output event:\n\n* `(change)`: Emitted when any files were added or rejected. It returns a `NgxDropzoneChangeEvent` with the properties `source: NgxDropzoneComponent`, `addedFiles: File[]` and `rejectedFiles: RejectedFile[]`.\n\nThe `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.\n\nIf you'd like to show the native file selector programmatically then do it as follows:\n\n```html\n\n\n```\n\n#### ngx-dropzone-label\n\nThis component has no attributes or methods and acts as a container for the label text using content projection.\nYou can place anything inside of it and the text will always be centered.\n\n#### ngx-dropzone-preview\n\nThis 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.\n\nThis component has the following Input properties:\n\n* `[file]`: The dropped file to preview.\n* `[removable]`: Allow the user to remove files. Required to allow keyboard interaction and show the remove badge on hover.\n\nIt has the following Output event:\n\n* `(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.\n\nThe `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](https://github.com/peterfreeman/ngx-dropzone/wiki/How-to-create-a-custom-preview-component%3F) on how to implement your own custom preview components.\n\n#### ngx-dropzone-remove-badge\n\nThis 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).\n\n## Licence\n\n[MIT Licence](https://github.com/gichiraanne/ngx-dropzone/blob/main/LICENSE)\n\n","readmeFilename":"README.md"}
![](\"_images/default.png\")
\n\n![](\"_images/default_dropped.png\")
\n\nFor a demo see [DEMO](https://ngx-dropzone.stackblitz.io). And the [CODE for the demo](https://stackblitz.com/edit/ngx-dropzone).\n\n## Install\n\n```\n$ npm install --save @annie_gee/ngx-dropzone\n```\n\n## Usage\n\n```js\n// in app.module.ts\nimport { NgxDropzoneModule } from 'ngx-dropzone';\n\n@NgModule({\n ...\n imports: [\n NgxDropzoneModule\n ],\n ...\n})\nexport class AppModule { }\n```\n\n```html\n\n