dropzone.tsx

import {useDropzone} from '@tofusoup429/dropzone';
import { useEffect } from 'react';

const FolderImage = () => {
  return(
    <svg version="1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" enableBackground="new 0 0 48 48">
        <path fill="#FFA000" d="M40,12H22l-4-4H8c-2.2,0-4,1.8-4,4v8h40v-4C44,13.8,42.2,12,40,12z"/>
        <path fill="#FFCA28" d="M40,12H8c-2.2,0-4,1.8-4,4v20c0,2.2,1.8,4,4,4h32c2.2,0,4-1.8,4-4V16C44,13.8,42.2,12,40,12z"/>
    </svg>
  )
}

const Dropzone = () => {
  let {fileName, dndStatus, fileContent, fileSize} = useDropzone();
  useEffect(()=>{
    console.log(fileName, dndStatus, fileContent, fileSize)
  },[dndStatus, fileContent, fileSize])
  return (
    <>
      <div id='dropzone' style={{width:'100px', height:'100px', backgroundColor:(dndStatus==='dragover'?"red":'yellow')}}><FolderImage /></div>
      {(fileContent) &&
       <> 
        <div id="filename">{`filename:${fileName}`}</div>
        <div id="fileContent" style={{color:"red"}}>{fileContent}</div>
       </> 
      }
      
    </>
  )
}

export default Dropzone