From d324506cd2a9251c92befb447feff3fe5383f29c Mon Sep 17 00:00:00 2001 From: Jose Manuel Serrano Amaut <a20122128@pucp.pe> Date: Mon, 6 Mar 2023 13:36:55 -0500 Subject: [PATCH] [WIP]: Added validation and image preview demos for File Mosaic. Upload demo is missing to refactor the code to bw shown --- .../filemosaic-demo/CodeJSFileMosaicBasic.jsx | 32 ++++---- .../CodeJSFileMosaicImagePreview.tsx | 24 +++--- .../CodeJSFileMosaicUploadStatus.jsx | 8 +- .../CodeJSFileMosaicValidation.jsx | 64 ++------------- .../filemosaic-demo/DemoFileMosaicBasic.jsx | 8 +- .../DemoFileMosaicImagePreview.tsx | 16 ++-- .../DemoFileMosaicUploadStatus.tsx | 70 ++++++++++++---- .../DemoFileMosaicValidation.jsx | 2 +- src/pages/demo/FileMosaicDemoPage.jsx | 82 ++++++++++++++++--- 9 files changed, 179 insertions(+), 127 deletions(-) diff --git a/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicBasic.jsx b/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicBasic.jsx index 87c1d8f..9a62cdf 100644 --- a/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicBasic.jsx +++ b/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicBasic.jsx @@ -17,18 +17,18 @@ export default CodeJSFileMosaicBasic; const splittedCodeJS = `<> {value ? ( - <FileMosaic {...value} onDelete={removeFile} alwaysActive info /> + <FileMosaic {...value} onDelete={removeFile} /> ) : ( - <FileInputButton onChange={updateFile} /> + <FileInputButton value={value ? [value] : []} onChange={updateFile} /> )} - <FileMosaic {...sampleFileProps} alwaysActive info /> + <FileMosaic {...sampleFileProps} /> </> // file props const sampleFileProps = { id: ":0:", size: 28 * 1024 * 1024, - type: "plain/javascript", + type: "text/plain", name: "file created from props.jsx", };`; @@ -38,7 +38,7 @@ import { InputButton, FileMosaic } from "@files-ui/react"; const sampleFileProps = { id: ":0:", size: 28 * 1024 * 1024, - type: "plain/javascript", + type: "text/plain", name: "file created from props.jsx", }; @@ -55,29 +55,29 @@ export default function App() { return ( <div style={{display:"flex", gap:"10px"}}> {value ? ( - <FileMosaic {...value} onDelete={removeFile} alwaysActive info /> + <FileMosaic {...value} onDelete={removeFile} info/> ) : ( - <FileInputButton onChange={updateFile} /> + <FileInputButton value={value ? [value] : []} onChange={updateFile} /> )} - <FileMosaic {...sampleFileProps} alwaysActive info /> + <FileMosaic {...sampleFileProps} info/> </div> ); };`; const splittedCodeTS = `<> {value ? ( - <FileMosaic {...value} onDelete={removeFile} alwaysActive info /> + <FileMosaic {...value} onDelete={removeFile} info/> ) : ( - <FileInputButton onChange={updateFile} /> + <FileInputButton value={value ? [value] : []} onChange={updateFile} /> )} - <FileMosaic {...sampleFileProps} alwaysActive info /> + <FileMosaic {...sampleFileProps} info/> </> // file props const sampleFileProps: ExtFile = { id: ":0:", size: 28 * 1024 * 1024, - type: "plain/javascript", + type: "text/plain", name: "file created from props.jsx", };`; const completeCodeTS = `import * as React from "react"; @@ -86,7 +86,7 @@ import { InputButton, FileMosaic, ExtFile } from "@files-ui/react"; const sampleFileProps:ExtFile = { id: ":0:", size: 28 * 1024 * 1024, - type: "plain/javascript", + type: "text/plain", name: "file created from props.jsx", }; @@ -103,11 +103,11 @@ export default function App() { return ( <div style={{display:"flex", gap:"10px"}}> {value ? ( - <FileMosaic {...value} onDelete={removeFile} alwaysActive info /> + <FileMosaic {...value} onDelete={removeFile} info/> ) : ( - <FileInputButton onChange={updateFile} /> + <FileInputButton value={value ? [value] : []} onChange={updateFile} /> )} - <FileMosaic {...sampleFileProps} alwaysActive info /> + <FileMosaic {...sampleFileProps} info/> </div> ); };`; diff --git a/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicImagePreview.tsx b/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicImagePreview.tsx index 2c64abf..63d00ec 100644 --- a/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicImagePreview.tsx +++ b/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicImagePreview.tsx @@ -17,18 +17,18 @@ export default CodeJSFileMosaicImagePreview; const splittedCodeJS = `<> {value ? ( - <FileMosaic {...value} onDelete={removeFile} alwaysActive info preview/> + <FileMosaic {...value} onDelete={removeFile} info preview/> ) : ( <FileInputButton onChange={updateFile} accept="image/*"/> )} - <FileMosaic {...sampleFileProps} alwaysActive info /> + <FileMosaic {...sampleFileProps} info/> </> // file props const sampleFileProps = { id: "fileId", size: 28 * 1024 * 1024, - type: "image/gif", + type: "image/jpeg", name: "Thor arrives wakanda.jpg", imageUrl:"https://cdn.wallpapersafari.com/0/95/1zms6H.jpg" };`; @@ -39,7 +39,7 @@ import { InputButton, FileMosaic } from "@files-ui/react"; const sampleFileProps = { id: "fileId", size: 28 * 1024 * 1024, - type: "image/gif", + type: "image/jpeg", name: "Thor arrives wakanda.jpg", imageUrl:"https://cdn.wallpapersafari.com/0/95/1zms6H.jpg" }; @@ -57,29 +57,29 @@ export default function App() { return ( <div style={{display:"flex", gap:"10px"}}> {value ? ( - <FileMosaic {...value} onDelete={removeFile} alwaysActive info preview/> + <FileMosaic {...value} onDelete={removeFile} info preview/> ) : ( <FileInputButton onChange={updateFile} accept="image/*"/> )} - <FileMosaic {...sampleFileProps} alwaysActive info /> + <FileMosaic {...sampleFileProps} info/> </div> ); };`; const splittedCodeTS = `<> {value ? ( - <FileMosaic {...value} onDelete={removeFile} alwaysActive info preview/> + <FileMosaic {...value} onDelete={removeFile} info preview/> ) : ( <FileInputButton onChange={updateFile} accept="image/*"/> )} -<FileMosaic {...sampleFileProps} alwaysActive info /> +<FileMosaic {...sampleFileProps} info/> </> // file props const sampleFileProps: ExtFile = { id: "fileId", size: 28 * 1024 * 1024, - type: "image/gif", + type: "image/jpeg", name: "Thor arrives wakanda.jpg", imageUrl:"https://cdn.wallpapersafari.com/0/95/1zms6H.jpg" };`; @@ -89,7 +89,7 @@ import { InputButton, FileMosaic, ExtFile } from "@files-ui/react"; const sampleFileProps: ExtFile = { id: "fileId", size: 28 * 1024 * 1024, - type: "image/gif", + type: "image/jpeg", name: "Thor arrives wakanda.jpg", imageUrl:"https://cdn.wallpapersafari.com/0/95/1zms6H.jpg" }; @@ -107,11 +107,11 @@ export default function App() { return ( <div style={{display:"flex", gap:"10px"}}> {value ? ( - <FileMosaic {...value} onDelete={removeFile} alwaysActive info preview/> + <FileMosaic {...value} onDelete={removeFile} info preview/> ) : ( <FileInputButton onChange={updateFile} accept="image/*"/> )} - <FileMosaic {...sampleFileProps} alwaysActive info /> + <FileMosaic {...sampleFileProps} info/> </div> ); };`; diff --git a/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicUploadStatus.jsx b/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicUploadStatus.jsx index bc7027d..855cda4 100644 --- a/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicUploadStatus.jsx +++ b/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicUploadStatus.jsx @@ -26,7 +26,7 @@ const sampleFilesProps = [ { id: "fileId-1", size: 28 * 1024 * 1024, - type: "plain/javascript", + type: "text/plain", name: "file created from props.jsx", }, { @@ -52,7 +52,7 @@ const sampleFilesProps = [ { id: "fileId-1", size: 28 * 1024 * 1024, - type: "plain/javascript", + type: "text/plain", name: "file created from props.jsx", }, { @@ -93,7 +93,7 @@ const sampleFilesProps:ExtFile[] = [ { id: "fileId-1", size: 28 * 1024 * 1024, - type: "plain/javascript", + type: "text/plain", name: "file created from props.jsx", }, { @@ -118,7 +118,7 @@ const sampleFilesProps: ExtFile[] = [ { id: "fileId-1", size: 28 * 1024 * 1024, - type: "plain/javascript", + type: "text/plain", name: "file created from props.jsx", }, { diff --git a/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicValidation.jsx b/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicValidation.jsx index 77645d3..c368ea5 100644 --- a/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicValidation.jsx +++ b/src/components/demo-components/filemosaic-demo/CodeJSFileMosaicValidation.jsx @@ -17,33 +17,9 @@ export default CodeJSFileMosaicValidation; const splittedCodeJS = `<> {sampleFilesProps.map((extFile) => ( - <FileMosaic key={extFile.id} {...extFile} alwaysActive info preview /> + <FileMosaic key={extFile.id} {...extFile} info/> ))} -</> - -// file props -const sampleFilesProps = [ - { - id: "fileId-1", - size: 28 * 1024 * 1024, - type: "plain/javascript", - name: "file created from props.jsx", - }, - { - id: "fileId-2", - size: 28 * 1024 * 1024, - type: "image/png", - name: "valid file created from props.png", - valid: true, - }, - { - id: "fileId-3", - size: 28 * 1024 * 1024, - type: "image/jpeg", - name: "non valid file created from props.jpg", - valid: false, - }, -];`; +</>`; const completeCodeJS = `import * as React from "react"; import { FileMosaic } from "../../../files-ui"; @@ -52,7 +28,7 @@ const sampleFilesProps = [ { id: "fileId-1", size: 28 * 1024 * 1024, - type: "plain/javascript", + type: "text/plain", name: "file created from props.jsx", }, { @@ -75,7 +51,7 @@ const DemoFileMosaicValidation = () => { return ( <> {sampleFilesProps.map((extFile) => ( - <FileMosaic key={extFile.id} {...extFile} alwaysActive info preview /> + <FileMosaic key={extFile.id} {...extFile} info/> ))} </> ); @@ -84,33 +60,9 @@ export default DemoFileMosaicValidation;`; const splittedCodeTS = `<> {sampleFilesProps.map((extFile:ExtFile) => ( - <FileMosaic key={extFile.id} {...extFile} alwaysActive info preview /> + <FileMosaic key={extFile.id} {...extFile} info/> ))} -</> - -// file props -const sampleFilesProps:ExtFile[] = [ - { - id: "fileId-1", - size: 28 * 1024 * 1024, - type: "plain/javascript", - name: "file created from props.jsx", - }, - { - id: "fileId-2", - size: 28 * 1024 * 1024, - type: "image/png", - name: "valid file created from props.png", - valid: true, - }, - { - id: "fileId-3", - size: 28 * 1024 * 1024, - type: "image/jpeg", - name: "non valid file created from props.jpg", - valid: false, - }, -];`; +</>`; const completeCodeTS = `import * as React from "react"; import { FileMosaic, ExtFile } from "../../../files-ui"; @@ -118,7 +70,7 @@ const sampleFilesProps: ExtFile[] = [ { id: "fileId-1", size: 28 * 1024 * 1024, - type: "plain/javascript", + type: "text/plain", name: "file created from props.jsx", }, { @@ -141,7 +93,7 @@ const DemoFileMosaicValidation = () => { return ( <> {sampleFilesProps.map((extFile: ExtFile) => ( - <FileMosaic key={extFile.id} {...extFile} alwaysActive info preview /> + <FileMosaic key={extFile.id} {...extFile} info/> ))} </> ); diff --git a/src/components/demo-components/filemosaic-demo/DemoFileMosaicBasic.jsx b/src/components/demo-components/filemosaic-demo/DemoFileMosaicBasic.jsx index 3f9bf1d..20bb19e 100644 --- a/src/components/demo-components/filemosaic-demo/DemoFileMosaicBasic.jsx +++ b/src/components/demo-components/filemosaic-demo/DemoFileMosaicBasic.jsx @@ -4,7 +4,7 @@ import { FileInputButton, FileMosaic } from "../../../files-ui"; const sampleFileProps = { id: "fileId", size: 28 * 1024 * 1024, - type: "plain/javascript", + type: "text/plain", name: "file created from props.jsx", }; const DemoFileMosaicBasic = (props) => { @@ -21,11 +21,11 @@ const DemoFileMosaicBasic = (props) => { return ( <> {value ? ( - <FileMosaic {...value} onDelete={removeFile} alwaysActive info preview/> + <FileMosaic {...value} onDelete={removeFile} info/> ) : ( - <FileInputButton value={value?[value]:[]} onChange={updateFile} /> + <FileInputButton value={value ? [value] : []} onChange={updateFile} /> )} - <FileMosaic {...sampleFileProps} alwaysActive info preview/> + <FileMosaic {...sampleFileProps} info/> </> ); }; diff --git a/src/components/demo-components/filemosaic-demo/DemoFileMosaicImagePreview.tsx b/src/components/demo-components/filemosaic-demo/DemoFileMosaicImagePreview.tsx index 5b0610b..f59b070 100644 --- a/src/components/demo-components/filemosaic-demo/DemoFileMosaicImagePreview.tsx +++ b/src/components/demo-components/filemosaic-demo/DemoFileMosaicImagePreview.tsx @@ -27,17 +27,15 @@ const DemoFileMosaicImagePreview: React.FC<DemoFileMosaicImagePreviewProps> = ( return ( <> {value ? ( - <FileMosaic - {...value} - onDelete={removeFile} - alwaysActive - info - preview - /> + <FileMosaic {...value} onDelete={removeFile} info preview/> ) : ( - <FileInputButton value={value ? [value] : []} onChange={updateFile} accept="image/*"/> + <FileInputButton + value={value ? [value] : []} + onChange={updateFile} + accept="image/*" + /> )} - <FileMosaic {...sampleFileProps} alwaysActive info /> + <FileMosaic {...sampleFileProps} info/> </> ); }; diff --git a/src/components/demo-components/filemosaic-demo/DemoFileMosaicUploadStatus.tsx b/src/components/demo-components/filemosaic-demo/DemoFileMosaicUploadStatus.tsx index eaeaa2b..4763b93 100644 --- a/src/components/demo-components/filemosaic-demo/DemoFileMosaicUploadStatus.tsx +++ b/src/components/demo-components/filemosaic-demo/DemoFileMosaicUploadStatus.tsx @@ -1,18 +1,18 @@ import * as React from "react"; import { FileMosaic } from "../../../files-ui"; -import { ExtFile, getRandomInt } from "../../../files-ui/core"; +import { ExtFile, getRandomInt, UPLOADSTATUS } from "../../../files-ui/core"; const preparingFiles: ExtFile[] = [ { id: "fileId-1", size: 28 * 1024 * 1024, - type: "plain/javascript", + type: "text/plain", name: "default preparing file.jsx", uploadStatus: "preparing", }, { id: "fileId-2", size: 28 * 1024 * 1024, - type: "plain/javascript", + type: "text/plain", name: "preparing file that can be stopped.jsx", uploadStatus: "preparing", }, @@ -52,24 +52,24 @@ const uploadingFiles: ExtFile[] = [ const uploadResulFiles: ExtFile[] = [ { size: 28 * 1024 * 1024, - type: "image/jpeg", - name: "non valid file created from props.jpg", - uploadStatus: "aborted", + type: "image/gif", + name: "non valid file created from props.gif", + //uploadStatus: "aborted", uploadMessage: "Upload was aborted by the user", }, { size: 28 * 1024 * 1024, type: "image/jpeg", name: "non valid file created from props.jpg", - uploadStatus: "error", + //uploadStatus: "error", uploadMessage: "File couldn't be uploaded to Files-ui earthquakes. File was too big.", }, { size: 28 * 1024 * 1024, - type: "image/jpeg", - name: "non valid file created from props.jpg", - uploadStatus: "success", + type: "image/png", + name: "non valid file created from props.png", + //uploadStatus: "success", uploadMessage: "File was uploaded correctly to Files-ui earthquakes", }, ]; @@ -91,7 +91,23 @@ const FlexRowContainer = (props: { children: React.ReactNode }) => { const DemoFileMosaicUploadStatus = () => { const [progress, setProgress] = React.useState(28); const [progress2, setProgress2] = React.useState(28); + const [status1, setStatus1] = React.useState<UPLOADSTATUS | undefined>( + "uploading" + ); + const [status2, setStatus2] = React.useState<UPLOADSTATUS | undefined>( + "uploading" + ); + const [status3, setStatus3] = React.useState<UPLOADSTATUS | undefined>( + "uploading" + ); + React.useEffect(() => { + const _myInterval2 = setInterval(() => { + //set the uploadstatus result + setStatus1((_status) => setNextUploadState(_status, "aborted")); + setStatus2((_status) => setNextUploadState(_status, "error")); + setStatus3((_status) => setNextUploadState(_status, "success")); + }, 5000); const _myInterval = setInterval(() => { setProgress((_progress) => { if (_progress === 100) { @@ -121,7 +137,9 @@ const DemoFileMosaicUploadStatus = () => { return () => { console.log("clear interval", _myInterval); + console.log("clear interval", _myInterval2); clearInterval(_myInterval as NodeJS.Timer); + clearInterval(_myInterval2 as NodeJS.Timer); }; }, []); return ( @@ -143,12 +161,36 @@ const DemoFileMosaicUploadStatus = () => { </FlexRowContainer> <FlexRowContainer> - <FileMosaic {...uploadResulFiles[0]} resultOnTooltip /> - <FileMosaic {...uploadResulFiles[1]} resultOnTooltip /> - <FileMosaic {...uploadResulFiles[2]} resultOnTooltip /> - <FileMosaic {...uploadResulFiles[3]} resultOnTooltip /> + <FileMosaic + {...uploadResulFiles[0]} + resultOnTooltip + uploadStatus={status1} + /> + <FileMosaic + {...uploadResulFiles[1]} + resultOnTooltip + uploadStatus={status2} + /> + <FileMosaic + {...uploadResulFiles[2]} + resultOnTooltip + uploadStatus={status3} + /> </FlexRowContainer> </> ); }; export default DemoFileMosaicUploadStatus; + +const setNextUploadState = ( + prevState: UPLOADSTATUS | undefined, + nextStatus: UPLOADSTATUS | undefined +): UPLOADSTATUS | undefined => { + if (prevState === "uploading") { + return nextStatus; + } else if (prevState === nextStatus) { + return undefined; + } else { + return "uploading"; + } +}; diff --git a/src/components/demo-components/filemosaic-demo/DemoFileMosaicValidation.jsx b/src/components/demo-components/filemosaic-demo/DemoFileMosaicValidation.jsx index 93df5d5..9b23115 100644 --- a/src/components/demo-components/filemosaic-demo/DemoFileMosaicValidation.jsx +++ b/src/components/demo-components/filemosaic-demo/DemoFileMosaicValidation.jsx @@ -5,7 +5,7 @@ const sampleFilesProps = [ { id: "fileId-1", size: 28 * 1024 * 1024, - type: "plain/javascript", + type: "text/plain", name: "file created from props.jsx", }, { diff --git a/src/pages/demo/FileMosaicDemoPage.jsx b/src/pages/demo/FileMosaicDemoPage.jsx index c1689c9..5d5d253 100644 --- a/src/pages/demo/FileMosaicDemoPage.jsx +++ b/src/pages/demo/FileMosaicDemoPage.jsx @@ -32,7 +32,7 @@ const FileMosaicDemoPage = (props) => { <MainParagraph> File mosaics are compact elements that represent a file in the UI. They can be used for just showing general info of the file, or either - allow the user to interact with them. + to allow the user to interact with them. </MainParagraph> <DescParagraph> This widget allow users to see information of{" "} @@ -40,21 +40,22 @@ const FileMosaicDemoPage = (props) => { </DescParagraph> <Alert severity="info"> While included here as a standalone component, the most common use - will be as a result of the "onChange" event of {"<Dropzone/>"} or{" "} - {"<InputButton/>"} components, so some of the behavior demonstrated - here is not shown in context.{" "} + will be to display the result of the "onChange" event of{" "} + <CodeHighlight>{"<Dropzone/>"}</CodeHighlight> or{" "} + <CodeHighlight>{"<InputButton/>"}</CodeHighlight> components, so some + of the behavior demonstrated here is not totally shown in context.{" "} </Alert> <section id="basic-filemosaic"> <SubTitle content="Basic FileMosaic" /> <DescParagraph> - The <CodeHighlight>FileMosaic</CodeHighlight> supports displaying - information from a{" "} + The <CodeHighlight>FileMosaic</CodeHighlight> component supports + displaying information from a{" "} <TypeHighlight> <AnchorToTab href="https://developer.mozilla.org/en-US/docs/Web/API/File"> File </AnchorToTab> </TypeHighlight>{" "} - object or from individual props. + object or from given props. </DescParagraph> <DemoContainerFileMosaic> @@ -71,6 +72,19 @@ const FileMosaicDemoPage = (props) => { information of this component check out the{" "} <a href="/components/fileinputbutton">FileInputButton</a> page. </Alert> + <br /> + <Alert severity="info"> + <AlertTitle> ExtFile </AlertTitle> + {/* This is an info alert — <strong>check it out!</strong> + */} + <strong>ExtFile type </strong> + is explicity used in the + <strong> Typescript</strong> example and is implicity used in the{" "} + <strong>Javascript</strong> example for handling the metadata that + makes possible the information exchange between components. For + further information about this data type check out the{" "} + <a href="/types#ext-file">ExtFile-API. </a> + </Alert> </section> <section id="image-preview"> @@ -78,9 +92,10 @@ const FileMosaicDemoPage = (props) => { <DescParagraph> By setting the <CodeHighlight>preview</CodeHighlight> prop to{" "} <TypeHighlight>true</TypeHighlight> the component will show an image - preview by taking the <CodeHighlight>imageUrl</CodeHighlight> - prop or by reading the <TypeHighlight>File</TypeHighlight> object if - given. + preview instead of a file icons. To acomplish this task this + component will take the <CodeHighlight>imageUrl</CodeHighlight> + prop or will read the <TypeHighlight>File</TypeHighlight> object if + given and if it is an image. </DescParagraph> <DemoContainerFileMosaic> @@ -97,9 +112,10 @@ const FileMosaicDemoPage = (props) => { On the other side, for displaying an image preview as a result of reading an image File it is necesary to set the{" "} <CodeHighlight>{`preview`}</CodeHighlight> prop, otherwise a default - image preview will be shown. + image preview will be shown in order to save memory. </Alert> </section> + <section id="validation"> <SubTitle content="Validation" /> <DescParagraph> @@ -114,6 +130,24 @@ const FileMosaicDemoPage = (props) => { </DemoContainerFileMosaic> <CodeJSFileMosaicValidation /> + <Alert severity="info"> + Typically, <CodeHighlight>{"<Dropzone/>"}</CodeHighlight> or{" "} + <CodeHighlight>{"<FileInputButton/>"}</CodeHighlight> components set + this prop when validating the input from a given criteria. You can + see the behaviour mentioned in the following demos: + <ul> + <li> + <AnchorToTab href="/components/dropzone#validation"> + Dropzone validation + </AnchorToTab> + </li> + <li> + <AnchorToTab href="/components/fileinputbutton#validation"> + FileInputButton validation + </AnchorToTab> + </li> + </ul> + </Alert> </section> <section id="uploading"> @@ -149,6 +183,32 @@ const FileMosaicDemoPage = (props) => { </Paper> <CodeJSFileMosaicUploadStatus /> + + <Alert severity="info"> + As you can see, you have full control of the FileMosaic upload + props. You can take advantage of them to ake your own upload + function and show the user the progress. + <br />{" "} + On the other hand, you can also leverage the capability of{" "} + <CodeHighlight>{"<Dropzone/>"}</CodeHighlight> and{" "} + <CodeHighlight>{"<FileInputButton/>"}</CodeHighlight> components + since they also manage the{" "} + <TypeHighlight>{"uploadStatus"}</TypeHighlight> + prop for you when upload is enabled. You can see the behaviour + mentioned in the following demos: + <ul> + <li> + <AnchorToTab href="/components/dropzone#"> + Dropzone upload + </AnchorToTab> + </li> + <li> + <AnchorToTab href="/components/fileinputbutton#validation"> + FileInputButton upload + </AnchorToTab> + </li> + </ul> + </Alert> </section> </MainContentContainer> <RightMenuContainer> -- GitLab