Skip to content

Instantly share code, notes, and snippets.

@ux-powered

ux-powered/app.module.ts

Created November 26, 2019 06:41
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ux-powered/c47614ec346517a6c17306733574ecdb to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ux-powered/c47614ec346517a6c17306733574ecdb to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. ux-powered created this gist Nov 26, 2019.
    63 changes: 63 additions & 0 deletions app.module.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,63 @@
    import { BrowserModule, Title } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { FormsModule, ReactiveFormsModule } from '@angular/forms';
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    import { DropzoneModule } from 'ngx-dropzone-wrapper';
    import { DropzoneModalComponent } from './page/dropzone-modal.component'

    // *******************************************************************************
    // NgBootstrap

    import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

    // *******************************************************************************
    // App

    import { AppRoutingModule } from './app-routing.module';
    import { AppComponent } from './app.component';
    import { NotFoundComponent } from './not-found/not-found.component';
    import { AppService } from './app.service';
    import { LayoutModule } from './layout/layout.module';

    // *******************************************************************************
    // Pages

    import { PageComponent } from './page/page.component';

    // *******************************************************************************
    //

    @NgModule({
    declarations: [
    AppComponent,
    NotFoundComponent,
    DropzoneModalComponent, // Add modal component to "declarations"

    // Pages
    PageComponent
    ],

    imports: [
    BrowserModule,
    NgbModule,
    DropzoneModule,

    // App
    AppRoutingModule,
    LayoutModule
    ],

    entryComponents: [
    DropzoneModalComponent // Add modal component to "entryComponents"
    ],

    providers: [
    Title,
    AppService
    ],

    bootstrap: [
    AppComponent
    ]
    })
    export class AppModule {}
    69 changes: 69 additions & 0 deletions dropzone-modal.component.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,69 @@
    import { Component, ViewChild } from '@angular/core';
    import { DropzoneDirective } from 'ngx-dropzone-wrapper';
    import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';

    @Component({
    selector: 'app-dropzone-modal',
    template: `
    <div class="modal-header">
    <h5 class="modal-title">Upload</h5>
    <button type="button" class="close" (click)="modalService.dismiss('Cross click')">&times;</button>
    </div>
    <div class="modal-body">
    <div class="dropzone" [dropzone]="dropzoneConfig">
    <div class="dz-message needsclick">
    Drop files here or click to upload
    <span class="note needsclick">(This is just a demo dropzone. Selected files are <strong>not</strong> actually uploaded.)</span>
    </div>
    <div class="fallback">
    <input name="file" type="file" multiple>
    </div>
    </div>
    </div>
    <div class="modal-footer">
    <button type="button" class="btn btn-default" (click)="modalService.close('Close click')">Close</button>
    <button type="button" class="btn btn-primary">Complete</button>
    </div>
    `,
    styleUrls: [
    '../../vendor/libs/ngx-dropzone-wrapper/ngx-dropzone-wrapper.scss'
    ]
    })
    export class DropzoneModalComponent {
    @ViewChild(DropzoneDirective, { static: false }) dropzoneInstance: DropzoneDirective;

    dropzoneConfig = {
    url: '/upload',
    parallelUploads: 2,
    maxFilesize: 50000,
    filesizeBase: 1000,
    addRemoveLinks: true,
    previewTemplate: `
    <div class="dz-preview dz-file-preview">
    <div class="dz-details">
    <div class="dz-thumbnail">
    <img data-dz-thumbnail>
    <span class="dz-nopreview">No preview</span>
    <div class="dz-success-mark"></div>
    <div class="dz-error-mark"></div>
    <div class="dz-error-message"><span data-dz-errormessage></span></div>
    <div class="progress">
    <div class="progress-bar progress-bar-primary"
    role="progressbar"
    aria-valuemin="0"
    aria-valuemax="100"
    data-dz-uploadprogress></div>
    </div>
    </div>
    <div class="dz-filename" data-dz-name></div>
    <div class="dz-size" data-dz-size></div>
    </div>
    </div>`
    };

    constructor(private modalService: NgbActiveModal) {}

    ngAfterViewInit() {
    console.log(this.dropzoneInstance)
    }
    }
    35 changes: 35 additions & 0 deletions page.component.ts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,35 @@
    import { Component } from '@angular/core';
    import { AppService } from '../app.service';
    import { NgbModal, ModalDismissReasons } from '@ng-bootstrap/ng-bootstrap';
    import { DropzoneModalComponent} from './dropzone-modal.component'

    @Component({
    selector: 'app-page',
    templateUrl: './page.component.html'
    })
    export class PageComponent {

    constructor(private appService: AppService, private modalService: NgbModal) {
    this.appService.pageTitle = 'Page';
    }

    open() {
    const modal = this.modalService.open(DropzoneModalComponent) // Render modal with modal component

    modal.result.then((result) => {
    console.log(`Closed with: ${result}`);
    }, (reason) => {
    console.log(`Dismissed ${this.getDismissReason(reason)}`);
    });
    }

    private getDismissReason(reason: any): string {
    if (reason === ModalDismissReasons.ESC) {
    return 'by pressing ESC';
    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
    return 'by clicking on a backdrop';
    } else {
    return `with: ${reason}`;
    }
    }
    }