diff --git a/src/UpupUploader.tsx b/src/UpupUploader.tsx
index 25bc5943..4e88dfbb 100644
--- a/src/UpupUploader.tsx
+++ b/src/UpupUploader.tsx
@@ -29,6 +29,7 @@ import {
     RefAttributes,
     SetStateAction,
     forwardRef,
+    useCallback,
     useEffect,
     useImperativeHandle,
     useState,
@@ -134,6 +135,79 @@ export const UpupUploader: FC<UpupUploaderProps & RefAttributes<any>> =
          */
         const client = getClient(s3Configs)
 
+        /**
+         * Check if file type is accepted
+         * @param file File to check
+         * @throws Error if file type is not accepted
+         */
+        const validateFileType = (file: File) => {
+            if (!checkFileType(file, accept, baseConfigs?.onFileTypeMismatch)) {
+                const error = new Error(`File type ${file.type} not accepted`)
+                baseConfigs?.onFileUploadFail?.(file, error)
+                throw error
+            }
+        }
+
+        /**
+         * Check if file size is within limits
+         * @param files Array of files to check
+         * @throws Error if total file size exceeds limit
+         */
+        const validateFileSize = (files: File[]) => {
+            if (maxFilesSize) {
+                const totalSize = files.reduce(
+                    (acc, file) => acc + file.size,
+                    0,
+                )
+                if (totalSize > maxFilesSize) {
+                    const error = new Error(
+                        `Total file size must be less than ${
+                            maxFilesSize / 1024 / 1024
+                        }MB`,
+                    )
+                    files.forEach(
+                        file => baseConfigs?.onFileUploadFail?.(file, error),
+                    )
+                    throw error
+                }
+            }
+        }
+
+        /**
+         * Compress files if compression is enabled
+         * @param files Array of files to compress
+         * @returns Promise<File[]> Compressed files
+         */
+        const compressFiles = async (files: File[]): Promise<File[]> => {
+            if (!toBeCompressed) return files
+
+            try {
+                return await Promise.all(
+                    files.map(async file => {
+                        const compressed = await compressFile({
+                            element: file,
+                            element_name: file.name,
+                        })
+                        return compressed
+                    }),
+                )
+            } catch (error) {
+                files.forEach(
+                    file =>
+                        baseConfigs?.onFileUploadFail?.(file, error as Error),
+                )
+                throw error
+            }
+        }
+
+        const handleUploadCancel = useCallback(() => {
+            if (progress > 0 && progress < 100) {
+                // Cancel the ongoing upload
+                handler.abort()
+                baseConfigs?.onCancelUpload?.(files)
+            }
+        }, [progress, files, handler, baseConfigs])
+
         /**
          * Expose the handleUpload function to the parent component
          */
@@ -150,93 +224,60 @@ export const UpupUploader: FC<UpupUploaderProps & RefAttributes<any>> =
                         : files
                 return await this.proceedUpload(filesList)
             },
-
+            cancelUpload: handleUploadCancel,
             async proceedUpload(filesList: File[]) {
                 return new Promise(async (resolve, reject) => {
-                    /**
-                     * Check if the total size of files is less than the maximum size
-                     */
-                    const filesSize = maxFilesSize
-                        ? files.reduce((acc, file) => acc + file.size, 0)
-                        : 0
-                    if (maxFilesSize && filesSize > maxFilesSize) {
-                        reject(
-                            new Error(
-                                'The total size of files must be less than ' +
-                                    maxFilesSize / 1024 / 1024 +
-                                    'MB',
-                            ),
-                        )
-                    }
-                    /**
-                     * Upload the file to the cloud storage
-                     */
-                    let filesToUpload: File[]
-                    let keys: string[] = []
-                    /**
-                     * Compress the file before uploading it to the cloud storage
-                     */
-                    if (toBeCompressed)
-                        filesToUpload = await Promise.all(
-                            filesList.map(async file => {
-                                /**
-                                 * Compress the file
-                                 */
-                                return await compressFile({
-                                    element: file,
-                                    element_name: file.name,
-                                })
-                            }),
-                        )
-                    else filesToUpload = filesList
-                    /**
-                     * Loop through the files array and upload the files
-                     */
-                    if (filesToUpload) {
-                        try {
-                            filesToUpload.map(async file => {
+                    try {
+                        // Validate all files first
+                        filesList.forEach(validateFileType)
+                        validateFileSize(filesList)
+
+                        // Notify upload start
+                        filesList.forEach(file => {
+                            baseConfigs?.onFileUploadStart?.(file)
+                        })
+
+                        // Compress files if needed
+                        const processedFiles = await compressFiles(filesList)
+
+                        const uploadPromises = processedFiles.map(
+                            async file => {
                                 const fileExtension = file.name.split('.').pop()
-                                /**
-                                 * assign a unique name for the file contain timestamp and random string with extension from the original file
-                                 */
-                                const key = `${Date.now()}__${uuidv4()}.${fileExtension}`
-
-                                /**
-                                 * Upload the file to the cloud storage
-                                 */
-                                await uploadObject({
-                                    client,
-                                    bucket,
-                                    key,
-                                    file,
-                                })
-                                    .then(data => {
-                                        if (data.httpStatusCode === 200) {
-                                            keys.push(key)
-                                        } else
-                                            throw new Error(
-                                                'Something went wrong',
-                                            )
-                                    })
-                                    .catch(err => {
-                                        throw new Error(err.message)
+                                const key = `${uuidv4()}.${fileExtension}`
+
+                                try {
+                                    const result = await uploadObject({
+                                        client,
+                                        bucket,
+                                        key,
+                                        file,
                                     })
-                                    .finally(() => {
-                                        if (
-                                            keys.length === filesToUpload.length
+
+                                    if (result.httpStatusCode === 200) {
+                                        baseConfigs?.onFileUploadComplete?.(
+                                            file,
+                                            key,
                                         )
-                                            resolve(keys) // return the keys to the parent component
-                                    })
-                            })
-                        } catch (error) {
-                            if (error instanceof Error) {
-                                // ✅ TypeScript knows err is Error
-                                reject(new Error(error.message))
-                            } else {
-                                reject(new Error('Something went wrong'))
-                            }
-                        }
-                    } else reject(undefined)
+                                        return key
+                                    } else {
+                                        throw new Error('Upload failed')
+                                    }
+                                } catch (error) {
+                                    baseConfigs?.onFileUploadFail?.(
+                                        file,
+                                        error as Error,
+                                    )
+                                    throw error
+                                }
+                            },
+                        )
+
+                        const keys = await Promise.all(uploadPromises)
+                        baseConfigs?.onAllUploadsComplete?.(keys)
+                        resolve(keys)
+                    } catch (error) {
+                        reject(error)
+                    }
                 })
             },
         }))
@@ -297,23 +338,70 @@ export const UpupUploader: FC<UpupUploaderProps & RefAttributes<any>> =
             mutateFiles()
         }, [files])
 
-        // Modify the input onChange handler
+        // Modify the input onChange handler to include validation
         const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-            const acceptedFiles = Array.from(e.target.files || [])
-                .filter(file => checkFileType(file, accept))
-                .map(createFileWithId)
-            setFiles(files =>
-                isAddingMore ? [...files, ...acceptedFiles] : acceptedFiles,
-            )
-            e.target.value = ''
+            try {
+                const newFiles = Array.from(e.target.files || [])
+                newFiles.forEach(validateFileType)
+                validateFileSize(newFiles)
+
+                const acceptedFiles = newFiles.map(createFileWithId)
+                setFiles(files =>
+                    isAddingMore ? [...files, ...acceptedFiles] : acceptedFiles,
+                )
+            } catch (error) {
+                console.error(error)
+                // Don't set files if validation fails
+            } finally {
+                e.target.value = ''
+            }
         }
 
-        // Modify the DropZone props
-        const handleDropzoneFiles = (newFiles: File[]) => {
-            const filesWithIds = newFiles.map(createFileWithId)
-            setFiles(files =>
-                isAddingMore ? [...files, ...filesWithIds] : [...filesWithIds],
-            )
+        // Modify the DropZone handler to include validation and maintain existing files
+        const handleDropzoneFiles: Dispatch<
+            SetStateAction<File[]>
+        > = filesOrUpdater => {
+            if (typeof filesOrUpdater === 'function') {
+                setFiles(prevFiles => {
+                    try {
+                        const updatedFiles = filesOrUpdater(prevFiles)
+                        const newFiles = updatedFiles.slice(prevFiles.length)
+
+                        // Validate only new files
+                        newFiles.forEach(validateFileType)
+                        validateFileSize([...prevFiles, ...newFiles])
+
+                        const filesWithIds = newFiles.map(createFileWithId)
+                        return [...prevFiles, ...filesWithIds]
+                    } catch (error) {
+                        console.error(error)
+                        return prevFiles
+                    }
+                })
+            } else {
+                try {
+                    filesOrUpdater.forEach(validateFileType)
+                    setFiles(prevFiles => {
+                        try {
+                            validateFileSize([...prevFiles, ...filesOrUpdater])
+                            const filesWithIds =
+                                filesOrUpdater.map(createFileWithId)
+                            return [...prevFiles, ...filesWithIds]
+                        } catch (error) {
+                            console.error(error)
+                            return prevFiles
+                        }
+                    })
+                } catch (error) {
+                    console.error(error)
+                }
+            }
+        }
+
+        // Add file removal handler
+        const handleFileRemove = (file: FileWithId) => {
+            setFiles(prev => prev.filter(f => f !== file))
+            baseConfigs?.onFileRemove?.(file)
         }
 
         return mini ? (
@@ -321,6 +409,8 @@ export const UpupUploader: FC<UpupUploaderProps & RefAttributes<any>> =
                 files={files}
                 setFiles={setFiles}
                 maxFileSize={maxFileSize}
+                handleFileRemove={handleFileRemove}
+                baseConfigs={baseConfigs}
             />
         ) : (
             <div
@@ -332,14 +422,11 @@ export const UpupUploader: FC<UpupUploaderProps & RefAttributes<any>> =
                 <AnimatePresence>
                     {isDragging && (
                         <DropZone
-                            setFiles={
-                                handleDropzoneFiles as Dispatch<
-                                    SetStateAction<File[]>
-                                >
-                            }
+                            setFiles={handleDropzoneFiles}
                             setIsDragging={setIsDragging}
                             multiple={multiple}
                             accept={accept}
+                            baseConfigs={baseConfigs}
                         />
                     )}
                 </AnimatePresence>
@@ -372,6 +459,8 @@ export const UpupUploader: FC<UpupUploaderProps & RefAttributes<any>> =
                     onFileClick={onFileClick}
                     progress={progress}
                     limit={limit}
+                    handleFileRemove={handleFileRemove}
+                    onCancelUpload={baseConfigs.onCancelUpload}
                 />
                 <div className="h-full p-2">
                     <div className="grid h-full w-full grid-rows-[1fr,auto] place-items-center rounded-md border border-dashed border-[#dfdfdf] transition-all">
@@ -381,6 +470,7 @@ export const UpupUploader: FC<UpupUploaderProps & RefAttributes<any>> =
                             methods={METHODS.filter(method => {
                                 return uploadAdapters.includes(method.id as any)
                             })}
+                            baseConfigs={baseConfigs}
                         />
                         <MetaVersion
                             customMessage={customMessage}
diff --git a/src/components/FilePreview.tsx b/src/components/FilePreview.tsx
index 2499d396..ae30bb1c 100644
--- a/src/components/FilePreview.tsx
+++ b/src/components/FilePreview.tsx
@@ -62,6 +62,7 @@ const FilePreview: FC<PreviewProps> = ({ file, objectUrl }) => {
                             filePath={objectUrl}
                             onError={(e: Error) => {
                                 console.error('Error in file preview:', e)
+                                return <FileIcon extension={extension} />
                             }}
                             errorComponent={() => (
                                 <FileIcon extension={extension} />
diff --git a/src/components/UpupMini/MiniDropZone.tsx b/src/components/UpupMini/MiniDropZone.tsx
deleted file mode 100644
index d5122381..00000000
--- a/src/components/UpupMini/MiniDropZone.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { motion } from 'framer-motion'
-import { Dispatch, FC, SetStateAction } from 'react'
-import { TbUpload } from 'react-icons/tb'
-
-type Props = {
-    setFiles: Dispatch<SetStateAction<File[]>>
-    setIsDragging: Dispatch<SetStateAction<boolean>>
-}
-
-const MiniDropZone: FC<Props> = ({ setFiles, setIsDragging }: Props) => {
-    return (
-        <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            className="absolute z-40 h-full w-full rounded-md bg-gray-300 bg-opacity-50 p-2 text-blue-600 backdrop-blur-sm dark:bg-[#1f1f1f] dark:bg-opacity-70"
-            onDragOver={e => {
-                e.preventDefault()
-                setIsDragging(true)
-                e.dataTransfer.dropEffect = 'copy'
-            }}
-        >
-            <div className="flex h-full w-full flex-col items-center justify-center gap-2 rounded-md border border-dashed border-current text-center text-xl">
-                <i className="rounded-full border-2 border-current p-3">
-                    <TbUpload />
-                </i>
-                <p className="text-lg">Drop your files here</p>
-            </div>
-            <input
-                type="file"
-                className="absolute top-0 h-full w-full opacity-0"
-                multiple={false}
-                onChange={e => {
-                    setFiles(() => [e.target.files![0]])
-                    setIsDragging(false)
-                }}
-                onDrop={e => {
-                    e.preventDefault()
-                    setFiles(() => [[...Array.from(e.dataTransfer.files)][0]])
-                    setIsDragging(false)
-                }}
-            />
-        </motion.div>
-    )
-}
-
-export default MiniDropZone
diff --git a/src/components/UpupMini/MiniPreview.tsx b/src/components/UpupMini/MiniPreview.tsx
index 7276123a..315c04d0 100644
--- a/src/components/UpupMini/MiniPreview.tsx
+++ b/src/components/UpupMini/MiniPreview.tsx
@@ -3,7 +3,9 @@ import { FC } from 'react'
 import { FileHandlerProps } from 'types/file'
 import PreviewComponent from '../UpupUploader/PreviewComponent'
 
-const MiniPreview: FC<FileHandlerProps> = ({ files, setFiles }) => {
+const MiniPreview: FC<
+    FileHandlerProps & { handleFileRemove: (file: File) => void }
+> = ({ files, setFiles, handleFileRemove }) => {
     return (
         <AnimatePresence>
             {files.length > 0 && (
@@ -20,6 +22,7 @@ const MiniPreview: FC<FileHandlerProps> = ({ files, setFiles }) => {
                                 setFiles={setFiles}
                                 file={file}
                                 index={files.indexOf(file)}
+                                handleFileRemove={handleFileRemove}
                                 mini
                             />
                         ))}
diff --git a/src/components/UpupMini/index.tsx b/src/components/UpupMini/index.tsx
index 6b640339..ac51a7ef 100644
--- a/src/components/UpupMini/index.tsx
+++ b/src/components/UpupMini/index.tsx
@@ -1,25 +1,30 @@
 import type { Dispatch, FC, LegacyRef, SetStateAction } from 'react'
 import { useRef } from 'react'
 
+import { DropZone } from 'components/UpupUploader'
 import { AnimatePresence } from 'framer-motion'
 import { useDragAndDrop } from 'hooks'
 import { checkFileType } from 'lib'
 import { BaseConfigs } from 'types'
+import { FileWithId } from 'types/file'
 import MetaVersion from '../MetaVersion'
-import { default as MiniDropZone } from './MiniDropZone'
 import { default as MiniPreview } from './MiniPreview'
 
 type Props = {
     files: File[]
     setFiles: Dispatch<SetStateAction<File[]>>
     maxFileSize: BaseConfigs['maxFileSize']
+    handleFileRemove: (file: FileWithId) => void
+    baseConfigs?: BaseConfigs
 }
 
 export const UpupMini: FC<Props> = ({
     files,
     setFiles,
     maxFileSize,
-}: Props) => {
+    handleFileRemove,
+    baseConfigs,
+}) => {
     const {
         isDragging,
         setIsDragging,
@@ -39,9 +44,12 @@ export const UpupMini: FC<Props> = ({
         >
             <AnimatePresence>
                 {isDragging && (
-                    <MiniDropZone
+                    <DropZone
                         setFiles={setFiles}
                         setIsDragging={setIsDragging}
+                        accept="image/*"
+                        multiple={false}
+                        baseConfigs={baseConfigs}
                     />
                 )}
             </AnimatePresence>
@@ -60,7 +68,11 @@ export const UpupMini: FC<Props> = ({
                 }}
             />
 
-            <MiniPreview files={files} setFiles={setFiles} />
+            <MiniPreview
+                files={files}
+                setFiles={setFiles}
+                handleFileRemove={handleFileRemove}
+            />
             <div className="h-full p-2">
                 <div className="grid h-full w-full grid-rows-[1fr,auto] place-items-center rounded-md border border-dashed border-[#dfdfdf] transition-all">
                     <h1 className="text-center dark:text-white">
@@ -82,5 +94,4 @@ export const UpupMini: FC<Props> = ({
     )
 }
 
-export { default as MiniDropZone } from './MiniDropZone'
 export { default as MiniPreview } from './MiniPreview'
diff --git a/src/components/UpupUploader/DropZone.tsx b/src/components/UpupUploader/DropZone.tsx
index 2e592bff..178c1b00 100644
--- a/src/components/UpupUploader/DropZone.tsx
+++ b/src/components/UpupUploader/DropZone.tsx
@@ -1,13 +1,14 @@
 import { motion } from 'framer-motion'
-import { checkFileType } from 'lib'
 import { Dispatch, FC, SetStateAction } from 'react'
 import { TbUpload } from 'react-icons/tb'
+import { BaseConfigs } from 'types'
 
 type Props = {
     setFiles: Dispatch<SetStateAction<File[]>>
     setIsDragging: Dispatch<SetStateAction<boolean>>
     multiple?: boolean
     accept?: string
+    baseConfigs?: BaseConfigs
 }
 
 const DropZone: FC<Props> = ({
@@ -15,6 +16,7 @@ const DropZone: FC<Props> = ({
     setIsDragging,
     multiple,
     accept = '*',
+    baseConfigs,
 }: Props) => {
     return (
         <motion.div
@@ -26,49 +28,49 @@ const DropZone: FC<Props> = ({
                 e.preventDefault()
                 setIsDragging(true)
                 e.dataTransfer.dropEffect = 'copy'
+
+                const files = Array.from(e.dataTransfer.files)
+                baseConfigs?.onFileDragOver?.(files)
+            }}
+            onDragLeave={e => {
+                e.preventDefault()
+                setIsDragging(false)
+
+                const files = Array.from(e.dataTransfer.files)
+                baseConfigs?.onFileDragLeave?.(files)
+            }}
+            onDrop={e => {
+                e.preventDefault()
+                const files = Array.from(e.dataTransfer.files)
+                setFiles(prev => (multiple ? [...prev, ...files] : [files[0]]))
+                setIsDragging(false)
+                baseConfigs?.onFileDrop?.(files)
             }}
         >
-            <div className="flex h-full w-full flex-col items-center justify-center gap-2 rounded-md border border-dashed border-current text-4xl">
+            <div
+                className={`flex h-full w-full flex-col items-center justify-center gap-2 rounded-md border border-dashed border-current
+                    ${!multiple ? 'text-center text-xl' : 'text-4xl'}`}
+            >
                 <i className="rounded-full border-2 border-current p-3">
                     <TbUpload />
                 </i>
-                <p className="text-xl">Drop your files here</p>
+                <p className={`${!multiple ? 'text-xl' : 'text-lg'}`}>
+                    Drop your files here
+                </p>
             </div>
             <input
                 type="file"
                 accept={accept}
                 className="absolute top-0 h-full w-full opacity-0"
-                multiple
+                multiple={multiple}
                 onChange={e => {
-                    const acceptedFiles = Array.from(
-                        e.target.files as FileList,
-                    ).filter(file => checkFileType(file, accept))
-
                     setFiles(prev =>
                         multiple
-                            ? [...prev, ...acceptedFiles]
-                            : // only one file
-                              [acceptedFiles[0]],
+                            ? [...prev, ...Array.from(e.target.files || [])]
+                            : [e.target.files![0]],
                     )
-
-                    setIsDragging(false)
-
-                    // reset input
-                    e.target.value = ''
-                }}
-                onDrop={e => {
-                    e.preventDefault()
-                    setFiles(prev => {
-                        const acceptedFiles = Array.from(
-                            e.dataTransfer.files,
-                        ).filter(file => checkFileType(file, accept))
-
-                        return multiple
-                            ? [...prev, ...acceptedFiles]
-                            : // only one file
-                              [acceptedFiles[0]]
-                    })
                     setIsDragging(false)
+                    e.target.value = '' // Reset input
                 }}
             />
         </motion.div>
diff --git a/src/components/UpupUploader/MethodSelector.tsx b/src/components/UpupUploader/MethodSelector.tsx
index cfed3065..9724e99f 100644
--- a/src/components/UpupUploader/MethodSelector.tsx
+++ b/src/components/UpupUploader/MethodSelector.tsx
@@ -1,13 +1,25 @@
 import { FC, MutableRefObject } from 'react'
-import type { Method } from 'types'
+import type { BaseConfigs, Method } from 'types'
 
 type Props = {
     setView: (view: string) => void
     inputRef?: MutableRefObject<HTMLInputElement | null>
     methods: Method[]
+    baseConfigs?: BaseConfigs
 }
 
-const MethodsSelector: FC<Props> = ({ setView, inputRef, methods }: Props) => {
+const MethodsSelector: FC<Props> = ({
+    setView,
+    inputRef,
+    methods,
+    baseConfigs,
+}: Props) => {
+    const handleMethodClick = (methodId: string) => {
+        baseConfigs?.onIntegrationClick?.(methodId)
+        if (methodId === 'INTERNAL') inputRef && inputRef?.current?.click()
+        else setView(methodId)
+    }
+
     return (
         <div className="flex h-full w-full flex-col items-center justify-center gap-6">
             <h1 className="text-center dark:text-white md:text-2xl">
@@ -31,11 +43,7 @@ const MethodsSelector: FC<Props> = ({ setView, inputRef, methods }: Props) => {
                         onKeyDown={e => {
                             if (e.key === 'Enter') e.preventDefault()
                         }}
-                        onClick={() =>
-                            method.id === 'INTERNAL'
-                                ? inputRef && inputRef.current!.click()
-                                : setView(method.id)
-                        }
+                        onClick={() => handleMethodClick(method.id)}
                     >
                         <span className="rounded-lg bg-white p-[6px] text-2xl shadow dark:bg-[#323232]">
                             {method.icon}
diff --git a/src/components/UpupUploader/Preview.tsx b/src/components/UpupUploader/Preview.tsx
index c049d2f0..05bcd170 100644
--- a/src/components/UpupUploader/Preview.tsx
+++ b/src/components/UpupUploader/Preview.tsx
@@ -2,7 +2,8 @@ import Box from '@mui/material/Box'
 import { LinearProgressBar } from 'components'
 import PreviewComponent from 'components/UpupUploader/PreviewComponent'
 import { AnimatePresence, motion } from 'framer-motion'
-import { FC, memo } from 'react'
+import { FC, memo, useCallback } from 'react'
+import { BaseConfigs } from 'types'
 import { FileHandlerProps, FileWithId } from 'types/file'
 import { v4 as uuidv4 } from 'uuid'
 
@@ -13,6 +14,8 @@ type Props = {
     onFileClick?: (file: FileWithId) => void
     progress: number
     limit?: number
+    handleFileRemove: (file: FileWithId) => void
+    onCancelUpload: BaseConfigs['onCancelUpload']
 } & FileHandlerProps
 
 const Preview: FC<Props> = ({
@@ -24,7 +27,16 @@ const Preview: FC<Props> = ({
     onFileClick,
     progress,
     limit,
+    handleFileRemove,
+    onCancelUpload,
 }: Props) => {
+    const handleCancel = useCallback(() => {
+        if (files.length > 0) {
+            onCancelUpload?.(files)
+            setFiles([])
+        }
+    }, [files, setFiles, onCancelUpload])
+
     return (
         <AnimatePresence>
             {files.length > 0 && (
@@ -37,7 +49,7 @@ const Preview: FC<Props> = ({
                     >
                         <button
                             className="rounded-md p-2 px-4 transition-all duration-300 hover:bg-[#e9ecef] hover:text-[#1f1f1f] active:bg-[#dfe6f1]"
-                            onClick={() => setFiles([])}
+                            onClick={handleCancel}
                             type="button"
                         >
                             Cancel
@@ -85,6 +97,7 @@ const Preview: FC<Props> = ({
                                 index={files.indexOf(file)}
                                 onClick={() => onFileClick?.(file)}
                                 multiple
+                                handleFileRemove={handleFileRemove}
                             />
                         ))}
                     </motion.div>
diff --git a/src/components/UpupUploader/PreviewComponent.tsx b/src/components/UpupUploader/PreviewComponent.tsx
index 834e1a1c..0c57329d 100644
--- a/src/components/UpupUploader/PreviewComponent.tsx
+++ b/src/components/UpupUploader/PreviewComponent.tsx
@@ -17,11 +17,20 @@ type Props = {
     mini?: boolean
     file: FileWithId
     index: number
+    handleFileRemove: (file: FileWithId) => void
 } & HTMLAttributes<HTMLDivElement>
 
 export default memo(
     forwardRef<HTMLDivElement, Props>(function PreviewComponent(
-        { setFiles, multiple, mini, file, index, ...restProps }: Props,
+        {
+            setFiles,
+            multiple,
+            mini,
+            file,
+            index,
+            handleFileRemove,
+            ...restProps
+        }: Props,
         ref,
     ) {
         const objectUrls = useRef<string[]>([])
@@ -40,13 +49,10 @@ export default memo(
             return url
         }, [file])
 
-        const removeFile = () =>
-            setFiles(prev => [...prev.filter((_, i) => i !== index)])
-
         return (
             <div
                 ref={ref}
-                className="relative flex h-full w-full flex-col items-start dark:bg-[#1f1f1f] dark:text-[#fafafa]"
+                className="relative flex h-full max-h-fit w-full flex-col items-start dark:bg-[#1f1f1f] dark:text-[#fafafa]"
                 {...restProps}
             >
                 <div
@@ -76,7 +82,7 @@ export default memo(
                 )}
                 <button
                     className="absolute -right-1 -top-1 z-10 rounded-full bg-black p-0.5"
-                    onClick={removeFile}
+                    onClick={() => handleFileRemove(file)}
                     type="button"
                 >
                     <TbX className="h-4 w-4 text-white" />
diff --git a/src/hooks/useProgress.ts b/src/hooks/useProgress.ts
index 90443a13..41951909 100644
--- a/src/hooks/useProgress.ts
+++ b/src/hooks/useProgress.ts
@@ -1,38 +1,77 @@
 import { XhrHttpHandler } from '@aws-sdk/xhr-http-handler'
 import { useCallback, useEffect, useState } from 'react'
+import { BaseConfigs } from 'types'
 
-const useProgress = (files: File[]) => {
+const useProgress = (files: File[], baseConfigs?: BaseConfigs) => {
     const [progress, setProgress] = useState(0)
-    const [handler] = useState(new XhrHttpHandler({}) as any)
-    useEffect(() => {
-        if (progress === 100) {
-            handler.off(
-                XhrHttpHandler.EVENTS.UPLOAD_PROGRESS,
-                handleUploadProgress,
+    const [completedFiles, setCompletedFiles] = useState(0)
+    const [handler] = useState(() => {
+        const h = new XhrHttpHandler({}) as any
+
+        // Add abort event listener to the handler
+        h.on('abort', () => {
+            setProgress(0)
+            setCompletedFiles(0)
+            files.forEach(file => {
+                baseConfigs?.onFileUploadFail?.(
+                    file,
+                    new Error('Upload cancelled'),
+                )
+            })
+        })
+
+        return h
+    })
+
+    const handleUploadProgress = useCallback(
+        (xhr: ProgressEvent) => {
+            const currentFileProgress = Math.round(
+                (xhr.loaded / xhr.total) * 100,
             )
-        }
-    }, [progress, files])
+            setProgress(currentFileProgress)
+
+            // Call individual file progress
+            files.forEach(file => {
+                baseConfigs?.onFileProgress?.(file, currentFileProgress)
+            })
 
-    const handleUploadProgress = useCallback((xhr: ProgressEvent) => {
-        setProgress(Math.round((xhr.loaded / xhr.total) * 100))
-    }, [])
+            // Calculate and report total progress
+            if (currentFileProgress === 100) {
+                setCompletedFiles(prev => {
+                    const newCompleted = prev + 1
+                    const totalProgress = Math.round(
+                        (newCompleted / files.length) * 100,
+                    )
+                    baseConfigs?.onTotalUploadProgress?.(
+                        totalProgress,
+                        newCompleted,
+                        files.length,
+                    )
+                    return newCompleted
+                })
+            }
+        },
+        [files, baseConfigs],
+    )
 
     useEffect(() => {
         handler.on(XhrHttpHandler.EVENTS.UPLOAD_PROGRESS, handleUploadProgress)
 
-        // Cleanup function to remove the event listener when component unmounts
         return () => {
             handler.off(
                 XhrHttpHandler.EVENTS.UPLOAD_PROGRESS,
                 handleUploadProgress,
             )
+            handler.off('abort') // Clean up abort listener
             setProgress(0)
+            setCompletedFiles(0)
         }
-    }, [files])
+    }, [files, handleUploadProgress, handler])
 
     return {
         progress,
         handler,
+        completedFiles,
     }
 }
 
diff --git a/src/lib/checkFileType.ts b/src/lib/checkFileType.ts
index cfa230a0..11781c2b 100644
--- a/src/lib/checkFileType.ts
+++ b/src/lib/checkFileType.ts
@@ -1,20 +1,28 @@
-export function checkFileType(file: File, acceptedFiles: string) {
+import { BaseConfigs } from '../types/BaseConfigs'
+
+export function checkFileType(
+    file: File,
+    acceptedFiles: string,
+    onFileTypeMismatch?: BaseConfigs['onFileTypeMismatch'],
+) {
     if (file && acceptedFiles && acceptedFiles !== '*') {
-        const acceptedFilesArray = Array.isArray(acceptedFiles)
-            ? acceptedFiles
-            : acceptedFiles.split(',')
+        const acceptedFilesArray = acceptedFiles.split(',')
         const { name: fileName, type: mimeType } = file
         const baseMimeType = mimeType.replace(/\/.*$/, '')
         const extension = mimeType.split('/')[1]
 
-        return (
+        const isAccepted =
             acceptedFilesArray.includes(extension) ||
             acceptedFilesArray.includes(mimeType) ||
             acceptedFilesArray.includes(`${baseMimeType}/*`) ||
             acceptedFilesArray.some(
                 type => type.startsWith('.') && fileName.endsWith(type),
             )
-        )
+
+        if (!isAccepted && onFileTypeMismatch)
+            onFileTypeMismatch(file, acceptedFiles)
+
+        return isAccepted
     }
     return true
 }
diff --git a/src/lib/uploadObject.ts b/src/lib/uploadObject.ts
index cac1a2e3..59c3fe2e 100644
--- a/src/lib/uploadObject.ts
+++ b/src/lib/uploadObject.ts
@@ -1,5 +1,4 @@
-import { PutObjectCommand } from '@aws-sdk/client-s3'
-import { PutObjectRequest } from '@aws-sdk/client-s3/dist-types/models/models_0'
+import { PutObjectCommand, PutObjectRequest } from '@aws-sdk/client-s3'
 import { S3ClientWithSend } from './getClient'
 
 type props = {
diff --git a/src/types/BaseConfigs.ts b/src/types/BaseConfigs.ts
index cf2ae256..6e55eced 100644
--- a/src/types/BaseConfigs.ts
+++ b/src/types/BaseConfigs.ts
@@ -12,4 +12,21 @@ export type BaseConfigs = {
         unit?: 'B' | 'KB' | 'MB' | 'GB' | 'TB' | 'PB' | 'EB' | 'ZB' | 'YB'
     }
     customMessage?: string
+    onIntegrationClick?: (integrationType: string) => void
+    onFileUploadStart?: (file: File) => void
+    onFileUploadComplete?: (file: File, key: string) => void
+    onAllUploadsComplete?: (keys: string[]) => void
+    onFileUploadFail?: (file: File, error: Error) => void
+    onFileProgress?: (file: File, progress: number) => void
+    onTotalUploadProgress?: (
+        progress: number,
+        completedFiles: number,
+        totalFiles: number,
+    ) => void
+    onFileRemove?: (file: File) => void
+    onFileDragOver?: (files: File[]) => void
+    onFileDragLeave?: (files: File[]) => void
+    onFileDrop?: (files: File[]) => void
+    onFileTypeMismatch?: (file: File, acceptedTypes: string) => void
+    onCancelUpload?: (files: File[]) => void
 }
diff --git a/src/version.ts b/src/version.ts
index 9f8d6e47..8a54bedb 100644
--- a/src/version.ts
+++ b/src/version.ts
@@ -1 +1 @@
-export const LIB_VERSION = "2.3.6";
+export const LIB_VERSION = "2.4.0";
diff --git a/stories/Uploader.stories.tsx b/stories/Uploader.stories.tsx
index 0c8b3007..69df44b3 100644
--- a/stories/Uploader.stories.tsx
+++ b/stories/Uploader.stories.tsx
@@ -8,8 +8,6 @@ import {
     UpupUploader,
 } from '../src'
 import { useUpup } from '../src/hooks'
-// import react only on this file to avoid error
-// we get an error because we're not exporting UpupUploader as default
 
 const meta: Meta<typeof UpupUploader> = {
     title: 'Uploader',
@@ -20,16 +18,86 @@ export default meta
 
 const Uploader = args => {
     const [files, setFiles] = useState<File[]>([])
+    const [uploadStatus, setUploadStatus] = useState<string>('')
+
+    // Configure all the event handlers
+    const eventHandlers = {
+        onFileClick: file => {
+            console.log('File clicked:', file)
+        },
+        onFilesChange: files => {
+            console.log('Files changed:', files)
+            return files
+        },
+        onIntegrationClick: (integrationType: string) => {
+            setUploadStatus(`Selected integration: ${integrationType}`)
+            console.log('Integration clicked:', integrationType)
+        },
+        onFileUploadStart: (file: File) => {
+            setUploadStatus(`Starting upload: ${file.name}`)
+            console.log('Upload started:', file)
+        },
+        onFileUploadComplete: (file: File, key: string) => {
+            setUploadStatus(`Completed upload: ${file.name}`)
+            console.log('Upload completed:', { file, key })
+        },
+        onAllUploadsComplete: (keys: string[]) => {
+            setUploadStatus('All uploads completed!')
+            console.log('All uploads completed:', keys)
+        },
+        onFileUploadFail: (file: File, error: Error) => {
+            setUploadStatus(`Upload failed: ${file.name} - ${error.message}`)
+            console.error('Upload failed:', { file, error })
+        },
+        onFileProgress: (file: File, progress: number) => {
+            setUploadStatus(`File progress - ${file.name}: ${progress}%`)
+            console.log('File progress:', { file, progress })
+        },
+        onTotalUploadProgress: (
+            progress: number,
+            completed: number,
+            total: number,
+        ) => {
+            setUploadStatus(
+                `Overall progress: ${progress}% (${completed}/${total} files)`,
+            )
+            console.log('Total progress:', {
+                progress,
+                completedFiles: completed,
+                totalFiles: total,
+            })
+        },
+        onFileRemove: (file: File) => {
+            setUploadStatus(`Removed file: ${file.name}`)
+            console.log('File removed:', file)
+        },
+        onFileDragOver: (files: File[]) => {
+            const fileNames = files.map(file => file.name).join(', ')
+            setUploadStatus(`Hovering over dropzone: ${fileNames}`)
+            console.log('Hovering over dropzone', files)
+        },
+        onFileDragLeave: (files: File[]) => {
+            const fileNames = files.map(file => file.name).join(', ')
+            setUploadStatus(`Left drop zone: ${fileNames}`)
+            console.log('Left drop zone', files)
+        },
+        onFileDrop: (files: File[]) => {
+            const fileNames = files.map(file => file.name).join(', ')
+            setUploadStatus(`Dropped files: ${fileNames}`)
+            console.log('Dropped files', files)
+        },
+    }
+
     const { baseConfigs, cloudStorageConfigs, googleConfigs, oneDriveConfigs } =
         useUpup({
             setFiles: setFiles,
             accept: '*',
             multiple: true,
             limit: 5,
-            onFileClick: file => void 0,
-            onFilesChange: files => files,
+            ...eventHandlers, // Add all our new event handlers
             ...args,
         })
+
     const uploadAdapters: UPLOAD_ADAPTER[] = [
         UploadAdapter.INTERNAL,
         UploadAdapter.GOOGLE_DRIVE,
@@ -42,17 +110,30 @@ const Uploader = args => {
 
     const handleUpload = async () => {
         try {
+            setUploadStatus('Starting upload process...')
             const data = await upupRef.current?.uploadFiles()
+            setUploadStatus(
+                data ? 'Upload successful!' : 'Upload returned null',
+            )
         } catch (error) {
+            setUploadStatus(`Upload error: ${error.message}`)
             console.error('Error uploading files:', error)
         }
     }
+
     const handleDynamicUpload = async () => {
         try {
+            setUploadStatus('Starting dynamic upload...')
             const testFiles: any[] = []
             testFiles.push(files[0])
             const data = await upupRef.current?.dynamicUploadFiles(testFiles)
+            setUploadStatus(
+                data
+                    ? 'Dynamic upload successful!'
+                    : 'Dynamic upload returned null',
+            )
         } catch (error) {
+            setUploadStatus(`Dynamic upload error: ${error.message}`)
             console.error('Error uploading files:', error)
         }
     }
@@ -60,7 +141,15 @@ const Uploader = args => {
     const loader = <CircularProgress size={100} />
 
     return (
-        <>
+        <div className="space-y-4">
+            {/* Status Display */}
+            <div className="rounded-md bg-gray-100 p-4 dark:bg-gray-800">
+                <h3 className="text-sm font-medium">Upload Status:</h3>
+                <p className="text-sm text-gray-600 dark:text-gray-300">
+                    {uploadStatus}
+                </p>
+            </div>
+
             <UpupUploader
                 {...args}
                 baseConfigs={baseConfigs}
@@ -71,16 +160,22 @@ const Uploader = args => {
                 loader={loader}
                 ref={upupRef}
             />
-            <button className="border-2 border-red-100" onClick={handleUpload}>
-                Upload
-            </button>
-            <button
-                className="ml-3 border-2 border-red-100"
-                onClick={handleDynamicUpload}
-            >
-                Dynamic Upload
-            </button>
-        </>
+
+            <div className="flex gap-3">
+                <button
+                    className="rounded-md border-2 border-red-100 px-4 py-2 hover:bg-red-50 dark:hover:bg-red-900"
+                    onClick={handleUpload}
+                >
+                    Upload
+                </button>
+                <button
+                    className="rounded-md border-2 border-red-100 px-4 py-2 hover:bg-red-50 dark:hover:bg-red-900"
+                    onClick={handleDynamicUpload}
+                >
+                    Dynamic Upload
+                </button>
+            </div>
+        </div>
     )
 }