diff --git a/src/components/demo-components/dropzone-demo/BasicDropzoneCodeJS.jsx b/src/components/demo-components/dropzone-demo/BasicDropzoneCodeJS.jsx
index b2da92a5ff0372fd480735eb73b7d588b9c3f3c8..8de8378c08e8d7c284cc5714702c5db0d9fd2f4c 100644
--- a/src/components/demo-components/dropzone-demo/BasicDropzoneCodeJS.jsx
+++ b/src/components/demo-components/dropzone-demo/BasicDropzoneCodeJS.jsx
@@ -47,7 +47,6 @@ export default function BasicDemoDropzone() {
};
return (
<Dropzone
- style={{ minWidth: "505px" }}
onChange={updateFiles}
value={files}
>
@@ -74,7 +73,6 @@ export default function BasicDemoDropzone() {
};
return (
<Dropzone
- style={{ minWidth: "505px" }}
onChange={updateFiles}
value={files}
>
diff --git a/src/components/demo-components/dropzone-demo/BasicDropzoneDemo.jsx b/src/components/demo-components/dropzone-demo/BasicDropzoneDemo.jsx
index b5398a405ee776a870bfee9a3c5f65cb0af84c03..29bd9d13c7c74843ce757b2c85f0a6f2f56bb05a 100644
--- a/src/components/demo-components/dropzone-demo/BasicDropzoneDemo.jsx
+++ b/src/components/demo-components/dropzone-demo/BasicDropzoneDemo.jsx
@@ -1,5 +1,4 @@
-import { Dropzone } from "../../../files-ui";
-import { FileMosaic } from "../../../files-ui/components/file-mosaic";
+import { Dropzone, FileMosaic } from "../../../files-ui";
import * as React from "react";
export default function BasicDemoDropzone() {
const [files, setFiles] = React.useState([]);
diff --git a/src/components/demo-components/dropzone-demo/CodeDemoDropzoneValidation.jsx b/src/components/demo-components/dropzone-demo/CodeDemoDropzoneValidation.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..358fc77154953491638518771eb7cb994818880a
--- /dev/null
+++ b/src/components/demo-components/dropzone-demo/CodeDemoDropzoneValidation.jsx
@@ -0,0 +1,105 @@
+import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
+const CodeDemoDropzoneValidation = ({ 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 CodeDemoDropzoneValidation;
+
+const splittedCodeJS = `<Dropzone
+ onChange={updateFiles}
+ value={files}
+ accept="image/*"
+ maxFileSize={28 * 1024}
+ maxFiles={2}
+ //cleanFiles
+ actionButtons={{ position: "bottom", cleanButton: {} }}
+>
+ {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
+ actionButtons={{ position: "bottom", cleanButton: {} }}
+>
+ {files.length > 0 &&
+ files.map((file: ExtFile) => (
+ <FileMosaic key={file.id} {...file} onDelete={removeFile} info={true}/>
+ ))}
+</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}
+ maxFiles={2}
+ //cleanFiles
+ actionButtons={{ position: "bottom", cleanButton: {} }}
+ >
+ {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}
+ maxFiles={2}
+ //cleanFiles
+ actionButtons={{ position: "bottom", cleanButton: {} }}
+ >
+ {files.length > 0 &&
+ files.map((file:ExtFile) => (
+ <FileMosaic key={file.id} {...file} onDelete={removeFile} info={true} />
+ ))}
+ </Dropzone>
+ );
+}`;
diff --git a/src/components/demo-components/dropzone-demo/DemoDropzoneValidation.jsx b/src/components/demo-components/dropzone-demo/DemoDropzoneValidation.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..5a20526c7dd50a10894828dba55c714e70ff031f
--- /dev/null
+++ b/src/components/demo-components/dropzone-demo/DemoDropzoneValidation.jsx
@@ -0,0 +1,31 @@
+import * as React from "react";
+import { Dropzone, FileMosaic } from "../../../files-ui";
+
+const DemoDropzoneValidation = (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}
+ maxFiles={2}
+ //cleanFiles
+ actionButtons={{ position: "bottom", cleanButton: {} }}
+ >
+ {files.length > 0 &&
+ files.map((file) => (
+ <FileMosaic key={file.id} {...file} onDelete={removeFile} info />
+ ))}
+ </Dropzone>
+ );
+};
+export default DemoDropzoneValidation;
diff --git a/src/pages/demo/DropzoneDemoPage.jsx b/src/pages/demo/DropzoneDemoPage.jsx
index fac35340e431cdf13123a0a4a954a0aafb63e561..09dc60349f7fdee19419d8aeab7644315a5da671 100644
--- a/src/pages/demo/DropzoneDemoPage.jsx
+++ b/src/pages/demo/DropzoneDemoPage.jsx
@@ -1,9 +1,11 @@
-import { Paper, Alert, AlertTitle } from "@mui/material";
+import { Paper, Alert, AlertTitle } from "@mui/material";
import * as React from "react";
import CodeHighlight from "../../components/codeHighlight/CodeHighlight";
import DescParagraph from "../../components/demo-components/desc-paragraph/DescParagraph";
import BasicDropzoneCodeJS from "../../components/demo-components/dropzone-demo/BasicDropzoneCodeJS";
import BasicDemoDropzone from "../../components/demo-components/dropzone-demo/BasicDropzoneDemo";
+import CodeDemoDropzoneValidation from "../../components/demo-components/dropzone-demo/CodeDemoDropzoneValidation";
+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";
import RightMenuContainer from "../../components/layout-pages/RightMenuContainer";
@@ -11,6 +13,7 @@ import MainTitle from "../../components/main-title/MainTitle";
import MainParagraph from "../../components/paragraph-main/MainParagraph";
import RightMenu from "../../components/RightMenu/RightMenu";
import TypeHighlight from "../../components/typeHighlight/TypeHighlight";
+import AnchorToTab from "../../components/util-components/AnchorToTab";
const rightMenuItems = [
{
@@ -97,8 +100,8 @@ const DropzoneDemoPage = (props) => {
<section id="basic-dropzone">
<SubTitle content="Basic Dropzone" />
<DescParagraph>
- In this demo we set dropzone with the minimun props that allows you
- to get done fast. These props are{" "}
+ In this demo we set dropzone with the minimum props that allows you
+ to get your task done fast. These props are{" "}
<CodeHighlight>onChange</CodeHighlight> and{" "}
<CodeHighlight>value</CodeHighlight>.
</DescParagraph>
@@ -132,37 +135,60 @@ const DropzoneDemoPage = (props) => {
<section id="validation">
<SubTitle content="Validation" />
<DescParagraph>
- You can either "tell" Dropzone component to validate user files by
- providing one or more of these criteria:
+ In this demo you can see how{" "}
+ <CodeHighlight>{"<Dropzone/>"}</CodeHighlight> component covers the
+ following features when it comes to validating files.
<ol>
- <li>Accept specific file types.</li>
- <li>Accept an specific number of files.</li>
- <li>Accept an specific size (in bytes) of files.</li>
+ <li>Accepting specific file types.</li>
+ <li>Accepting an specific number of files.</li>
+ <li>Accepting an specific size (in bytes) for files.</li>
</ol>
</DescParagraph>
<Paper variant="outlined" style={{ padding: "25px" }}>
- <BasicDemoDropzone />
+ <DemoDropzoneValidation />
</Paper>
-
- <p></p>
- <BasicDropzoneCodeJS />
+ <CodeDemoDropzoneValidation />
+ <Alert severity="info">
+ <AlertTitle> Removing non valid Files </AlertTitle>
+ We call "clean" the operation of removing non valid files. Apart
+ from deleting them individually there are some other ways in wich
+ you can delete 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 automatically discarted and will not be
+ given in the <CodeHighlight>onChange</CodeHighlight> event.
+ </li>
+ </ul>
+ </Alert>
</section>
<section id="custom-validation">
<SubTitle content="Custom validation" />
<DescParagraph>
- You can also "override the Dropzone validation by giving a custom
- validation function that must fit the following signature:{" "}
+ You can also "override the Dropzone validation operation by giving a
+ custom validation function that must fit the following signature:{" "}
<CodeHighlight>
{"validator?: (f: "}
- <a href="https://developer.mozilla.org/en-US/docs/Web/API/File">
+ <AnchorToTab href="https://developer.mozilla.org/en-US/docs/Web/API/File">
File
- </a>
+ </AnchorToTab>
{") => "}
- <a href="/types#custom-validate-file-response">
+ <AnchorToTab href="/types#custom-validate-file-response">
CustomValidateFileResponse
- </a>
+ </AnchorToTab>
</CodeHighlight>
.
</DescParagraph>
@@ -171,7 +197,6 @@ const DropzoneDemoPage = (props) => {
<BasicDemoDropzone />
</Paper>
- <p></p>
<BasicDropzoneCodeJS />
</section>
{/*