{"_id":"@darkfisk/ngx-awesome-uploader","name":"@darkfisk/ngx-awesome-uploader","dist-tags":{"latest":"16.0.0"},"versions":{"16.0.0":{"name":"@darkfisk/ngx-awesome-uploader","version":"16.0.0","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 || ^14.0 || ^15.0 || ^16.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 || ^14.0 || ^15.0 || ^16.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/DarkFisk/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":"fesm2022/darkfisk-ngx-awesome-uploader.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","esm2022":"./esm2022/darkfisk-ngx-awesome-uploader.mjs","esm":"./esm2022/darkfisk-ngx-awesome-uploader.mjs","default":"./fesm2022/darkfisk-ngx-awesome-uploader.mjs"}},"sideEffects":false,"gitHead":"6c1e68863cbb38c06dbf3739d758a8f3766e7982","bugs":{"url":"https://github.com/DarkFisk/ngx-awesome-uploader/issues"},"_id":"@darkfisk/ngx-awesome-uploader@16.0.0","_nodeVersion":"18.13.0","_npmVersion":"9.2.0","dist":{"integrity":"sha512-7ekS0LddZCAmaRFUlSBXHqUqevOXU9C/QLGKMWZvVM0mYMLGxpAmakvHI4ttRXaElVp77Z97BJ0KVShkBfj8lw==","shasum":"2d3cd2aa489203a2d1988e73d53080655fc5c3a2","tarball":"https://registry.npmjs.org/@darkfisk/ngx-awesome-uploader/-/ngx-awesome-uploader-16.0.0.tgz","fileCount":57,"unpackedSize":542980,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCvvLua7KIjmltcgOt07QgSJWCzPjIowpGzqqOMQ3g5JQIhANyJAPToGNvpT6RETUEPN/tOfrl2wufOjJdZehq1d9Nw"}]},"_npmUser":{"name":"darkfisk","email":"darkfisk@gmail.com"},"directories":{},"maintainers":[{"name":"darkfisk","email":"darkfisk@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-awesome-uploader_16.0.0_1687385018530_0.026968226719036537"},"_hasShrinkwrap":false}},"time":{"created":"2023-06-21T22:03:38.465Z","16.0.0":"2023-06-21T22:03:38.701Z","modified":"2023-06-21T22:03:38.870Z"},"maintainers":[{"name":"darkfisk","email":"darkfisk@gmail.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/DarkFisk/ngx-awesome-uploader.git"},"author":{"name":"Vugar Abdullayev","email":"https://twitter.com/vugar005","url":"https://twitter.com/vugar005"},"bugs":{"url":"https://github.com/DarkFisk/ngx-awesome-uploader/issues"},"license":"MIT","readme":"\r\n# NGX-AWESOME-UPLOADER\r\n\r\n\r\n![alt-text](https://raw.githubusercontent.com/vugar005/ngx-awesome-uploader/master/angular-image.gif?raw=true)\r\n\r\n## Compile & publish\r\n```\r\nng build file-picker --configuration \"production\"\r\ncd dist/file-picker && npm publish\r\n```\r\n\r\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)\r\n\r\n\r\n\r\n\r\n\r\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.\r\n\r\n\r\n\r\nTested on Angular Angular 6+. Supports Server Side Rendering.\r\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.\r\n\r\n\r\n* [Install](#install)\r\n* [Usage](#usage)\r\n* [Configuration](#api)\r\n* [File Validation](#file-validation)\r\n* [Built-in validations](#built-in-validations)\r\n* [Custom validation](#custom-validation)\r\n* [Cropper](#cropper)\r\n* [Custom template](#custom-template)\r\n* [Multi Language](#multi-language)\r\n* [Edit Mode](#edit-mode)\r\n* [Bonus](#bonus)\r\n\r\n\r\n\r\n## Quick-links\r\n\r\n[Example Application](https://ngx-awesome-uploader.stackblitz.io/) or\r\n\r\n[StackBlitzDemo](https://stackblitz.com/edit/ngx-awesome-uploader?file=src%2Fapp%2Fsimple-demo%2Fsimple-demo.component.ts)\r\n\r\n## Install\r\n\r\n\r\n\r\nnpm install ngx-awesome-uploader --save\r\n\r\n\r\n\r\n##### Load the module for your app:\r\n\r\n\r\n\r\n```typescript\r\nimport { FilePickerModule } from  'ngx-awesome-uploader';\r\n\r\n@NgModule({\r\n  imports: [\r\n  ...\r\n  FilePickerModule\r\n  ]\r\n  })\r\n\r\n```\r\n\r\n## Usage\r\n\r\nIn order to make library maximum compatible with apis you need to create and provide <b>\r\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 :) .\r\nSo this libray exposes a FilePickerAdapter abstract class which you can import on your new class file definition:\r\n\r\n\r\n``` import { FilePickerAdapter } from 'ngx-awesome-uploader';```\r\n\r\n\r\n\r\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:\r\n\r\n\r\n\r\n```\r\npublic abstract uploadFile(fileItem: FilePreviewModel): Observable<UploadResponse>;\r\n\r\npublic abstract removeFile(fileItem: FilePreviewModel): Observable<any>;\r\n```\r\n\r\n\r\n\r\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)\r\n\r\n\r\n\r\n#### Now you can use it in your template\r\n\r\n\r\n\r\n```html\r\n<ngx-awesome-uploader\r\n[adapter]=\"adapter\"\r\n>\r\n</ngx-awesome-uploader>\r\n\r\n```\r\n\r\n\r\n\r\n#### and in the Component:\r\n\r\n\r\n\r\n```typescript\r\nimport { HttpClient } from  '@angular/common/http';\r\nimport { DemoFilePickerAdapter } from  './demo-file-picker.adapter';\r\nimport { Component} from  '@angular/core';\r\n\r\n@Component({\r\nselector: 'demo-file-picker',\r\ntemplateUrl: './demo-file-picker.component.html',\r\nstyleUrls: ['./demo-file-picker.component.scss']\r\n})\r\n\r\nexport  class DemoFilePickerComponent {\r\nadapter = new  DemoFilePickerAdapter(this.http);\r\nconstructor(private http: HttpClient) { }\r\n}\r\n\r\n```\r\n\r\n>**Note:** As you see you should provide http instance to adapter.\r\n\r\nStill in Doubt? Check [Minimal Setup Demo](https://stackblitz.com/edit/ngx-awesome-uploader?file=src%2Fapp%2Fsimple-demo%2Fsimple-demo.component.ts)\r\n\r\n\r\n\r\n## API\r\n\r\n```typescript\r\n\r\n/** Whether to enable cropper. Default: disabled */\r\n@Input() enableCropper = false;\r\n\r\n/** Whether to show default drag and drop template. Default:true */\r\n@Input() showeDragDropZone = true;\r\n\r\n/** Single or multiple. Default: multi */\r\n@Input() uploadType = 'multi';\r\n\r\n/** Max size of selected file in MB. Default: no limit */\r\n@Input() fileMaxSize: number;\r\n\r\n/** Max count of file in multi-upload. Default: no limit */\r\n@Input() fileMaxCount: number;\r\n\r\n/** Total Max size limit of all files in MB. Default: no limit */\r\n@Input() totalMaxSize: number;\r\n\r\n/** Which file types to show on choose file dialog. Default: show all */\r\n@Input() accept: string;\r\n\r\n/** File extensions filter. Default: any exteion */\r\n@Input() fileExtensions: String;\r\n\r\n/** Cropper options if cropper enabled. Default:\r\ndragMode: 'crop',\r\naspectRatio: 1,\r\nautoCrop: true,\r\nmovable: true,\r\nzoomable: true,\r\nscalable: true,\r\nautoCropArea: 0.8\r\n*/\r\n@Input() cropperOptions: Object;\r\n\r\n/** Custom Adapter for uploading/removing files. Required */\r\n@Input() adapter: FilePickerAdapter;\r\n\r\n/** Custom template for dropzone. Optional */\r\n@Input() dropzoneTemplate: TemplateRef<any>;\r\n\r\n/** Custom Preview Item template. Optional */\r\n@Input() itemTemplate: TemplateRef<any>;\r\n\r\n/** Whether to show default files preview container. Default: true */\r\n@Input() showPreviewContainer = true;\r\n\r\n/** Custom validator function. Optional */\r\n@Input() customValidator: (file: File) => Observable<boolean>;\r\n\r\n/** Custom captions input. Used for multi language support */\r\n@Input() captions: UploaderCaptions;\r\n\r\n/** Whether to auto upload file on file choose or not. Default: true. You can get files list by accessing component files. */\r\n@Input() enableAutoUpload = true;\r\n\r\n/** capture paramerter for file input such as user,environment*/\r\n@Input() fileInputCapture: string;\r\n\r\n```\r\n\r\n## Output events\r\n\r\n\r\n\r\n```typescript\r\n\r\n/** Emitted when file upload via api success.\r\nEmitted for every file */\r\n@Output() uploadSuccess = new  EventEmitter<FilePreviewModel>();\r\n\r\n/** Emitted when file upload via api fails.\r\nEmitted for every file */\r\n@Output() uploadFail = new  EventEmitter<HttpErrorResponse>();\r\n\r\n/** Emitted when file is removed via api successfully.\r\nEmitted for every file */\r\n@Output() removeSuccess = new  EventEmitter<FilePreviewModel>();\r\n\r\n/** Emitted on file validation fail */\r\n@Output() validationError = new  EventEmitter<ValidationError>();\r\n\r\n/** Emitted when file is added and passed validations. Not uploaded yet */\r\n@Output() fileAdded = new  EventEmitter<FilePreviewModel>();\r\n\r\n/** Emitted when file is removed from fileList */\r\n@Output() fileRemoved = new  EventEmitter<FilePreviewModel>();\r\n```\r\n\r\n\r\n\r\n## File-Validation\r\n\r\n### Built-in-validations\r\n\r\nAll validations are emitted through <b> ValidationError </b>event.\r\n\r\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)\r\nand which emits failed file and error type.\r\n\r\nSupported validations:\r\n\r\n| **Validation Type**                | **Description**                                                                                                                                                                       | **Default** |\r\n|----------------------------|---------------------------------------------------------------------------------------|----------------------------------------|\r\n| fileMaxSize: number       | Max size of selected file in MB.   | No limit\r\n| fileExtensions: String        |  Emitted when file does not satisfy provided extension   | Any extension\r\n| uploadType: String      | Upload type. Values: 'single' and 'multi'.  |multi\r\n| totalMaxSize: number       | Total Max size of files in MB. If cropper is enabled, the cropped image size is considered.| No limit\r\n| fileMaxCount: number       | Limit total files to upload by count  | No limit\r\n\r\n\r\n### Custom-validation\r\n\r\nYou can also provide your own custom validation along with built-in validations.\r\n\r\nYou custom validation takes `file: File` and returns `Observable<boolean>`;\r\n\r\nSo that means you can provide sync and async validations.\r\n\r\n\r\n\r\n```\r\npublic myCustomValidator(file: File): Observable<boolean> {\r\n  if (file.name.includes('panda')) {\r\n   return of(true);\r\n  }\r\n\r\n  if (file.size > 50) {\r\n   return this.http.get('url').pipe(map((res) => res === 'OK' ));\r\n  }\r\n  return of(false);\r\n  }\r\n```\r\nand pass to Template:\r\n\r\n```html\r\n<ngx-awesome-uploader\r\n[customValidator]=\"myCustomValidator\"\r\n>\r\n</ngx-awesome-uploader>\r\n\r\n```\r\n\r\n\r\nCheck [Demo](https://stackblitz.com/edit/ngx-awesome-uploader?file=src%2Fapp%2Fadvanced-demo%2Fadvanced-demo.component.html)\r\n\r\n\r\n\r\n\r\n\r\n## Cropper\r\n\r\n\r\n\r\nLibrary uses cropperjs to crop images but you need import it to use it. Example: in index html\r\n\r\n\r\n\r\n```html\r\n\r\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.4.3/cropper.min.js\" async>  </script>\r\n<link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.4.3/cropper.css\"  />\r\n\r\n```\r\n\r\n\r\n\r\n>**Note**: To use cropper, you should set enableCropper to true. Look at API section above.\r\n\r\nYou can also provide your custom cropper options.\r\n\r\n\r\n\r\n## Custom-Template\r\n\r\nYou can provide custom template to library.\r\n\r\nI) To provide custom template for drag and drop zone, use content projection. Example:\r\n\r\n```html\r\n  <ngx-awesome-uploader\r\n  [adapter]=\"adapter\">\r\n\r\n  <div class=\"dropzoneTemplate\">\r\n  \t<button>Custom</button>\r\n  </div>\r\n\r\n</ngx-awesome-uploader>\r\n\r\n````\r\n\r\n\r\n\r\n>**Note:** The wrapper of your custom template must have a class **dropzoneTemplate**.\r\n\r\n\r\n\r\n[Checkout Demo](https://stackblitz.com/edit/ngx-awesome-uploader?file=src%2Fapp%2Fadvanced-demo%2Fadvanced-demo.component.html)\r\n\r\n\r\n\r\nII) To use custom file preview template, pass your custom template as below:\r\n\r\n\r\n\r\n```html\r\n\r\n<ngx-awesome-uploader #uploader\r\n  [adapter]=\"adapter\"\r\n  [itemTemplate]=\"itemTemplate\"\r\n>\r\n</ngx-awesome-uploader>\r\n\r\n<ng-template #itemTemplate let-fileItem=\"fileItem\" let-uploadProgress=\"uploadProgress\">\r\n\r\n  <p>{{fileItem.file.size}}</p>\r\n\r\n  <p>{{fileItem.fileName}}</p>\r\n\r\n  <p *ngIf=\"uploadProgress < 100\">{{uploadProgress}}%</p>\r\n\r\n  <button (click)=\"uploader.removeFile(fileItem)\">Remove</button>\r\n\r\n</ng-template>\r\n\r\n```\r\n\r\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 .\r\n\r\n## Multi Language\r\n\r\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).\r\n\r\n\r\n\r\nCheck [Demo](https://stackblitz.com/edit/ngx-awesome-uploader?file=src%2Fapp%2Fadvanced-demo%2Fadvanced-demo.component.html)\r\n\r\n## Edit Mode\r\n\r\nYou can show your files without uploading them\r\n\r\n```   @ViewChild('uploader', { static: true }) uploader: FilePickerComponent; ```\r\n\r\n```\r\n  public ngOnInit(): void {\r\n    const files = [\r\n      {\r\n        fileName: 'My File 1 for edit.png'\r\n      },\r\n      {\r\n        fileName: 'My File 2 for edit.xlsx'\r\n      }\r\n    ] as FilePreviewModel[];\r\n    this.uploader.setFiles(files);\r\n  }\r\n```\r\n## Bonus\r\n\r\nYou can also check out library [router animations ](https://www.npmjs.com/package/ngx-router-animations)\r\n\r\n## Contribution\r\n\r\n\r\n\r\nYou can fork project from github. Pull requests are kindly accepted.\r\n\r\n1. Building library: ng build file-picker --prod\r\n\r\n2. Running tests: ng test file-picker  --browsers=ChromeHeadless\r\n\r\n3. Run demo: ng serve","readmeFilename":"README.md"}