import { useEffect , useReducer , useState } from 'react' ; import { useDropzone } from 'react-dropzone' ; import { initialState , reducer } from './FileUpload.reducer' ; import { ApiUploadFunction , FileUploadOnChangeFunction , } from './FileUpload.types' ; const FILE_SUPPORTED_MIMETYPES = [ 'image/jpeg' , 'image/png' , 'application/pdf' , 'application/msword' , 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' , ] ; export type TUseFileUploadEffectsArgs = { apiUploadFunction : ApiUploadFunction ; onChange : FileUploadOnChangeFunction ; } ; export const useFileUploadEffects = ( { apiUploadFunction , onChange , } ) => { const [ state , dispatch ] = useReducer ( reducer , initialState ) ; const [ files , setFiles ] = useState < File [ ] > ( [ ] ) ; const { getRootProps , getInputProps } = useDropzone ( { accept : FILE_SUPPORTED_MIMETYPES , onDrop : ( acceptedFiles ) => { setFiles ( [ ... files , ... acceptedFiles ] ) ; } , } ) ; const upload = async ( file ) => { const fileIndex = files . indexOf ( file ) ; try { const uploadedArray = await apiUploadFunction ( [ file as Blob ] ) ; dispatch ( { type : 'setFile' , payload : { id : fileIndex , file : { ... state [ fileIndex ] , uploadedName : uploadedArray [ 0 ] , cancelToken : null , uploadProgress : 100 , cancelled : false , } , } , } ) ; } catch ( error ) { console . error ( `Error while uploading file in FileUpload: ${ error }` ) ; } } ; useEffect ( ( ) => { files . forEach ( ( f ) => { const fileIndex = files . indexOf ( f ) ; const uploadedFile = state && state [ fileIndex ] ; if ( typeof uploadedFile === 'undefined' ) { dispatch ( { type : 'setFile' , payload : { id : fileIndex , file : { uploadProgress : 0 , removed : false , cancelled : false , uploadedName : null , cancelToken : null , } , } , } ) ; upload ( f ) ; } } ) ; } , [ files ] ) ; useEffect ( ( ) => { onChange ( Object . entries ( state ) . map ( ( [ , value ] ) => value ) ) ; } , [ state ] ) ; return { getRootProps , getInputProps , files , state , dispatch } ; } ;