import * as React from 'react' ; import Kernel from '../../../../vendor/kernel' ; import { useDropzone } from 'react-dropzone' ; import InstanceBag from '../../../InstanceBag' ; import { readFileAsArrayBuffer } from '../../../services/FileReaderService' ; interface Props { className ? : string ; currentPath : string ; children : React . ReactNode ; } export default function Dropzone ( props ) { const { currentPath , className , children } = props ; const onDrop = React . useCallback ( async ( acceptedFiles ) => { const kernel = InstanceBag . get < Kernel > ( 'kernel' ) ; const promises = acceptedFiles . map ( ( file ) => readFileAsArrayBuffer ( file ) ) ; const processedFiles = await Promise . all ( promises ) ; processedFiles . forEach ( ( file ) => { const path = `${ currentPath }/${ file . name }` ; const newPath = path . split ( '/' ) . filter ( ( p ) => p ) . join ( '/' ) ; kernel . fs . writeFile ( newPath , new Uint8Array ( file . bin ) ) ; } ) ; } , [ currentPath ] ) ; const { getInputProps , getRootProps } = useDropzone ( { onDrop , noClick : true } ) ; return ( < div className = { className } { ... getRootProps ( ) } > < input { ... getInputProps ( ) } / > { children } < /div>); }