From e24be2cd98db42ff84b088f83f515ce81b4ced3b Mon Sep 17 00:00:00 2001
From: Jose Manuel Serrano Amaut <a20122128@pucp.pe>
Date: Fri, 17 Mar 2023 00:44:42 -0500
Subject: [PATCH] [WIP][FEAT]: Add uploading section in FileInputDemo page.
Refactor Dropzone demo page grammar.
---
.../CodeDemoDropzoneActionButtons.jsx | 2 +-
.../CodeDemoDropzoneUploading.jsx | 218 +++++++++++++++++-
.../DemoDropzoneActionButtons.jsx | 2 +-
.../dropzone-demo/DemoDropzoneUploading.jsx | 69 +++++-
src/pages/demo/DropzoneDemoPage.jsx | 11 +-
src/pages/demo/FileInputButtonDemoPage.tsx | 45 ++--
6 files changed, 309 insertions(+), 38 deletions(-)
diff --git a/src/components/demo-components/dropzone-demo/CodeDemoDropzoneActionButtons.jsx b/src/components/demo-components/dropzone-demo/CodeDemoDropzoneActionButtons.jsx
index 4d2c8ee..1a91e3a 100644
--- a/src/components/demo-components/dropzone-demo/CodeDemoDropzoneActionButtons.jsx
+++ b/src/components/demo-components/dropzone-demo/CodeDemoDropzoneActionButtons.jsx
@@ -1,5 +1,5 @@
import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
-const CodeDemoDropzoneActionButtons = ({ splittedOnly = false }) => {
+const CodeDemoDropzoneActionButtons = ({ splittedOnly = false,button }) => {
return (
<ShowDemoCode
splittedOnly={splittedOnly}
diff --git a/src/components/demo-components/dropzone-demo/CodeDemoDropzoneUploading.jsx b/src/components/demo-components/dropzone-demo/CodeDemoDropzoneUploading.jsx
index ce53cfa..6932442 100644
--- a/src/components/demo-components/dropzone-demo/CodeDemoDropzoneUploading.jsx
+++ b/src/components/demo-components/dropzone-demo/CodeDemoDropzoneUploading.jsx
@@ -1,6 +1,18 @@
import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
-const CodeDemoDropzoneUploading = ({ splittedOnly = false }) => {
+const CodeDemoDropzoneUploading = ({ splittedOnly = false, button=false }) => {
+ if (button)
return (
+ <ShowDemoCode
+ splittedOnly={splittedOnly}
+ codeCompleteJS={completeCodeJSButton}
+ codeCompleteTS={completeCodeTSButton}
+ codeSandboxJS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
+ codeSandboxTS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
+ codeSplittedJS={splittedCodeJSButton}
+ codeSplittedTS={splittedCodeTSButton}
+ />
+ );
+ return (
<ShowDemoCode
splittedOnly={splittedOnly}
codeCompleteJS={completeCodeJS}
@@ -14,6 +26,200 @@ const CodeDemoDropzoneUploading = ({ splittedOnly = false }) => {
};
export default CodeDemoDropzoneUploading;
+
+const splittedCodeJSButton = `<FileInputButton
+ 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,
+ }}
+ onUploadFinish={handleFinishUpload}
+ fakeUpload
+/>
+{files.map((file) => (
+ <FileCard key={file.id} {...file} onDelete={removeFile} info preview/>
+))}`;
+const splittedCodeTSButton = `<FileInputButton
+ 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,
+ }}
+ onUploadFinish={handleFinishUpload}
+ fakeUpload
+/>
+{files.map((file: ExtFile) => (
+ <FileCard key={file.id} {...file} onDelete={removeFile} info preview/>
+))}`;
+const completeCodeJSButton =`import { FileInputButton, FileCard } 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));
+ };
+ const handleFinishUpload=(uploadedFiles)=>{
+ console.log("Upload has finished", uploadedFiles);
+ }
+ return (
+ <div
+ style={{
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "space-evenly",
+ gap: "10px",
+ flexWrap: "wrap",
+ width: "100%",
+ }}
+ >
+ <FileInputButton
+ 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,
+ }}
+ onUploadFinish={handleFinishUpload}
+ fakeUpload
+ />
+ {files.length > 0 && (
+ <div
+ style={{
+ display: "flex",
+ justifyContent:"center",
+ flexWrap:"wrap",
+ gap:"5px",
+ minWidth:"50%"
+ }}
+ >
+ {files.map((file) => (
+ <FileCard key={file.id} {...file} onDelete={removeFile} info preview/>
+ ))}
+ </div>
+ )}
+ </div>
+ );
+}`;
+const completeCodeTSButton = `import { FileInputButton, FileCard, 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: number | string | undefined) => {
+ setFiles(files.filter((x) => x.id !== id));
+ };
+ const handleFinishUpload=(uploadedFiles:ExtFile[])=>{
+ console.log("Upload has finished", uploadedFiles);
+ }
+ return (
+ <div
+ style={{
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "space-evenly",
+ gap: "10px",
+ flexWrap: "wrap",
+ width: "100%",
+ }}
+ >
+ <FileInputButton
+ 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,
+ }}
+ onUploadFinish={handleFinishUpload}
+ fakeUpload
+ />
+ {files.length > 0 && (
+ <div
+ style={{
+ display: "flex",
+ justifyContent:"center",
+ flexWrap:"wrap",
+ gap:"5px",
+ minWidth:"50%"
+ }}
+ >
+ {files.map((file: ExtFile) => (
+ <FileCard key={file.id} {...file} onDelete={removeFile} info preview/>
+ ))}
+ </div>
+ )}
+ </div>
+ );
+}`;
+
+/////
+
+
+
const splittedCodeJS = `<Dropzone
onChange={updateFiles}
value={files}
@@ -30,11 +236,12 @@ const splittedCodeJS = `<Dropzone
},
cleanOnUpload: true,
}}
+ onUploadFinish={handleFinishUpload}
fakeUpload
>
{files.length > 0 &&
files.map((file) => (
- <FileMosaic key={file.id} {...file} onDelete={removeFile} info/>
+ <FileMosaic key={file.id} {...file} onDelete={removeFile} info preview/>
))}
</Dropzone>`;
const splittedCodeTS = `<Dropzone
@@ -53,11 +260,12 @@ const splittedCodeTS = `<Dropzone
},
cleanOnUpload: true,
}}
+ onUploadFinish={handleFinishUpload}
fakeUpload
>
{files.length > 0 &&
files.map((file: ExtFile) => (
- <FileMosaic key={file.id} {...file} onDelete={removeFile} info/>
+ <FileMosaic key={file.id} {...file} onDelete={removeFile} info preview/>
))}
</Dropzone>`;
const completeCodeJS = `import { Dropzone,FileMosaic } from "@files-ui/react";
@@ -94,7 +302,7 @@ export default function App() {
>
{files.length > 0 &&
files.map((file) => (
- <FileMosaic key={file.id} {...file} onDelete={removeFile} info />
+ <FileMosaic key={file.id} {...file} onDelete={removeFile} info preview/>
))}
</Dropzone>
);
@@ -134,7 +342,7 @@ export default function App() {
>
{files.length > 0 &&
files.map((file:ExtFile) => (
- <FileMosaic key={file.id} {...file} onDelete={removeFile} info />
+ <FileMosaic key={file.id} {...file} onDelete={removeFile} info preview/>
))}
</Dropzone>
);
diff --git a/src/components/demo-components/dropzone-demo/DemoDropzoneActionButtons.jsx b/src/components/demo-components/dropzone-demo/DemoDropzoneActionButtons.jsx
index 955d11b..a7cd9b2 100644
--- a/src/components/demo-components/dropzone-demo/DemoDropzoneActionButtons.jsx
+++ b/src/components/demo-components/dropzone-demo/DemoDropzoneActionButtons.jsx
@@ -1,7 +1,7 @@
import * as React from "react";
import { Dropzone, FileMosaic } from "../../../files-ui";
-const DemoDropzoneActionButtons = (props) => {
+const DemoDropzoneActionButtons = ({button}) => {
const [files, setFiles] = React.useState([]);
const updateFiles = (incommingFiles) => {
//do something with the files
diff --git a/src/components/demo-components/dropzone-demo/DemoDropzoneUploading.jsx b/src/components/demo-components/dropzone-demo/DemoDropzoneUploading.jsx
index 4775769..2a43ef3 100644
--- a/src/components/demo-components/dropzone-demo/DemoDropzoneUploading.jsx
+++ b/src/components/demo-components/dropzone-demo/DemoDropzoneUploading.jsx
@@ -1,7 +1,12 @@
import * as React from "react";
-import { Dropzone, FileMosaic } from "../../../files-ui";
+import {
+ Dropzone,
+ FileCard,
+ FileInputButton,
+ FileMosaic,
+} from "../../../files-ui";
-const DemoDropzoneUploading = (props) => {
+const DemoDropzoneUploading = ({ button }) => {
const [files, setFiles] = React.useState([]);
const updateFiles = (incommingFiles) => {
//do something with the files
@@ -11,12 +16,67 @@ const DemoDropzoneUploading = (props) => {
const removeFile = (id) => {
setFiles(files.filter((x) => x.id !== id));
};
+ const handleFinishUpload=(uploadedFiles)=>{
+ console.log("Upload has finished", uploadedFiles);
+ }
+ if (button)
+ return (
+ <div
+ style={{
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "space-evenly",
+ gap: "10px",
+ flexWrap: "wrap",
+ width: "100%",
+ }}
+ >
+ <FileInputButton
+ 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,
+ }}
+ onUploadFinish={handleFinishUpload}
+ fakeUpload
+ />
+ {files.length > 0 && (
+ <div
+ style={{
+ display: "flex",
+ justifyContent: "center",
+ flexWrap: "wrap",
+ gap: "5px",
+ minWidth: "50%",
+ }}
+ >
+ {files.map((file) => (
+ <FileCard key={file.id} {...file} onDelete={removeFile} info preview/>
+ ))}
+ </div>
+ )}
+ </div>
+ );
return (
<Dropzone
onChange={updateFiles}
value={files}
accept={"image/*"}
- maxFileSize={28 * 1024*1024}
+ maxFileSize={28 * 1024 * 1024}
maxFiles={2}
actionButtons={{ position: "bottom", uploadButton: {}, abortButton: {} }}
uploadConfig={{
@@ -28,11 +88,12 @@ const DemoDropzoneUploading = (props) => {
},
cleanOnUpload: true,
}}
+ onUploadFinish={handleFinishUpload}
fakeUpload
>
{files.length > 0 &&
files.map((file) => (
- <FileMosaic key={file.id} {...file} onDelete={removeFile} info />
+ <FileMosaic key={file.id} {...file} onDelete={removeFile} info preview/>
))}
</Dropzone>
);
diff --git a/src/pages/demo/DropzoneDemoPage.jsx b/src/pages/demo/DropzoneDemoPage.jsx
index 935aac1..eba342f 100644
--- a/src/pages/demo/DropzoneDemoPage.jsx
+++ b/src/pages/demo/DropzoneDemoPage.jsx
@@ -199,10 +199,11 @@ const DropzoneDemoPage = (props) => {
</DescParagraph>
<Paper variant="outlined" style={{ padding: "25px" }}>
- <DemoDropzoneUploading />
+ <DemoDropzoneUploading button/>
</Paper>
- <CodeDemoDropzoneUploading />
+ <CodeDemoDropzoneUploading button/>
+
<Alert severity="info">
<AlertTitle> Server response </AlertTitle>
For uploading files through files-ui, server must return the
@@ -219,8 +220,8 @@ const DropzoneDemoPage = (props) => {
<Alert severity="info">
<AlertTitle> "fakeUpload" </AlertTitle>
By giving this prop, the {"<Dropzone/>"} component will simulate the
- upload operation by randomly set the upload status and message in
- ech uploadable <TypeHighlight>ExtFile</TypeHighlight>. It also will
+ upload operation by randomly set the upload status and message on
+ each uploadable <TypeHighlight>ExtFile</TypeHighlight>. It will also
set a fake progress.
</Alert>
<br />
@@ -238,7 +239,7 @@ const DropzoneDemoPage = (props) => {
<li>
<TypeHighlight>cleanOnUpload</TypeHighlight> : By setting this
prop, you can control whether the upload process should "clean"
- the non valid files before uploading or not By default this
+ the non valid files before uploading or not. By default this
value is true.
</li>
</ul>
diff --git a/src/pages/demo/FileInputButtonDemoPage.tsx b/src/pages/demo/FileInputButtonDemoPage.tsx
index 6dfb619..a94655b 100644
--- a/src/pages/demo/FileInputButtonDemoPage.tsx
+++ b/src/pages/demo/FileInputButtonDemoPage.tsx
@@ -165,8 +165,9 @@ const FileInputButtonDemoPage: React.FC<FileInputButtonDemoPageProps> = (
<section id="custom-validation">
<SubTitle content="Custom validation" />
<DescParagraph>
- You can also override the FileInputButton validation operation by giving a
- custom validation function that must fit the following signature:{" "}
+ You can also override the FileInputButton validation operation by
+ giving a custom validation function that must fit the following
+ signature:{" "}
<CodeHighlight>
{"validator?: (f: "}
<AnchorToTab href="https://developer.mozilla.org/en-US/docs/Web/API/File">
@@ -183,9 +184,9 @@ const FileInputButtonDemoPage: React.FC<FileInputButtonDemoPageProps> = (
<TypeHighlight>maxFiles</TypeHighlight> props.
</DescParagraph>
<Paper variant="outlined" style={{ padding: "25px" }}>
- <DemoDropzoneCustomValidation button/>
+ <DemoDropzoneCustomValidation button />
</Paper>
- <CodeDemoDropzoneCustomValidation button/>
+ <CodeDemoDropzoneCustomValidation button />
</section>
<section id="uploading">
@@ -199,10 +200,10 @@ const FileInputButtonDemoPage: React.FC<FileInputButtonDemoPageProps> = (
</DescParagraph>
<Paper variant="outlined" style={{ padding: "25px" }}>
- <DemoDropzoneUploading />
+ <DemoDropzoneUploading button />
</Paper>
- <CodeDemoDropzoneUploading />
+ <CodeDemoDropzoneUploading button />
<Alert severity="info">
<AlertTitle> Server response </AlertTitle>
For uploading files through files-ui, server must return the
@@ -218,10 +219,10 @@ const FileInputButtonDemoPage: React.FC<FileInputButtonDemoPageProps> = (
<br />
<Alert severity="info">
<AlertTitle> "fakeUpload" </AlertTitle>
- By giving this prop, the {"<Dropzone/>"} component will simulate the
- upload operation by randomly set the upload status and message in
- ech uploadable <TypeHighlight>ExtFile</TypeHighlight>. It also will
- set a fake progress.
+ By giving this prop, the {"<FileInputButton/>"} component will
+ simulate the upload operation by randomly set the upload status and
+ message on each uploadable <TypeHighlight>ExtFile</TypeHighlight>.
+ It will also set a fake progress.
</Alert>
<br />
<Alert severity="info">
@@ -238,7 +239,7 @@ const FileInputButtonDemoPage: React.FC<FileInputButtonDemoPageProps> = (
<li>
<TypeHighlight>cleanOnUpload</TypeHighlight> : By setting this
prop, you can control whether the upload process should "clean"
- the non valid files before uploading or not By default this
+ the non valid files before uploading or not. By default this
value is true.
</li>
</ul>
@@ -248,16 +249,16 @@ const FileInputButtonDemoPage: React.FC<FileInputButtonDemoPageProps> = (
</section>
<section id="action-buttons">
- <SubTitle content="Dropzone with action buttons" />
+ <SubTitle content="FileInputButton with action buttons" />
<DescParagraph>
If you need to display buttons that trigger the default events in
- the <CodeHighlight>{"<Dropzone/>"}</CodeHighlight> component, you
- can do it by adding the <TypeHighlight>actionButtons</TypeHighlight>{" "}
- prop. This will add buttons to the top or to the bottom of this
- component.
+ the <CodeHighlight>{"<FileInputButton/>"}</CodeHighlight> component,
+ you can do it by adding the{" "}
+ <TypeHighlight>actionButtons</TypeHighlight> prop. This will add
+ buttons to the top or to the bottom of this component.
<ul>
<li>
- Dropzone with the{" "}
+ FileInputButton with the{" "}
<TypeHighlight>actionButtons.cleanButton</TypeHighlight> prop
defined will display a button which triggers the clean process.
<br />
@@ -265,7 +266,7 @@ const FileInputButtonDemoPage: React.FC<FileInputButtonDemoPageProps> = (
<strong>when the "upload" process is not active</strong>.
</li>
<li>
- Dropzone with the{" "}
+ FileInputButton with the{" "}
<TypeHighlight>actionButtons.deleteButton</TypeHighlight> prop
defined will display a button which deletes all files.
<br />
@@ -273,14 +274,14 @@ const FileInputButtonDemoPage: React.FC<FileInputButtonDemoPageProps> = (
<strong>when the "upload" process is not active</strong>.
</li>
<li>
- Dropzone with the{" "}
+ FileInputButton with the{" "}
<TypeHighlight>actionButtons.uploadButton</TypeHighlight> prop
defined will display a button which starts the upload process.
This button will <strong>not</strong> be visible{" "}
<strong>during the "upload" process</strong>.
</li>
<li>
- Dropzone with the{" "}
+ FileInputButton with the{" "}
<TypeHighlight>actionButtons.abortButton</TypeHighlight> prop
defined will display a button which stops the upload process.
<br />
@@ -291,10 +292,10 @@ const FileInputButtonDemoPage: React.FC<FileInputButtonDemoPageProps> = (
</DescParagraph>
<Paper variant="outlined" style={{ padding: "25px" }}>
- <DemoDropzoneActionButtons />
+ <DemoDropzoneActionButtons button />
</Paper>
- <CodeDemoDropzoneActionButtons />
+ <CodeDemoDropzoneActionButtons button />
</section>
<section id="header-config">
--
GitLab