[WIP]: Add custom validation demo component and sample code. Missing to finish...

[WIP]: Add custom validation demo component and sample code. Missing to finish upload demo section, add localization section that redirects to localization page. Also in uoplioading in the aler info redirecto to custom upload. Also section for outside buttons and comparison.

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');

src/components/demo-components/dropzone-demo/CodeDemoDropzoneUploading.jsx

+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>
+  );
+}`;

src/components/demo-components/dropzone-demo/DemoDropzoneUploading.jsx

+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;

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" />