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