{"_id":"@anaidenko/ngx-awesome-uploader","name":"@anaidenko/ngx-awesome-uploader","dist-tags":{"latest":"13.0.1"},"versions":{"13.0.1":{"name":"@anaidenko/ngx-awesome-uploader","version":"13.0.1","description":"Angular Library for uploading files with Real-Time Progress bar, File Preview, Drag && Drop and Custom Template with Multi Language support","peerDependencies":{"@angular/common":"^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0","@angular/core":" ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0"},"keywords":["ngx","angular","file uploader","angular file uploader","awesome uploader","drag and drop","image cropper","angular image uploader","angular uploader","angular file upload"],"license":"MIT","repository":{"type":"git","url":"git+https://github.com/anaidenko/ngx-awesome-uploader.git"},"author":{"name":"Vugar Abdullayev","email":"https://twitter.com/vugar005","url":"https://twitter.com/vugar005"},"dependencies":{"tslib":"^2.0.0","mrmime":"1.0.0"},"homepage":"https://ngx-awesome-uploader.stackblitz.io/","module":"fesm2015/ngx-awesome-uploader.mjs","es2020":"fesm2020/ngx-awesome-uploader.mjs","esm2020":"esm2020/ngx-awesome-uploader.mjs","fesm2020":"fesm2020/ngx-awesome-uploader.mjs","fesm2015":"fesm2015/ngx-awesome-uploader.mjs","typings":"ngx-awesome-uploader.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./ngx-awesome-uploader.d.ts","esm2020":"./esm2020/ngx-awesome-uploader.mjs","es2020":"./fesm2020/ngx-awesome-uploader.mjs","es2015":"./fesm2015/ngx-awesome-uploader.mjs","node":"./fesm2015/ngx-awesome-uploader.mjs","default":"./fesm2020/ngx-awesome-uploader.mjs"}},"sideEffects":false,"gitHead":"b22709b0fde7779c0b589ac46176f9831709c6e4","bugs":{"url":"https://github.com/anaidenko/ngx-awesome-uploader/issues"},"_id":"@anaidenko/ngx-awesome-uploader@13.0.1","_nodeVersion":"16.13.0","_npmVersion":"8.1.0","dist":{"integrity":"sha512-vdIy0BHbDTo415HOHn2DBHSkLp5qqncPr6woaktDyDpGewTxx4Qu16TUf1z1PSc0jicrdFonKb5xNBx66RrqoA==","shasum":"4559d4be4b33a46767fef163c8f0fc319ef84698","tarball":"https://registry.npmjs.org/@anaidenko/ngx-awesome-uploader/-/ngx-awesome-uploader-13.0.1.tgz","fileCount":54,"unpackedSize":488632,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDfRgDlPXp59w7t2SRt9zGo5Awh7AtshswE0Jrit1R8RgIgBcvx7iMTRyIOjZkLrcYoYArBR0xASoKgxxDP+E6YAx0="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvyZOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq/nw//dZfeSB/CBdWCxULNfEbX29FpkZ00EwVn6EZvfG9AnExFaT0O\r\nE/5APUYEXxLFYIklbBziAn9sErbIcO2tXsLPkavUolxJZY51k1uwgJ6lXI3U\r\nnXXIIYyOUFGFV8XbjVxAmch3hnYV/3V6OLncTr7EdrBzbcaWJFRunUaYKYyV\r\nxI2zjv/TynGbQKvWMjuSC5xpqsB9dOb5W1PfLri8KMnPbBrtumvjdj7+wO8Y\r\n52Ph8hwe9evAPZNVrGmSv5AWnuvow8dpRXO31aVbsDw3cel41N8zIJGhg7KU\r\nRxqSAftufKTxH89P4yiLI8c44RZ3TpAvJbro3Pzf+CRmyfBvF3jxa5lWWg9L\r\njafA1ZtILzO37rxz2F/ArMK2qr8SNzMocuzQPeNdp+iXmslEHzNj8ReWjRGK\r\nwM0Kkmrgj1SeR+HH+qslwQCUOvPqCTON7TxG+yqvJmRUIK3L4w+Ynf6Lxtr5\r\n70imjZQb07vHgkH4Y4drEhDrILMrdOMU9GYv775f6Bc8xxe4o5rOEaK1mOzX\r\n75DSNdcsBDsFzxVVEqQXb22SJYbRewkMMJxgtEM/UDdLALZV9oIicjpL7d94\r\nBgMO2cXJkHEKfpCItoc67tCU2ctpu/3VfwvDKCHzI8v/T5/U1TqKKEW1Q18n\r\nA8q/O7t4EjKUv+Vo+DStJ9NmZIyFcRYcak0=\r\n=dT0r\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"anaidenko","email":"andrii.naidenko@hotmail.com"},"directories":{},"maintainers":[{"name":"anaidenko","email":"andrii.naidenko@hotmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-awesome-uploader_13.0.1_1673471566761_0.20796242796509667"},"_hasShrinkwrap":false}},"time":{"created":"2023-01-11T21:12:46.690Z","13.0.1":"2023-01-11T21:12:46.918Z","modified":"2023-01-11T21:12:47.111Z"},"maintainers":[{"name":"anaidenko","email":"andrii.naidenko@hotmail.com"}],"description":"Angular Library for uploading files with Real-Time Progress bar, File Preview, Drag && Drop and Custom Template with Multi Language support","homepage":"https://ngx-awesome-uploader.stackblitz.io/","keywords":["ngx","angular","file uploader","angular file uploader","awesome uploader","drag and drop","image cropper","angular image uploader","angular uploader","angular file upload"],"repository":{"type":"git","url":"git+https://github.com/anaidenko/ngx-awesome-uploader.git"},"author":{"name":"Vugar Abdullayev","email":"https://twitter.com/vugar005","url":"https://twitter.com/vugar005"},"bugs":{"url":"https://github.com/anaidenko/ngx-awesome-uploader/issues"},"license":"MIT","readme":"\n# NGX-AWESOME-UPLOADER\n\n\n![alt-text](https://raw.githubusercontent.com/vugar005/ngx-awesome-uploader/master/angular-image.gif?raw=true)\n\n\n\n[![npm](https://img.shields.io/npm/l/ngx-awesome-uploader.svg)]() [![NPM Downloads](https://img.shields.io/npm/dt/ngx-awesome-uploader.svg)](https://www.npmjs.com/package/ngx-awesome-uploader) [![npm demo](https://img.shields.io/badge/demo-online-ed1c46.svg)](https://stackblitz.com/edit/ngx-awesome-uploader?file=src%2Fapp%2Fsimple-demo%2Fsimple-demo.component.ts) [![npm](https://img.shields.io/twitter/follow/vugar005.svg?label=Follow)](https://twitter.com/vugar005) [![npm](https://img.shields.io/github/issues/vugar005/ngx-awesome-uploader.svg)](https://github.com/vugar005/ngx-awesome-uploader) [![npm](https://img.shields.io/github/last-commit/vugar005/ngx-awesome-uploader.svg)](https://github.com/vugar005/ngx-awesome-uploader) ![npm](https://img.shields.io/readthedocs/ngx-awesome-uploader.svg)\n\n\n\n\n\nThis is an Angular Library for uploading files. It supports: File Upload and Preview (additionally preview images with lightbox), validation, image cropper , drag and drop with multi language support.\n\n\n\nTested on Angular Angular 6+. Supports Server Side Rendering.\n>**Breaking Changes:** [Check Changes](https://github.com/vugar005/ngx-awesome-uploader/blob/master/breaking-changes-v10.md) changes if you come from version < 10.\n\n\n* [Install](#install)\n* [Usage](#usage)\n* [Configuration](#api)\n* [File Validation](#file-validation)\n* [Built-in validations](#built-in-validations)\n* [Custom validation](#custom-validation)\n* [Cropper](#cropper)\n* [Custom template](#custom-template)\n* [Multi Language](#multi-language)\n* [Edit Mode](#edit-mode)\n* [Bonus](#bonus)\n\n\n\n## Quick-links\n\n[Example Application](https://ngx-awesome-uploader.stackblitz.io/) or\n\n[StackBlitzDemo](https://stackblitz.com/edit/ngx-awesome-uploader?file=src%2Fapp%2Fsimple-demo%2Fsimple-demo.component.ts)\n\n## Install\n\n\n\nnpm install ngx-awesome-uploader --save\n\n\n\n##### Load the module for your app:\n\n\n\n```typescript\nimport { FilePickerModule } from  'ngx-awesome-uploader';\n\n@NgModule({\n  imports: [\n  ...\n  FilePickerModule\n  ]\n  })\n\n```\n\n## Usage\n\nIn order to make library maximum compatible with apis you need to create and provide <b>\ncustom adapter </b> which implements upload and remove requests. That's because I have no idea how to get file id in upload response json :) .\nSo this libray exposes a FilePickerAdapter abstract class which you can import on your new class file definition:\n\n\n``` import { FilePickerAdapter } from 'ngx-awesome-uploader';```\n\n\n\nAfter importing it to your custom adapter implementation (EG: CustomAdapter.ts), you must implement those 2 methods which are abstract in the FilePickerAdapter base class which are:\n\n\n\n```\npublic abstract uploadFile(fileItem: FilePreviewModel): Observable<UploadResponse>;\n\npublic abstract removeFile(fileItem: FilePreviewModel): Observable<any>;\n```\n\n\n\nYou can check DEMO adapter [here](https://github.com/vugar005/ngx-awesome-uploader/tree/master/projects/file-picker/src/lib/mock-file-picker.adapter.ts)\n\n\n\n#### Now you can use it in your template\n\n\n\n```html\n<ngx-awesome-uploader\n[adapter]=\"adapter\"\n>\n</ngx-awesome-uploader>\n\n```\n\n\n\n#### and in the Component:\n\n\n\n```typescript\nimport { HttpClient } from  '@angular/common/http';\nimport { DemoFilePickerAdapter } from  './demo-file-picker.adapter';\nimport { Component} from  '@angular/core';\n\n@Component({\nselector: 'demo-file-picker',\ntemplateUrl: './demo-file-picker.component.html',\nstyleUrls: ['./demo-file-picker.component.scss']\n})\n\nexport  class DemoFilePickerComponent {\nadapter = new  DemoFilePickerAdapter(this.http);\nconstructor(private http: HttpClient) { }\n}\n\n```\n\n>**Note:** As you see you should provide http instance to adapter.\n\nStill in Doubt? Check [Minimal Setup Demo](https://stackblitz.com/edit/ngx-awesome-uploader?file=src%2Fapp%2Fsimple-demo%2Fsimple-demo.component.ts)\n\n\n\n## API\n\n```typescript\n\n/** Whether to enable cropper. Default: disabled */\n@Input() enableCropper = false;\n\n/** Whether to show default drag and drop template. Default:true */\n@Input() showeDragDropZone = true;\n\n/** Single or multiple. Default: multi */\n@Input() uploadType = 'multi';\n\n/** Max size of selected file in MB. Default: no limit */\n@Input() fileMaxSize: number;\n\n/** Max count of file in multi-upload. Default: no limit */\n@Input() fileMaxCount: number;\n\n/** Total Max size limit of all files in MB. Default: no limit */\n@Input() totalMaxSize: number;\n\n/** Which file types to show on choose file dialog. Default: show all */\n@Input() accept: string;\n\n/** File extensions filter. Default: any exteion */\n@Input() fileExtensions: String;\n\n/** Cropper options if cropper enabled. Default:\ndragMode: 'crop',\naspectRatio: 1,\nautoCrop: true,\nmovable: true,\nzoomable: true,\nscalable: true,\nautoCropArea: 0.8\n*/\n@Input() cropperOptions: Object;\n\n/** Custom Adapter for uploading/removing files. Required */\n@Input() adapter: FilePickerAdapter;\n\n/** Custom template for dropzone. Optional */\n@Input() dropzoneTemplate: TemplateRef<any>;\n\n/** Custom Preview Item template. Optional */\n@Input() itemTemplate: TemplateRef<any>;\n\n/** Whether to show default files preview container. Default: true */\n@Input() showPreviewContainer = true;\n\n/** Custom validator function. Optional */\n@Input() customValidator: (file: File) => Observable<boolean>;\n\n/** Custom captions input. Used for multi language support */\n@Input() captions: UploaderCaptions;\n\n/** Whether to auto upload file on file choose or not. Default: true. You can get files list by accessing component files. */\n@Input() enableAutoUpload = true;\n\n/** capture paramerter for file input such as user,environment*/\n@Input() fileInputCapture: string;\n\n```\n\n## Output events\n\n\n\n```typescript\n\n/** Emitted when file upload via api success.\nEmitted for every file */\n@Output() uploadSuccess = new  EventEmitter<FilePreviewModel>();\n\n/** Emitted when file upload via api fails.\nEmitted for every file */\n@Output() uploadFail = new  EventEmitter<HttpErrorResponse>();\n\n/** Emitted when file is removed via api successfully.\nEmitted for every file */\n@Output() removeSuccess = new  EventEmitter<FilePreviewModel>();\n\n/** Emitted on file validation fail */\n@Output() validationError = new  EventEmitter<ValidationError>();\n\n/** Emitted when file is added and passed validations. Not uploaded yet */\n@Output() fileAdded = new  EventEmitter<FilePreviewModel>();\n\n/** Emitted when file is removed from fileList */\n@Output() fileRemoved = new  EventEmitter<FilePreviewModel>();\n```\n\n\n\n## File-Validation\n\n### Built-in-validations\n\nAll validations are emitted through <b> ValidationError </b>event.\n\nTo listen to validation errors (in case you provided validations), validationError event is emitted. validationError event implements interface [ValidationError](https://github.com/vugar005/ngx-awesome-uploader/blob/master/projects/file-picker/src/lib/validation-error.model.ts)\nand which emits failed file and error type.\n\nSupported validations:\n\n| **Validation Type**                | **Description**                                                                                                                                                                       | **Default** |\n|----------------------------|---------------------------------------------------------------------------------------|----------------------------------------|\n| fileMaxSize: number       | Max size of selected file in MB.   | No limit\n| fileExtensions: String        |  Emitted when file does not satisfy provided extension   | Any extension\n| uploadType: String      | Upload type. Values: 'single' and 'multi'.  |multi\n| totalMaxSize: number       | Total Max size of files in MB. If cropper is enabled, the cropped image size is considered.| No limit\n| fileMaxCount: number       | Limit total files to upload by count  | No limit\n\n\n### Custom-validation\n\nYou can also provide your own custom validation along with built-in validations.\n\nYou custom validation takes `file: File` and returns `Observable<boolean>`;\n\nSo that means you can provide sync and async validations.\n\n\n\n```\npublic myCustomValidator(file: File): Observable<boolean> {\n  if (file.name.includes('panda')) {\n   return of(true);\n  }\n\n  if (file.size > 50) {\n   return this.http.get('url').pipe(map((res) => res === 'OK' ));\n  }\n  return of(false);\n  }\n```\nand pass to Template:\n\n```html\n<ngx-awesome-uploader\n[customValidator]=\"myCustomValidator\"\n>\n</ngx-awesome-uploader>\n\n```\n\n\nCheck [Demo](https://stackblitz.com/edit/ngx-awesome-uploader?file=src%2Fapp%2Fadvanced-demo%2Fadvanced-demo.component.html)\n\n\n\n\n\n## Cropper\n\n\n\nLibrary uses cropperjs to crop images but you need import it to use it. Example: in index html\n\n\n\n```html\n\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.4.3/cropper.min.js\" async>  </script>\n<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.4.3/cropper.css\"  />\n\n```\n\n\n\n>**Note**: To use cropper, you should set enableCropper to true. Look at API section above.\n\nYou can also provide your custom cropper options.\n\n\n\n## Custom-Template\n\nYou can provide custom template to library.\n\nI) To provide custom template for drag and drop zone, use content projection. Example:\n\n```html\n  <ngx-awesome-uploader\n  [adapter]=\"adapter\">\n\n  <div class=\"dropzoneTemplate\">\n  \t<button>Custom</button>\n  </div>\n\n</ngx-awesome-uploader>\n\n````\n\n\n\n>**Note:** The wrapper of your custom template must have a class **dropzoneTemplate**.\n\n\n\n[Checkout Demo](https://stackblitz.com/edit/ngx-awesome-uploader?file=src%2Fapp%2Fadvanced-demo%2Fadvanced-demo.component.html)\n\n\n\nII) To use custom file preview template, pass your custom template as below:\n\n\n\n```html\n\n<ngx-awesome-uploader #uploader\n  [adapter]=\"adapter\"\n  [itemTemplate]=\"itemTemplate\"\n>\n</ngx-awesome-uploader>\n\n<ng-template #itemTemplate let-fileItem=\"fileItem\" let-uploadProgress=\"uploadProgress\">\n\n  <p>{{fileItem.file.size}}</p>\n\n  <p>{{fileItem.fileName}}</p>\n\n  <p *ngIf=\"uploadProgress < 100\">{{uploadProgress}}%</p>\n\n  <button (click)=\"uploader.removeFile(fileItem)\">Remove</button>\n\n</ng-template>\n\n```\n\nIn custom template <b>uploadProgress</b> and <b>fileItem</b> (which implements [FilePrevieModel](https://github.com/vugar005/ngx-awesome-uploader/blob/master/projects/file-picker/src/lib/file-preview.model.ts) interface) are exposed .\n\n## Multi Language\n\nYou can add multi language support for library by providing ***captions*** object (which implements [UploaderCaptions](https://github.com/vugar005/ngx-awesome-uploader/blob/master/projects/file-picker/src/lib/uploader-captions.ts) interface).\n\n\n\nCheck [Demo](https://stackblitz.com/edit/ngx-awesome-uploader?file=src%2Fapp%2Fadvanced-demo%2Fadvanced-demo.component.html)\n\n## Edit Mode\n\nYou can show your files without uploading them\n\n```   @ViewChild('uploader', { static: true }) uploader: FilePickerComponent; ```\n\n```\n  public ngOnInit(): void {\n    const files = [\n      {\n        fileName: 'My File 1 for edit.png'\n      },\n      {\n        fileName: 'My File 2 for edit.xlsx'\n      }\n    ] as FilePreviewModel[];\n    this.uploader.setFiles(files);\n  }\n```\n## Bonus\n\nYou can also check out library [router animations ](https://www.npmjs.com/package/ngx-router-animations)\n\n## Contribution\n\n\n\nYou can fork project from github. Pull requests are kindly accepted.\n\n1. Building library: ng build file-picker --prod\n\n2. Running tests: ng test file-picker  --browsers=ChromeHeadless\n\n3. Run demo: ng serve","readmeFilename":"README.md"}