diff --git a/src/components/demo-components/dropzone-demo/AdvancedDropzoneDemo.jsx b/src/components/demo-components/dropzone-demo/AdvancedDropzoneDemo.jsx
index 3ea4d20fa81f9dfc9ad11b6a1231139664b44796..f71d0c7e40c501bc7897d837e39855e8fd93b098 100644
--- a/src/components/demo-components/dropzone-demo/AdvancedDropzoneDemo.jsx
+++ b/src/components/demo-components/dropzone-demo/AdvancedDropzoneDemo.jsx
@@ -60,11 +60,21 @@ export default function AdvancedDropzoneDemo() {
     setExtFiles(
       extFiles.map((ef) => {
         if (ef.id === id) {
-          return { ...ef, uploadStatus: undefined };
+          return { ...ef, uploadStatus: "aborted" };
         } else return { ...ef };
       })
     );
   };
+  const handleCancel= (id) => {
+    // alert(id);
+     setExtFiles(
+       extFiles.map((ef) => {
+         if (ef.id === id) {
+           return { ...ef, uploadStatus: undefined };
+         } else return { ...ef };
+       })
+     );
+   };
   return (
     <>
       <Dropzone
@@ -107,6 +117,7 @@ export default function AdvancedDropzoneDemo() {
               onSee={handleSee}
               onWatch={handleWatch}
               onAbort={handleAbort}
+              onCancel={handleCancel}
               resultOnTooltip
               alwaysActive
               preview
diff --git a/src/components/demo-components/main-page/DropzoneMainPage.jsx b/src/components/demo-components/main-page/DropzoneMainPage.jsx
index c09a7cd0d6f4fdb591a5461487660a55a263fd85..2ded2ed94f5e4d4d51a33d6e2533c5483c5922cd 100644
--- a/src/components/demo-components/main-page/DropzoneMainPage.jsx
+++ b/src/components/demo-components/main-page/DropzoneMainPage.jsx
@@ -17,7 +17,7 @@ const DropzoneMainPage = ({ darkMode = false }) => {
   const [files, setFiles] = React.useState(baseFiles);
   const updateFiles = (incommingFiles) => {
     //do something with the files
-    console.log("MainPage incommingFiles",incommingFiles);
+    console.log("MainPage incommingFiles", incommingFiles);
 
     setFiles(incommingFiles);
     //even your own upload implementation
@@ -41,11 +41,12 @@ const DropzoneMainPage = ({ darkMode = false }) => {
         // minHeight="400px"
         onChange={updateFiles}
         value={files}
-        maxFileSize={28*1024}
+        maxFileSize={28 * 1024 * 10}
         maxFiles={5}
         accept=".jpg, .png, application/json, video/*"
         fakeUpload
         behaviour="add"
+        uploadConfig={{ autoUpload: true , url:"fdbd"}}
         //uploadConfig={{ autoUpload: true, url:"fdbd" }}
       >
         {files.length > 0 &&