raonkupload-react/samples/component-events/src/RaonkUpload.jsx

React component for RAON K Upload

/* eslint-disable react/prop-types */

import * as React from 'react';
import { RaonkUpload } from 'raonkupload-react';
/**
 * `RaonkUpload` component accepts handlers for all component events, e.g. `creationComplete` -> `onCreationComplete`.
 *
 * `RaonkUpload` component ensures referential equality between renders for event handlers.
 * This means that first value of an event handler will be memoized and used through the lifecycle of `RaonkUpload` component.
 */
function RaonkUploadCmp( { pushEvent, uniqueName } ) {
	const handleBeforeLoad = () => {
		pushEvent( 'beforeLoad', '--' );
		console.log( {
			eventName: 'handleBeforeLoad',
			componentName: uniqueName
		});
	};

	const handleNamespaceLoaded = () => {
		pushEvent( 'namespaceLoaded', '--' );
		console.log( {
			eventName: 'handleNamespaceLoaded',
			componentName: uniqueName
		});
	};

	const handleLoaded = (eventParams) => {
		pushEvent( 'loaded', eventParams.eventInfo.componentName );
		console.log( {
			eventName: 'handleLoaded',
			componentName: eventParams.eventInfo.componentName,
			paramObj: eventParams.eventInfo.paramObj
		});
	};

	const handleCreationComplete = (eventParams) => {
		pushEvent( 'creationComplete', eventParams.eventInfo.componentName );
		console.log( {
			eventName: 'handleCreationComplete',
			componentName: eventParams.eventInfo.componentName,
			paramObj: eventParams.eventInfo.paramObj
		});
	};
	
	const handleBeforeAddFile = (eventParams) => {
		pushEvent( 'beforeAddFile', uniqueName );
		console.log( {
			eventName: 'handleBeforeAddFile',
			componentName: eventParams.eventInfo.componentName,
			paramObj: eventParams.eventInfo.paramObj
		});

		return true;
	};
	
	const handleAfterAddFile = (eventParams) => {
		pushEvent( 'afterAddFile', uniqueName );
		console.log( {
			eventName: 'handleAfterAddFile',
			componentName: eventParams.eventInfo.componentName,
			paramObj: eventParams.eventInfo.paramObj
		});
	};

	const handleAfterAddAllFile = (eventParams) => {
		pushEvent( 'afterAddAllFile', uniqueName );
		console.log( {
			eventName: 'handleAfterAddAllFile',
			componentName: eventParams.eventInfo.componentName,
			paramObj: eventParams.eventInfo.paramObj
		});
	};

	const handleUploadComplete = (eventParams) => {
		pushEvent( 'uploadComplete', uniqueName );
		console.log( {
			eventName: 'handleUploadComplete',
			componentName: eventParams.eventInfo.componentName,
			paramObj: eventParams.eventInfo.paramObj
		});
	};

	const handleDestroy = (eventParams) => {
		pushEvent( 'destroy', uniqueName );
		console.log( {
			eventName: 'handleDestroy',
			componentName: eventParams.eventInfo.componentName,
			paramObj: eventParams.eventInfo.paramObj
		});
	};

	return (
		<RaonkUpload
			debug={true}
			id={uniqueName}
			
			runtimes='html5'
			config={{MaxTotalFileSize:'100MB', MaxOneFileSize:'10MB', DevelopLangage:'NONE'}}
			componentUrl="/raonkupload/js/raonkupload.js"

			onBeforeLoad={handleBeforeLoad}
			onNamespaceLoaded={handleNamespaceLoaded}
			onLoaded={handleLoaded}
			
			onCreationComplete={handleCreationComplete}
			onBeforeAddFile={handleBeforeAddFile}
			onAfterAddFile={handleAfterAddFile}
			onAfterAddAllFile={handleAfterAddAllFile}
			onUploadComplete={handleUploadComplete}
 			onDestroy={handleDestroy}
		/>
	);
}

export default RaonkUploadCmp;