raonkupload-angular/samples/basic/src/app/demo-form/demo-form.component.ts

Angular component for RAON K Upload.

/**
 * @license Copyright (c) 2003-2022, RAONWIZ DevTeam. All rights reserved.
 */

import {
	Component,
	ViewChild,
	AfterViewInit
} from '@angular/core';
import { NgForm } from '@angular/forms';
import { RaonkUpload } from 'raonkupload-angular';

declare let RAONKUPLOAD: any;

@Component( {
	selector: 'app-demo-form',
	templateUrl: './demo-form.component.html',
	styleUrls: [ './demo-form.component.css' ]
} )

export class DemoFormComponent implements AfterViewInit {
	@ViewChild( 'demoForm', { static: true } ) demoForm?: NgForm;

	public model = {
		name: 'raonkupload',
		surname: 'raonwiz',
		raonkupload_form_resume: ''
	};

	public formDataPreview?: string;

	ngAfterViewInit() {
		this.demoForm!.control.valueChanges
			.subscribe( values => this.formDataPreview = JSON.stringify( values ) );
	}

	onSubmit() {
		console.log( 'Form submit, model', this.model );
	}

	reset() {
		this.demoForm!.reset();
		RAONKUPLOAD.ResetUpload();
	}

	get raonkupload_form_resume() {
		return this.demoForm!.controls.raonkupload_form_resume;
	}

	onNamespaceLoaded( event: RaonkUpload.EventInfo ): void {
		console.log( `Namespace loaded by url.` );
	}
	onCreationComplete( event: RaonkUpload.EventInfo ): void {
		console.log( { 
			eventName: "onCreationComplete",
			componentName: event.componentName,
			paramObj: event.paramObj
		} );
	}
	onBeforeAddFile( event: RaonkUpload.EventInfo ): void {
		console.log( { 
			eventName: "onBeforeAddFile",
			componentName: event.componentName,
			paramObj: event.paramObj
		} );

		RAONKUPLOAD._ExternalEventRetValueMap.set(event.componentName, true);
	}	
	onAfterAddFile( event: RaonkUpload.EventInfo ): void {
		console.log( { 
			eventName: "onAfterAddFile",
			componentName: event.componentName,
			paramObj: event.paramObj
		} );
	}
	onAfterAddAllFile( event: RaonkUpload.EventInfo ): void {
		console.log( { 
			eventName: "onAfterAddAllFile",
			componentName: event.componentName,
			paramObj: event.paramObj
		} );
	}
	onBeforeDeleteFile( event: RaonkUpload.EventInfo ): void {
		console.log( { 
			eventName: "onBeforeDeleteFile",
			componentName: event.componentName,
			paramObj: event.paramObj
		} );

		RAONKUPLOAD._ExternalEventRetValueMap.set(event.componentName, true);
	}
	onAfterDeleteFile( event: RaonkUpload.EventInfo ): void {
		console.log( { 
			eventName: "onAfterDeleteFile",
			componentName: event.componentName,
			paramObj: event.paramObj
		} );
	}
	onDeleteAllFile( event: RaonkUpload.EventInfo ): void {
		console.log( { 
			eventName: "onDeleteAllFile",
			componentName: event.componentName,
			paramObj: event.paramObj
		} );
	}
	onBeforeUpload( event: RaonkUpload.EventInfo ): void {
		console.log( { 
			eventName: "onBeforeUpload",
			componentName: event.componentName,
			paramObj: event.paramObj
		} );
		
		RAONKUPLOAD._ExternalEventRetValueMap.set(event.componentName, true);
	}
	onUploadComplete( event: RaonkUpload.EventInfo ): void {
		console.log( { 
			eventName: "onUploadComplete",
			componentName: event.componentName,
			paramObj: event.paramObj
		} );
	}
	onBeforeDownloadFile( event: RaonkUpload.EventInfo ): void {
		console.log( { 
			eventName: "onBeforeDownloadFile",
			componentName: event.componentName,
			paramObj: event.paramObj
		} );

		RAONKUPLOAD._ExternalEventRetValueMap.set(event.componentName, true);
	}
	onBeforeOpenFile( event: RaonkUpload.EventInfo ): void {
		console.log( { 
			eventName: "onBeforeOpenFile",
			componentName: event.componentName,
			paramObj: event.paramObj
		} );

		RAONKUPLOAD._ExternalEventRetValueMap.set(event.componentName, true);
	}
	onDownloadCompleteFile( event: RaonkUpload.EventInfo ): void {
		console.log( { 
			eventName: "onDownloadCompleteFile",
			componentName: event.componentName,
			paramObj: event.paramObj
		} );
	}
	onDownloadCompleteAllFile( event: RaonkUpload.EventInfo ): void {
		console.log( { 
			eventName: "onDownloadCompleteAllFile",
			componentName: event.componentName,
			paramObj: event.paramObj
		} );
	}
	onOnError( event: RaonkUpload.EventInfo ): void {
		console.log( { 
			eventName: "onOnError",
			componentName: event.componentName,
			paramObj: event.paramObj
		} );
	}
	onDownloadCancel( event: RaonkUpload.EventInfo ): void {
		console.log( { 
			eventName: "onDownloadCancel",
			componentName: event.componentName,
			paramObj: event.paramObj
		} );
	}
	onSelectItem( event: RaonkUpload.EventInfo ): void {
		console.log( { 
			eventName: "onSelectItem",
			componentName: event.componentName,
			paramObj: event.paramObj
		} );
	}
	onCustomAction( event: RaonkUpload.EventInfo ): void {
		console.log( { 
			eventName: "onCustomAction",
			componentName: event.componentName,
			paramObj: event.paramObj
		} );
	}
	onAlert( event: RaonkUpload.EventInfo ): void {
		console.log( { 
			eventName: "onAlert",
			componentName: event.componentName,
			paramObj: event.paramObj
		} );
	}
}