diff --git a/src/components/demo-components/dropzone-demo/CodeDemoDropzoneCustomValidation.jsx b/src/components/demo-components/dropzone-demo/CodeDemoDropzoneCustomValidation.jsx
index 9859cafec13e23217de6d94c745bdf3ac0a1a258..4f87e1cd073b6c9af9237f24e355b3ccf10142a6 100644
--- a/src/components/demo-components/dropzone-demo/CodeDemoDropzoneCustomValidation.jsx
+++ b/src/components/demo-components/dropzone-demo/CodeDemoDropzoneCustomValidation.jsx
@@ -14,34 +14,8 @@ const CodeDemoDropzoneCustomValidation = ({ splittedOnly = false }) => {
 };
 export default CodeDemoDropzoneCustomValidation;
 
-const splittedCodeJS = `<Dropzone
-    onChange={updateFiles}
-    value={files}
-    accept={"image/*"}
-    maxFileSize={28 * 1024}
-    maxFiles={2}
-    cleanFiles
-    validator={myOwnValidation}
-  >
-  {files.length > 0 &&
-    files.map((file) => (
-      <FileMosaic key={file.id} {...file} onDelete={removeFile} info />
-    ))}
-</Dropzone>`;
-const splittedCodeTS = `<Dropzone
-    onChange={updateFiles}
-    value={files}
-    accept={"image/*"}
-    maxFileSize={28 * 1024}
-    maxFiles={2}
-    cleanFiles
-    validator={myOwnValidation}
-  >
-  {files.length > 0 &&
-    files.map((file: ExtFile) => (
-      <FileMosaic key={file.id} {...file} onDelete={removeFile} info />
-    ))}
-</Dropzone>`;
+const splittedCodeJS = ``;
+const splittedCodeTS = ``;
 const completeCodeJS = `import { Dropzone, FileMosaic } from "@files-ui/react";
 import * as React from "react";
 //validate files
@@ -50,7 +24,7 @@ import * as React from "react";
 const myOwnValidation = (file) => {
   let errorList= [];
   let validResult = true;
-  const regExPrefix = /\btest_file\w+/;
+  const regExPrefix = /\\btest_file\\w+/;
   if (!file.name.match(regExPrefix)) {
     validResult = false;
     errorList.push('Prefix "test_file" was not present in the file name');
diff --git a/src/components/demo-components/dropzone-demo/CodeDemoDropzoneUploading.jsx b/src/components/demo-components/dropzone-demo/CodeDemoDropzoneUploading.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..ce53cfa9e72b2220744e097348b8ff6c51c59a9f
--- /dev/null
+++ b/src/components/demo-components/dropzone-demo/CodeDemoDropzoneUploading.jsx
@@ -0,0 +1,141 @@
+import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
+const CodeDemoDropzoneUploading = ({ splittedOnly = false }) => {
+  return (
+    <ShowDemoCode
+      splittedOnly={splittedOnly}
+      codeCompleteJS={completeCodeJS}
+      codeCompleteTS={completeCodeTS}
+      codeSandboxJS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
+      codeSandboxTS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
+      codeSplittedJS={splittedCodeJS}
+      codeSplittedTS={splittedCodeTS}
+    />
+  );
+};
+export default CodeDemoDropzoneUploading;
+
+const splittedCodeJS = `<Dropzone
+    onChange={updateFiles}
+    value={files}
+    accept={"image/*"}
+    maxFileSize={28 * 1024*1024}
+    maxFiles={2}
+    actionButtons={{ position: "bottom", uploadButton: {}, abortButton: {} }}
+    uploadConfig={{
+        url: "https://www.myawsomeserver.com/upload",
+        method: "POST",
+        headers: {
+            Authorization:
+            "bearer HTIBI/IBYG/&GU&/GV%&G/&IC%&V/Ibi76bfh8g67gg68g67i6g7G&58768&/(&/(FR&G/&H%&/",
+        },
+        cleanOnUpload: true,
+    }}
+    fakeUpload
+>
+  {files.length > 0 &&
+    files.map((file) => (
+      <FileMosaic key={file.id} {...file} onDelete={removeFile} info/>
+    ))}
+</Dropzone>`;
+const splittedCodeTS = `<Dropzone
+    onChange={updateFiles}
+    value={files}
+    accept={"image/*"}
+    maxFileSize={28 * 1024*1024}
+    maxFiles={2}
+    actionButtons={{ position: "bottom", uploadButton: {}, abortButton: {} }}
+    uploadConfig={{
+        url: "https://www.myawsomeserver.com/upload",
+        method: "POST",
+        headers: {
+            Authorization:
+            "bearer HTIBI/IBYG/&GU&/GV%&G/&IC%&V/Ibi76bfh8g67gg68g67i6g7G&58768&/(&/(FR&G/&H%&/",
+        },
+        cleanOnUpload: true,
+    }}
+    fakeUpload
+>
+  {files.length > 0 &&
+    files.map((file: ExtFile) => (
+      <FileMosaic key={file.id} {...file} onDelete={removeFile} info/>
+    ))}
+</Dropzone>`;
+const completeCodeJS = `import { Dropzone,FileMosaic } from "@files-ui/react";
+import * as React from "react";
+
+export default function App() {
+  const [files, setFiles] = React.useState([]);
+  const updateFiles = (incommingFiles) => {
+    //do something with the files
+    setFiles(incommingFiles);
+    //even your own upload implementation
+  };
+  const removeFile = (id) => {
+    setFiles(files.filter((x) => x.id !== id));
+  };
+  return (
+    <Dropzone
+        onChange={updateFiles}
+        value={files}
+        accept={"image/*"}
+        maxFileSize={28 * 1024*1024}
+        maxFiles={2}
+        actionButtons={{ position: "bottom", uploadButton: {}, abortButton: {} }}
+        uploadConfig={{
+            url: "https://www.myawsomeserver.com/upload",
+            method: "POST",
+            headers: {
+                Authorization:
+                "bearer HTIBI/IBYG/&GU&/GV%&G/&IC%&V/Ibi76bfh8g67gg68g67i6g7G&58768&/(&/(FR&G/&H%&/",
+            },
+            cleanOnUpload: true,
+        }}
+        fakeUpload
+    >
+      {files.length > 0 &&
+        files.map((file) => (
+          <FileMosaic key={file.id} {...file} onDelete={removeFile} info />
+        ))}
+    </Dropzone>
+  );
+}`;
+
+const completeCodeTS = `import { Dropzone, FileMosaic, ExtFile } from "@files-ui/react";
+import * as React from "react";
+
+export default function App() {
+  const [files, setFiles] = React.useState<ExtFile[]>([]);
+  const updateFiles = (incommingFiles:ExtFile[]) => {
+    //do something with the files
+    setFiles(incommingFiles);
+    //even your own upload implementation
+  };
+  const removeFile = (id: string | number | undefined) => {
+    setFiles(files.filter((x: ExtFile) => x.id !== id));
+  };
+  return (
+    <Dropzone
+        onChange={updateFiles}
+        value={files}
+        accept={"image/*"}
+        maxFileSize={28 * 1024*1024}
+        maxFiles={2}
+        actionButtons={{ position: "bottom", uploadButton: {}, abortButton: {} }}
+        uploadConfig={{
+            url: "https://www.myawsomeserver.com/upload",
+            method: "POST",
+            headers: {
+                Authorization:
+                "bearer HTIBI/IBYG/&GU&/GV%&G/&IC%&V/Ibi76bfh8g67gg68g67i6g7G&58768&/(&/(FR&G/&H%&/",
+            },
+            cleanOnUpload: true,
+        }}
+        fakeUpload
+    >
+      {files.length > 0 &&
+        files.map((file:ExtFile) => (
+          <FileMosaic key={file.id} {...file} onDelete={removeFile} info />
+        ))}
+    </Dropzone>
+  );
+}`;
diff --git a/src/components/demo-components/dropzone-demo/DemoDropzoneUploading.jsx b/src/components/demo-components/dropzone-demo/DemoDropzoneUploading.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..47757694c38db7e4f50d05aa3217d6bafdb69bd0
--- /dev/null
+++ b/src/components/demo-components/dropzone-demo/DemoDropzoneUploading.jsx
@@ -0,0 +1,40 @@
+import * as React from "react";
+import { Dropzone, FileMosaic } from "../../../files-ui";
+
+const DemoDropzoneUploading = (props) => {
+  const [files, setFiles] = React.useState([]);
+  const updateFiles = (incommingFiles) => {
+    //do something with the files
+    setFiles(incommingFiles);
+    //even your own upload implementation
+  };
+  const removeFile = (id) => {
+    setFiles(files.filter((x) => x.id !== id));
+  };
+  return (
+    <Dropzone
+      onChange={updateFiles}
+      value={files}
+      accept={"image/*"}
+      maxFileSize={28 * 1024*1024}
+      maxFiles={2}
+      actionButtons={{ position: "bottom", uploadButton: {}, abortButton: {} }}
+      uploadConfig={{
+        url: "https://www.myawsomeserver.com/upload",
+        method: "POST",
+        headers: {
+          Authorization:
+            "bearer HTIBI/IBYG/&GU&/GV%&G/&IC%&V/Ibi76bfh8g67gg68g67i6g7G&58768&/(&/(FR&G/&H%&/",
+        },
+        cleanOnUpload: true,
+      }}
+      fakeUpload
+    >
+      {files.length > 0 &&
+        files.map((file) => (
+          <FileMosaic key={file.id} {...file} onDelete={removeFile} info />
+        ))}
+    </Dropzone>
+  );
+};
+export default DemoDropzoneUploading;
diff --git a/src/pages/demo/DropzoneDemoPage.jsx b/src/pages/demo/DropzoneDemoPage.jsx
index 6914d4a705d25a9d700cefab8bf9163b0f348559..752f3223f9148bb6a8ab8c7d6b082ec5619f6668 100644
--- a/src/pages/demo/DropzoneDemoPage.jsx
+++ b/src/pages/demo/DropzoneDemoPage.jsx
@@ -5,8 +5,10 @@ import DescParagraph from "../../components/demo-components/desc-paragraph/DescP
 import BasicDropzoneCodeJS from "../../components/demo-components/dropzone-demo/BasicDropzoneCodeJS";
 import BasicDemoDropzone from "../../components/demo-components/dropzone-demo/BasicDropzoneDemo";
 import CodeDemoDropzoneCustomValidation from "../../components/demo-components/dropzone-demo/CodeDemoDropzoneCustomValidation";
+import CodeDemoDropzoneUploading from "../../components/demo-components/dropzone-demo/CodeDemoDropzoneUploading";
 import CodeDemoDropzoneValidation from "../../components/demo-components/dropzone-demo/CodeDemoDropzoneValidation";
 import DemoDropzoneCustomValidation from "../../components/demo-components/dropzone-demo/DemoDropzoneCustomValidation";
+import DemoDropzoneUploading from "../../components/demo-components/dropzone-demo/DemoDropzoneUploading";
 import DemoDropzoneValidation from "../../components/demo-components/dropzone-demo/DemoDropzoneValidation";
 import SubTitle from "../../components/demo-components/sub-title/SubTitle";
 import MainContentContainer from "../../components/layout-pages/MainContentContainer";
@@ -192,13 +194,54 @@ const DropzoneDemoPage = (props) => {
             <TypeHighlight>maxFileSize</TypeHighlight> and{" "}
             <TypeHighlight>maxFiles</TypeHighlight> props.
           </DescParagraph>
-
           <Paper variant="outlined" style={{ padding: "25px" }}>
             <DemoDropzoneCustomValidation />
           </Paper>
-
           <CodeDemoDropzoneCustomValidation />
         </section>
+
+        <section id="uploading">
+          <SubTitle content="Uploading" />
+          <DescParagraph>
+            For uploading the prop{" "}
+            <AnchorToTab href="/types#UploadConfig">uploadConfig</AnchorToTab>{" "}
+            must be given. In this prop you can specify the method, the url,
+            headers and also extra upload data. The type definition for the prop
+            mmentioned can be found{" "}
+            <AnchorToTab href="/types#UploadConfig">here</AnchorToTab>.
+          </DescParagraph>
+
+         
+          <Paper variant="outlined" style={{ padding: "25px" }}>
+            <DemoDropzoneUploading />
+          </Paper>
+
+          <CodeDemoDropzoneUploading />
+          <Alert severity="info">
+            <AlertTitle> Removing non valid Files </AlertTitle>
+            We call "clean" to the operation of removing non valid files. Apart
+            from deleting them individually, there are some other ways in which
+            you can remove all of them. You can try the following props in the{" "}
+            {"<Dropzone/>"} component:
+            <ul>
+              <li>
+                <TypeHighlight>cleanFiles</TypeHighlight> : This will make
+                dropzone header to dislay the "clean" icon which can trigger the
+                "clean" operation.
+              </li>
+              <li>
+                <TypeHighlight>actionButtons</TypeHighlight> : By setting this
+                prop properly, a button will be visible and will trigger the
+                "clean" operation (This is the way used in this demo).
+              </li>
+              <li>
+                <TypeHighlight>autoClean</TypeHighlight> : By setting this prop,
+                non valid files will be automatically discarted and will not be
+                given in the <CodeHighlight>onChange</CodeHighlight> event.
+              </li>
+            </ul>
+          </Alert>
+        </section>
         {/* 
       <section id="dropzone-events">
         <SubTitle content="Dropzone events" />