From 776db266c9a3b6ebd00dc06e5a3b4f186980449f Mon Sep 17 00:00:00 2001
From: Jose Manuel Serrano Amaut <a20122128@pucp.pe>
Date: Tue, 14 Mar 2023 01:40:37 -0500
Subject: [PATCH] [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.
---
.../CodeDemoDropzoneCustomValidation.jsx | 32 +---
.../CodeDemoDropzoneUploading.jsx | 141 ++++++++++++++++++
.../dropzone-demo/DemoDropzoneUploading.jsx | 40 +++++
src/pages/demo/DropzoneDemoPage.jsx | 47 +++++-
4 files changed, 229 insertions(+), 31 deletions(-)
create mode 100644 src/components/demo-components/dropzone-demo/CodeDemoDropzoneUploading.jsx
create mode 100644 src/components/demo-components/dropzone-demo/DemoDropzoneUploading.jsx
diff --git a/src/components/demo-components/dropzone-demo/CodeDemoDropzoneCustomValidation.jsx b/src/components/demo-components/dropzone-demo/CodeDemoDropzoneCustomValidation.jsx
index 9859caf..4f87e1c 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 0000000..ce53cfa
--- /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 0000000..4775769
--- /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 6914d4a..752f322 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" />
--
GitLab