From 79273aee5b80115eeba6755597ff8451002840e9 Mon Sep 17 00:00:00 2001
From: Jose Manuel Serrano Amaut <a20122128@pucp.pe>
Date: Tue, 14 Mar 2023 01:14:42 -0500
Subject: [PATCH] [WIP]: Add custom validation demo component and sample code
---
.../CodeDemoDropzoneCustomValidation.jsx | 62 +++++++++++++++----
.../DemoDropzoneCustomValidation.tsx | 16 +++--
src/pages/demo/DropzoneDemoPage.jsx | 34 +++++-----
3 files changed, 79 insertions(+), 33 deletions(-)
diff --git a/src/components/demo-components/dropzone-demo/CodeDemoDropzoneCustomValidation.jsx b/src/components/demo-components/dropzone-demo/CodeDemoDropzoneCustomValidation.jsx
index d173f4c..9859caf 100644
--- a/src/components/demo-components/dropzone-demo/CodeDemoDropzoneCustomValidation.jsx
+++ b/src/components/demo-components/dropzone-demo/CodeDemoDropzoneCustomValidation.jsx
@@ -15,26 +15,48 @@ const CodeDemoDropzoneCustomValidation = ({ splittedOnly = false }) => {
export default CodeDemoDropzoneCustomValidation;
const splittedCodeJS = `<Dropzone
- onChange={updateFiles}
- value={files}
->
+ 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/>
+ <FileMosaic key={file.id} {...file} onDelete={removeFile} info />
))}
</Dropzone>`;
const splittedCodeTS = `<Dropzone
- onChange={updateFiles}
- value={files}
->
+ 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={true}/>
+ <FileMosaic key={file.id} {...file} onDelete={removeFile} info />
))}
</Dropzone>`;
-const completeCodeJS = `import { Dropzone,FileMosaic } from "@files-ui/react";
+const completeCodeJS = `import { Dropzone, FileMosaic } from "@files-ui/react";
import * as React from "react";
-
+//validate files
+// file name must start with the following prefix: "test_file"
+// (e.g. a valid file name could be "test_file_photo.png")
+const myOwnValidation = (file) => {
+ let errorList= [];
+ let validResult = true;
+ const regExPrefix = /\btest_file\w+/;
+ if (!file.name.match(regExPrefix)) {
+ validResult = false;
+ errorList.push('Prefix "test_file" was not present in the file name');
+ }
+ return { valid: validResult, errors: errorList };
+};
export default function App() {
const [files, setFiles] = React.useState([]);
const updateFiles = (incommingFiles) => {
@@ -49,6 +71,8 @@ export default function App() {
<Dropzone
onChange={updateFiles}
value={files}
+ cleanFiles
+ validator={myOwnValidation}
>
{files.length > 0 &&
files.map((file) => (
@@ -58,9 +82,23 @@ export default function App() {
);
}`;
-const completeCodeTS = `import { Dropzone, FileMosaic, ExtFile } from "@files-ui/react";
+const completeCodeTS = `import { Dropzone, FileMosaic, ExtFile, CustomValidateFileResponse } from "@files-ui/react";
import * as React from "react";
+//validate files
+// file name must start with the following prefix: "test_file"
+// (e.g. a valid file name could be "test_file_photo.png")
+const myOwnValidation = (file: File): CustomValidateFileResponse => {
+ let errorList: string[] = [];
+ let validResult: boolean = true;
+ const regExPrefix: RegExp = /\btest_file\w+/;
+ if (!file.name.match(regExPrefix)) {
+ validResult = false;
+ errorList.push('Prefix "test_file" was not present in the file name');
+ }
+ return { valid: validResult, errors: errorList };
+};
+
export default function App() {
const [files, setFiles] = React.useState<ExtFile[]>([]);
const updateFiles = (incommingFiles:ExtFile[]) => {
@@ -75,6 +113,8 @@ export default function App() {
<Dropzone
onChange={updateFiles}
value={files}
+ cleanFiles
+ validator={myOwnValidation}
>
{files.length > 0 &&
files.map((file:ExtFile) => (
diff --git a/src/components/demo-components/dropzone-demo/DemoDropzoneCustomValidation.tsx b/src/components/demo-components/dropzone-demo/DemoDropzoneCustomValidation.tsx
index e86964e..a41bf39 100644
--- a/src/components/demo-components/dropzone-demo/DemoDropzoneCustomValidation.tsx
+++ b/src/components/demo-components/dropzone-demo/DemoDropzoneCustomValidation.tsx
@@ -4,11 +4,20 @@ import {
ExtFile,
FileMosaic,
FileMosaicProps,
+ CustomValidateFileResponse,
} from "../../../files-ui";
-import { CustomValidateFileResponse } from "../../../files-ui/core";
+
+//validate files
+// file name must start with the following prefix: "test_file"
+// (e.g. a valid file name could be "test_file_photo.png")
const myOwnValidation = (file: File): CustomValidateFileResponse => {
let errorList: string[] = [];
- let validResult: boolean = false;
+ let validResult: boolean = true;
+ const regExPrefix: RegExp = /\btest_file\w+/;
+ if (!file.name.match(regExPrefix)) {
+ validResult = false;
+ errorList.push('Prefix "test_file" was not present in the file name');
+ }
return { valid: validResult, errors: errorList };
};
const DemoDropzoneCustomValidation = () => {
@@ -28,8 +37,7 @@ const DemoDropzoneCustomValidation = () => {
accept={"image/*"}
maxFileSize={28 * 1024}
maxFiles={2}
- //cleanFiles
- actionButtons={{ position: "bottom", cleanButton: {} }}
+ cleanFiles
validator={myOwnValidation}
>
{files.length > 0 &&
diff --git a/src/pages/demo/DropzoneDemoPage.jsx b/src/pages/demo/DropzoneDemoPage.jsx
index e600605..6914d4a 100644
--- a/src/pages/demo/DropzoneDemoPage.jsx
+++ b/src/pages/demo/DropzoneDemoPage.jsx
@@ -29,15 +29,10 @@ const rightMenuItems = [
referTo: "/components/dropzone#validation",
},
{
- id: 1,
+ id: 2,
label: "Custom validation",
referTo: "/components/dropzone#custom-validation",
},
- {
- id: 2,
- label: "Dropzone events",
- referTo: "/components/dropzone#dropzone-events",
- },
{
id: 3,
label: "Uploading",
@@ -45,18 +40,18 @@ const rightMenuItems = [
},
{
id: 4,
- label: "Styling",
- referTo: "/components/dropzone#styling",
+ label: "Dropzone events",
+ referTo: "/components/dropzone#dropzone-events",
},
{
id: 5,
- label: "Localization",
- referTo: "/components/dropzone#localization",
+ label: "Styling",
+ referTo: "/components/dropzone#styling",
},
{
id: 6,
- label: "Dark mode",
- referTo: "/components/dropzone#dark-mode",
+ label: "Localization",
+ referTo: "/components/dropzone#localization",
},
];
const DropzoneDemoPage = (props) => {
@@ -143,7 +138,7 @@ const DropzoneDemoPage = (props) => {
<ol>
<li>Accepting specific file types.</li>
<li>Accepting an specific number of files.</li>
- <li>Accepting an specific size (in bytes) for files.</li>
+ <li>Accepting files with an specific size (in bytes).</li>
</ol>
</DescParagraph>
@@ -153,9 +148,9 @@ const DropzoneDemoPage = (props) => {
<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{" "}
+ 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>
@@ -170,7 +165,7 @@ const DropzoneDemoPage = (props) => {
</li>
<li>
<TypeHighlight>autoClean</TypeHighlight> : By setting this prop,
- non valid files will automatically discarted and will not be
+ non valid files will be automatically discarted and will not be
given in the <CodeHighlight>onChange</CodeHighlight> event.
</li>
</ul>
@@ -192,7 +187,10 @@ const DropzoneDemoPage = (props) => {
CustomValidateFileResponse
</AnchorToTab>
</CodeHighlight>
- .
+ . Custom validator can work together with{" "}
+ <TypeHighlight>accept</TypeHighlight>,{" "}
+ <TypeHighlight>maxFileSize</TypeHighlight> and{" "}
+ <TypeHighlight>maxFiles</TypeHighlight> props.
</DescParagraph>
<Paper variant="outlined" style={{ padding: "25px" }}>
--
GitLab