\r\n {{message}}\r\n
\r\nMaximum file size 500kb
\r\n\r\n \r\n
\r\n","import { Component, OnInit, ViewChild,ElementRef } from '@angular/core';\r\nimport { SafeUrl, DomSanitizer } from '@angular/platform-browser'\r\nimport { ModalDirective } from 'ngx-bootstrap/modal';\r\n\r\n@Component({\r\n selector: 'demo-upload-gallery',\r\n templateUrl: 'gallery.html'\r\n})\r\n\r\nexport class DemoUploadGalleryComponent implements OnInit {\r\n\r\n galleryImageUrl: SafeUrl\r\n\r\n @ViewChild('galleryModal', { static: false }) galleryModal: ModalDirective;\r\n\r\n constructor( private sanitizer: DomSanitizer) { }\r\n\r\n ngOnInit() { }\r\n\r\n previewHandle(commonFile: any): void {\r\n const file: File = commonFile.raw\r\n this.galleryImageUrl = this.sanitizer.bypassSecurityTrustUrl(URL.createObjectURL(file))\r\n this.galleryModal.show()\r\n }\r\n\r\n removeHandle(commonFile: any): void {\r\n alert('File removed')\r\n }\r\n}","Drag your file or click here to upload
\r\n \r\n \r\n
\r\nUpload
\r\n\r\n
\r\n","import { Component, OnInit } from '@angular/core';\r\n\r\n@Component({\r\n selector: 'demo-upload-list',\r\n templateUrl: 'list.html',\r\n})\r\n\r\nexport class DemoUploadListComponent implements OnInit {\r\n\r\n message: string = ''\r\n showMessage: boolean = false\r\n status: 'success' | 'fail' | '' = ''\r\n fileList: any[] = []\r\n\r\n constructor() { }\r\n\r\n ngOnInit() { \r\n\r\n this.fileList = [\r\n {\r\n name: 'food.jpeg',\r\n raw: {\r\n type: 'image/jpeg'\r\n },\r\n url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?' +\r\n 'imageMogr2/thumbnail/360x360/format/webp/quality/100'\r\n },\r\n {\r\n name: 'food2.jpeg',\r\n raw: {\r\n type: 'image/jpeg'\r\n }, \r\n url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99b' +\r\n 'ce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'\r\n }\r\n ]\r\n }\r\n\r\n \r\n}","\r\n
\r\n\r\n
\r\n \r\n
\r\n Gallery
\r\n \r\n\r\n ![\"\"]()
\r\n
\r\n Component for upload file by selecting or dragging
\r\nSimple usage of upload
`,\r\n component: require('!!raw-loader!./demos/click/click'),\r\n html: require('!!raw-loader!./demos/click/click.html'),\r\n outlet: DemoUploadClickComponent\r\n },\r\n {\r\n title: 'Avatar',\r\n anchor: 'avatar',\r\n description: `Click to upload user's avatar
`,\r\n component: require('!!raw-loader!./demos/avatar/avatar'),\r\n html: require('!!raw-loader!./demos/avatar/avatar.html'),\r\n outlet: DemoUploadAvatarComponent\r\n },\r\n {\r\n title: 'Gallery',\r\n anchor: 'gallery',\r\n description: `Show images as thumbnail list after upload.
`,\r\n component: require('!!raw-loader!./demos/gallery/gallery'),\r\n html: require('!!raw-loader!./demos/gallery/gallery.html'),\r\n outlet: DemoUploadGalleryComponent\r\n },\r\n {\r\n title: 'List',\r\n anchor: 'list',\r\n description: `Show images details in list after upload.
`,\r\n component: require('!!raw-loader!./demos/list/list'),\r\n html: require('!!raw-loader!./demos/list/list.html'),\r\n outlet: DemoUploadListComponent\r\n },\r\n {\r\n title: 'Drag Upload',\r\n anchor: 'Drag',\r\n description: `Drag files to a specific area to upload
`,\r\n component: require('!!raw-loader!./demos/drag/drag'),\r\n html: require('!!raw-loader!./demos/drag/drag.html'),\r\n outlet: DemoUploadDragComponent\r\n }\r\n ]\r\n },\r\n {\r\n name: 'API Reference',\r\n anchor: 'api-reference',\r\n outlet: ApiSectionsComponent,\r\n content: [\r\n {\r\n title: 'UploadComponent',\r\n anchor: 'upload-component',\r\n outlet: NgApiDocComponent\r\n }\r\n ]\r\n }\r\n];\r\n","export default \"\\r\\n {{message}}\\r\\n
\\r\\n\\r\\n {{message}}\\r\\n
\\r\\nMaximum file size 500kb
\\r\\n\\r\\n \\r\\n
\\r\\n\";","export default \"import { Component, OnInit } from '@angular/core';\\r\\n\\r\\n@Component({\\r\\n selector: 'demo-upload-drag',\\r\\n templateUrl: './drag.html'\\r\\n})\\r\\nexport class DemoUploadDragComponent implements OnInit {\\r\\n constructor() { }\\r\\n\\r\\n ngOnInit(): void { }\\r\\n}\\r\\n\";","export default \"Drag your file or click here to upload
\\r\\n \\r\\n \\r\\n
\\r\\nUpload
\\r\\n\\r\\n
\\r\\n\";","export default \"import { Component, OnInit, ViewChild,ElementRef } from '@angular/core';\\r\\nimport { SafeUrl, DomSanitizer } from '@angular/platform-browser'\\r\\nimport { ModalDirective } from 'ngx-bootstrap/modal';\\r\\n\\r\\n@Component({\\r\\n selector: 'demo-upload-gallery',\\r\\n templateUrl: 'gallery.html'\\r\\n})\\r\\n\\r\\nexport class DemoUploadGalleryComponent implements OnInit {\\r\\n\\r\\n galleryImageUrl: SafeUrl\\r\\n\\r\\n @ViewChild('galleryModal', { static: false }) galleryModal: ModalDirective;\\r\\n\\r\\n constructor( private sanitizer: DomSanitizer) { }\\r\\n\\r\\n ngOnInit() { }\\r\\n\\r\\n previewHandle(commonFile: any): void {\\r\\n const file: File = commonFile.raw\\r\\n this.galleryImageUrl = this.sanitizer.bypassSecurityTrustUrl(URL.createObjectURL(file))\\r\\n this.galleryModal.show()\\r\\n }\\r\\n\\r\\n removeHandle(commonFile: any): void {\\r\\n alert('File removed')\\r\\n }\\r\\n}\";","export default \"\\r\\n
\\r\\n\\r\\n
\\r\\n \\r\\n
\\r\\n Gallery
\\r\\n \\r\\n\\r\\n ![\\\"\\\"]()
\\r\\n
\\r\\n