Angular Dropzone wrapper

<div class="row">
    <div class="col">
        <h3 class="h5">Controls</h3>
 
        <div class="form-check form-switch">
            <input class="form-check-input"
                type="checkbox"
                role="switch"
                id="is-directive"
                name="is-directive"
                [ngModel]="type() == 'directive'"
                (ngModelChange)="type.set($event ? 'directive' : 'component')">
            <label class="form-check-label"
                for="is-directive">Directive</label>
        </div>
 
        <div class="form-check form-switch">
            <input class="form-check-input"
                type="checkbox"
                role="switch"
                id="is-disabled"
                name="is-disabled"
                [ngModel]="disabled()"
                (ngModelChange)="disabled.set(!!$event)">
            <label class="form-check-label"
                for="is-disabled">Disabled</label>
        </div>
 
        <div class="form-check form-switch">
            <input class="form-check-input"
                type="checkbox"
                role="switch"
                id="is-multiple"
                name="is-multiple"
                [ngModel]="maxFiles() != 1"
                (ngModelChange)="maxFiles.set($event ? undefined : 1)">
            <label class="form-check-label"
                for="is-multiple">Upload multiple files</label>
        </div>
 
        <div class="form-check form-switch">
            <input class="form-check-input"
                type="checkbox"
                role="switch"
                id="auto-reset"
                name="auto-reset"
                [ngModel]="autoReset()"
                (ngModelChange)="autoReset.set(!!$event)">
            <label class="form-check-label"
                for="auto-reset">Auto reset</label>
        </div>
 
        <div class="form-check form-switch">
            <input class="form-check-input"
                type="checkbox"
                role="switch"
                id="click-action"
                name="click-action"
                [ngModel]="clickable()"
                (ngModelChange)="clickable.set(!!$event)">
            <label class="form-check-label"
                for="click-action">Click action</label>
        </div>
 
        <br>
 
        <button type="button"
            class="btn btn-primary"
            (click)="resetDropzone()">Reset upload area</button>
    </div>
    <div class="col demo-dz-column">
        <h3 class="h5">Dropzone</h3>
        @if (type() == 'directive') {
        <div class="dropzone dropzone-container"
            [nxtDropzone]="config()"
            [disabled]="disabled()"
            (init)="onUploadInit($event)"
            (error)="onUploadError($event)"
            (success)="onUploadSuccess($event)"></div>
        } @else {
        <nxt-dropzone class="dropzone-container"
            [config]="config()"
            [disabled]="disabled()"
            message="Click or drag images here to upload"
            (init)="onUploadInit($event)"
            (error)="onUploadError($event)"
            (success)="onUploadSuccess($event)"></nxt-dropzone>
        }
 
    </div>
</div>

import { Component, ViewEncapsulation, computed, signal, viewChild } from '@angular/core'
import { FormsModule } from '@angular/forms'
// eslint-disable-next-line @import/no-extraneous-dependencies
import Dropzone from 'dropzone'
import { DropzoneComponent, DropzoneConfig, DropzoneDirective } from 'nxt-dropzone-wrapper'
 
@Component({
    selector: 'app-sandbox',
    templateUrl: './sandbox.component.html',
    styleUrls: ['./sandbox.component.css'],
    encapsulation: ViewEncapsulation.Emulated,
    imports: [
        FormsModule,
        DropzoneComponent,
        DropzoneDirective
    ]
})
export class SandboxComponent {
 
    readonly type = signal<'component' | 'directive'>('component')
 
    readonly disabled = signal(false)
    readonly autoReset = signal(false)
    readonly clickable = signal(true)
    readonly maxFiles = signal<number | undefined>(1)
 
    private readonly timeout = computed(() => this.autoReset() ? 5000 : undefined)
 
    readonly config = computed(() => {
        const cfg: DropzoneConfig = {
            clickable: this.clickable(),
            maxFiles: this.maxFiles()
        }
        const timeout = this.timeout()
        cfg.autoReset = timeout
        cfg.errorReset = timeout
        cfg.cancelReset = timeout
        return cfg
    })
 
    readonly componentRef = viewChild(DropzoneComponent)
    readonly directiveRef = viewChild(DropzoneDirective)
 
    onUploadInit(dz: Dropzone) {
        console.log('onUploadInit:', dz)
    }
 
    onUploadSuccess(args: any) {
        console.log('onUploadSuccess:', args)
    }
 
    onUploadError([dz, err]: [Dropzone.DropzoneFile, string | Error]) {
        console.log('onUploadError:', dz, err)
    }
 
    resetDropzone(): void {
        const directiveRef = this.directiveRef()
        const componentRef = this.componentRef()
        if (this.type() === 'directive' && directiveRef) {
            directiveRef.reset()
        } else if (this.type() === 'component' && componentRef?.directiveRef()) {
            componentRef.directiveRef()!.reset()
        }
    }
 
}