[FEAT]: Add more demos in File Mosaic DemoPage: Image previeww, validation and upload status

bugs.md

@@ -2,6 +2,8 @@
 
 ## File Item (mosaic)
 
+- on change progress the loader is reredered again and again, I think that the 3 states or layers must be there from the begining
+  "preparing", "uploading", "result" - on cancel, the 2nd layer will dissapear, it will not be any big deal
 - After uploading, progress must be reiitialized to 0
 - [SOLVED] FileiTEMmAINlAYER WORKS STRANGE AT THE TIME NEW fILEiTEM IS ADDED
 - Fileptions (menu collapsed from click in option icon)

src/components/demo-components/filemosaic-demo/CodeJSFileMosaicBasic.jsx

@@ -22,7 +22,15 @@ const splittedCodeJS = `<>
     <FileInputButton onChange={updateFile} />
   )}
   <FileMosaic {...sampleFileProps} alwaysActive info />
-</>`;
+</>
+
+// file props
+const sampleFileProps = {
+  id: ":0:",
+  size: 28 * 1024 * 1024,
+  type: "plain/javascript",
+  name: "file created from props.jsx",
+};`;
 
 const completeCodeJS = `import * as React from "react";
 import { InputButton, FileMosaic } from "@files-ui/react";
@@ -31,7 +39,7 @@ const sampleFileProps = {
   id: ":0:",
   size: 28 * 1024 * 1024,
   type: "plain/javascript",
-  name: "fileeeeee.jsx",
+  name: "file created from props.jsx",
 };
 
 export default function App() {
@@ -56,5 +64,50 @@ export default function App() {
   );
 };`;
 
-const completeCodeTS = completeCodeJS;
-const splittedCodeTS = splittedCodeJS;
+const splittedCodeTS = `<>
+  {value ? (
+    <FileMosaic {...value} onDelete={removeFile} alwaysActive info />
+  ) : (
+    <FileInputButton onChange={updateFile} />
+  )}
+  <FileMosaic {...sampleFileProps} alwaysActive info />
+</>
+
+// file props
+const sampleFileProps: ExtFile = {
+  id: ":0:",
+  size: 28 * 1024 * 1024,
+  type: "plain/javascript",
+  name: "file created from props.jsx",
+};`;
+const completeCodeTS = `import * as React from "react";
+import { InputButton, FileMosaic, ExtFile } from "@files-ui/react";
+
+const sampleFileProps:ExtFile = {
+  id: ":0:",
+  size: 28 * 1024 * 1024,
+  type: "plain/javascript",
+  name: "file created from props.jsx",
+};
+
+export default function App() {
+  const [value, setValue] = React.useState<ExtFile | undefined>(undefined);
+
+  const updateFiles = (incommingFiles:ExtFile[]) => {
+    console.log("incomming extFiles", incommingFiles);
+    setValue(incommingFiles[0]);
+  };
+  const removeFile = () => {
+    setValue(undefined);
+  };
+  return (
+    <div style={{display:"flex", gap:"10px"}}>
+      {value ? (
+        <FileMosaic {...value} onDelete={removeFile} alwaysActive info />
+      ) : (
+        <FileInputButton onChange={updateFile} />
+      )}
+      <FileMosaic {...sampleFileProps} alwaysActive info />
+    </div>
+  );
+};`;

src/components/demo-components/filemosaic-demo/CodeJSFileMosaicImagePreview.tsx

+import * as React from "react";
+import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
+
+const CodeJSFileMosaicImagePreview = () => {
+  return (
+    <ShowDemoCode
+      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 CodeJSFileMosaicImagePreview;
+
+const splittedCodeJS = `<>
+  {value ? (
+    <FileMosaic {...value} onDelete={removeFile} alwaysActive info preview/>
+  ) : (
+    <FileInputButton onChange={updateFile} accept="image/*"/>
+  )}
+  <FileMosaic {...sampleFileProps} alwaysActive info />
+</>
+
+// file props
+const sampleFileProps = {
+    id: "fileId",
+    size: 28 * 1024 * 1024,
+    type: "image/gif",
+    name: "Thor arrives wakanda.jpg",
+    imageUrl:"https://cdn.wallpapersafari.com/0/95/1zms6H.jpg"
+};`;
+
+const completeCodeJS = `import * as React from "react";
+import { InputButton, FileMosaic } from "@files-ui/react";
+
+const sampleFileProps = {
+    id: "fileId",
+    size: 28 * 1024 * 1024,
+    type: "image/gif",
+    name: "Thor arrives wakanda.jpg",
+    imageUrl:"https://cdn.wallpapersafari.com/0/95/1zms6H.jpg"
+};
+
+export default function App() {
+  const [value, setValue] = React.useState(undefined);
+
+  const updateFiles = (incommingFiles) => {
+    console.log("incomming extFiles", incommingFiles);
+    setValue(incommingFiles[0]);
+  };
+  const removeFile = () => {
+    setValue(undefined);
+  };
+  return (
+    <div style={{display:"flex", gap:"10px"}}>
+      {value ? (
+        <FileMosaic {...value} onDelete={removeFile} alwaysActive info preview/>
+      ) : (
+        <FileInputButton onChange={updateFile} accept="image/*"/>
+      )}
+      <FileMosaic {...sampleFileProps} alwaysActive info />
+    </div>
+  );
+};`;
+
+const splittedCodeTS = `<>
+{value ? (
+  <FileMosaic {...value} onDelete={removeFile} alwaysActive info preview/>
+) : (
+  <FileInputButton onChange={updateFile} accept="image/*"/>
+)}
+<FileMosaic {...sampleFileProps} alwaysActive info />
+</>
+
+// file props
+const sampleFileProps: ExtFile = {
+  id: "fileId",
+  size: 28 * 1024 * 1024,
+  type: "image/gif",
+  name: "Thor arrives wakanda.jpg",
+  imageUrl:"https://cdn.wallpapersafari.com/0/95/1zms6H.jpg"
+};`;
+const completeCodeTS = `import * as React from "react";
+import { InputButton, FileMosaic, ExtFile } from "@files-ui/react";
+
+const sampleFileProps: ExtFile = {
+    id: "fileId",
+    size: 28 * 1024 * 1024,
+    type: "image/gif",
+    name: "Thor arrives wakanda.jpg",
+    imageUrl:"https://cdn.wallpapersafari.com/0/95/1zms6H.jpg"
+};
+
+export default function App() {
+  const [value, setValue] = React.useState<ExtFile | undefined>(undefined);
+
+  const updateFiles = (incommingFiles:ExtFile[]) => {
+    console.log("incomming extFiles", incommingFiles);
+    setValue(incommingFiles[0]);
+  };
+  const removeFile = () => {
+    setValue(undefined);
+  };
+  return (
+    <div style={{display:"flex", gap:"10px"}}>
+      {value ? (
+        <FileMosaic {...value} onDelete={removeFile} alwaysActive info preview/>
+      ) : (
+        <FileInputButton onChange={updateFile} accept="image/*"/>
+      )}
+      <FileMosaic {...sampleFileProps} alwaysActive info />
+    </div>
+  );
+};`;

src/components/demo-components/filemosaic-demo/CodeJSFileMosaicUploadStatus.jsx

+import * as React from "react";
+import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
+
+const CodeJSFileMosaicUploadStatus = () => {
+  return (
+    <ShowDemoCode
+      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 CodeJSFileMosaicUploadStatus;
+
+const splittedCodeJS = `<>
+  {sampleFilesProps.map((extFile) => (
+    <FileMosaic key={extFile.id} {...extFile} alwaysActive info preview />
+  ))}
+</>
+
+// 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";
+
+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 DemoFileMosaicValidation = () => {
+  return (
+    <>
+      {sampleFilesProps.map((extFile) => (
+        <FileMosaic key={extFile.id} {...extFile} alwaysActive info preview />
+      ))}
+    </>
+  );
+};
+export default DemoFileMosaicValidation;`;
+
+const splittedCodeTS = `<>
+  {sampleFilesProps.map((extFile:ExtFile) => (
+    <FileMosaic key={extFile.id} {...extFile} alwaysActive info preview />
+  ))}
+</>
+
+// 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";
+
+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 DemoFileMosaicValidation = () => {
+  return (
+    <>
+      {sampleFilesProps.map((extFile: ExtFile) => (
+        <FileMosaic key={extFile.id} {...extFile} alwaysActive info preview />
+      ))}
+    </>
+  );
+};
+export default DemoFileMosaicValidation;`;

src/components/demo-components/filemosaic-demo/CodeJSFileMosaicValidation.jsx

+import * as React from "react";
+import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
+
+const CodeJSFileMosaicValidation = () => {
+  return (
+    <ShowDemoCode
+      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 CodeJSFileMosaicValidation;
+
+const splittedCodeJS = `<>
+  {sampleFilesProps.map((extFile) => (
+    <FileMosaic key={extFile.id} {...extFile} alwaysActive info preview />
+  ))}
+</>
+
+// 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";
+
+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 DemoFileMosaicValidation = () => {
+  return (
+    <>
+      {sampleFilesProps.map((extFile) => (
+        <FileMosaic key={extFile.id} {...extFile} alwaysActive info preview />
+      ))}
+    </>
+  );
+};
+export default DemoFileMosaicValidation;`;
+
+const splittedCodeTS = `<>
+  {sampleFilesProps.map((extFile:ExtFile) => (
+    <FileMosaic key={extFile.id} {...extFile} alwaysActive info preview />
+  ))}
+</>
+
+// 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";
+
+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 DemoFileMosaicValidation = () => {
+  return (
+    <>
+      {sampleFilesProps.map((extFile: ExtFile) => (
+        <FileMosaic key={extFile.id} {...extFile} alwaysActive info preview />
+      ))}
+    </>
+  );
+};
+export default DemoFileMosaicValidation;`;

src/components/demo-components/filemosaic-demo/DemoContainerFileMosaic.jsx

+import { Paper, Stack } from "@mui/material";
+import * as React from "react";
+
+const DemoContainerFileMosaic = ({ children }) => {
+  return (
+    <Paper
+      variant="outlined"
+      style={{
+        padding: "25px",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+    >
+      <Stack
+        spacing={4}
+        direction="row"
+        alignItems={"center"}
+        flexWrap="wrap"
+        justifyContent={"space-evenly"}
+      >
+        {children}
+      </Stack>
+    </Paper>
+  );
+};
+export default DemoContainerFileMosaic;

src/components/demo-components/filemosaic-demo/DemoFileMosaicBasic.jsx

@@ -2,10 +2,10 @@ import * as React from "react";
 import { FileInputButton, FileMosaic } from "../../../files-ui";
 
 const sampleFileProps = {
-  id: ":0:",
+  id: "fileId",
   size: 28 * 1024 * 1024,
   type: "plain/javascript",
-  name: "fileeeeee.jsx",
+  name: "file created from props.jsx",
 };
 const DemoFileMosaicBasic = (props) => {
   const [value, setValue] = React.useState(undefined);
@@ -21,11 +21,11 @@ const DemoFileMosaicBasic = (props) => {
   return (
     <>
       {value ? (
-        <FileMosaic {...value} onDelete={removeFile} alwaysActive info />
+        <FileMosaic {...value} onDelete={removeFile} alwaysActive info preview/>
       ) : (
-        <FileInputButton onChange={updateFile} />
+        <FileInputButton value={value?[value]:[]} onChange={updateFile} />
       )}
-      <FileMosaic {...sampleFileProps} alwaysActive info />
+      <FileMosaic {...sampleFileProps} alwaysActive info preview/>
     </>
   );
 };

src/components/demo-components/filemosaic-demo/DemoFileMosaicImagePreview.tsx

+import * as React from "react";
+import { FileInputButton, FileMosaic } from "../../../files-ui";
+import { ExtFile } from "../../../files-ui/core";
+
+interface DemoFileMosaicImagePreviewProps {}
+
+const sampleFileProps: ExtFile = {
+  id: "fileId",
+  size: 28 * 1024 * 1024,
+  type: "image/jpeg",
+  name: "Thor arrives wakanda.jpg",
+  imageUrl: "https://cdn.wallpapersafari.com/0/95/1zms6H.jpg",
+};
+const DemoFileMosaicImagePreview: React.FC<DemoFileMosaicImagePreviewProps> = (
+  props: DemoFileMosaicImagePreviewProps
+) => {
+  const [value, setValue] = React.useState<ExtFile | undefined>(undefined);
+
+  const updateFile = (incommingFiles: ExtFile[]) => {
+    console.log("incomming extFiles", incommingFiles);
+    setValue(incommingFiles[0]);
+  };
+
+  const removeFile = () => {
+    setValue(undefined);
+  };
+  return (
+    <>
+      {value ? (
+        <FileMosaic
+          {...value}
+          onDelete={removeFile}
+          alwaysActive
+          info
+          preview
+        />
+      ) : (
+        <FileInputButton value={value ? [value] : []} onChange={updateFile} />
+      )}
+      <FileMosaic {...sampleFileProps} alwaysActive info />
+    </>
+  );
+};
+export default DemoFileMosaicImagePreview;

src/components/demo-components/filemosaic-demo/DemoFileMosaicUploadStatus.tsx

+import * as React from "react";
+import { FileMosaic } from "../../../files-ui";
+import { ExtFile } from "../../../files-ui/core";
+const preparingFiles: ExtFile[] = [
+  {
+    id: "fileId-1",
+    size: 28 * 1024 * 1024,
+    type: "plain/javascript",
+    name: "default preparing file.jsx",
+    uploadStatus: "preparing",
+  },
+  {
+    id: "fileId-2",
+    size: 28 * 1024 * 1024,
+    type: "plain/javascript",
+    name: "preparing file that can be stopped.jsx",
+    uploadStatus: "preparing",
+  },
+];
+const uploadingFiles: ExtFile[] = [
+  {
+    size: 28 * 1024 * 1024,
+    type: "image/png",
+    name: "non abortable with no specific progress.png",
+    valid: true,
+    uploadStatus: "uploading",
+  },
+  {
+    size: 28 * 1024 * 1024,
+    type: "image/png",
+    name: "non abortable with specific progress.png",
+    valid: true,
+    uploadStatus: "uploading",
+    progress: 56,
+  },
+  {
+    size: 28 * 1024 * 1024,
+    type: "image/png",
+    name: "abortable with no specific progress.png",
+    valid: true,
+    uploadStatus: "uploading",
+  },
+  {
+    size: 28 * 1024 * 1024,
+    type: "image/png",
+    name: "abortable with specific progress.png",
+    valid: true,
+    uploadStatus: "uploading",
+    progress: 56,
+  },
+];
+const uploadResulFiles: ExtFile[] = [
+  {
+    size: 28 * 1024 * 1024,
+    type: "image/jpeg",
+    name: "non valid file created from props.jpg",
+    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",
+    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",
+    uploadMessage: "File was uploaded correctly to Files-ui earthquakes",
+  },
+];
+const FlexRowContainer = (props: { children: React.ReactNode }) => {
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexWrap: "wrap",
+        justifyContent: "space-evenly",
+        width: "100%",
+      }}
+    >
+      {props.children}
+    </div>
+  );
+};
+const DemoFileMosaicUploadStatus = () => {
+  return (
+    <>
+      <FlexRowContainer>
+        <FileMosaic {...preparingFiles[0]} />
+        <FileMosaic {...preparingFiles[1]} onCancel={() => {}} />
+      </FlexRowContainer>
+
+      <FlexRowContainer>
+        <FileMosaic {...uploadingFiles[0]} />
+        <FileMosaic {...uploadingFiles[0]} progress={70} />
+        <FileMosaic {...uploadingFiles[2]} onAbort={() => {}} />
+         <FileMosaic {...uploadingFiles[3]} onAbort={()=>{}}/>
+      </FlexRowContainer>
+
+      <FlexRowContainer>
+        <FileMosaic {...uploadResulFiles[0]} resultOnTooltip/>
+        <FileMosaic {...uploadResulFiles[1]} resultOnTooltip/>
+        <FileMosaic {...uploadResulFiles[2]} resultOnTooltip/>
+        <FileMosaic {...uploadResulFiles[3]} resultOnTooltip/>
+      </FlexRowContainer>
+    </>
+  );
+};
+export default DemoFileMosaicUploadStatus;

src/components/demo-components/filemosaic-demo/DemoFileMosaicValidation.jsx

+import * as React from "react";
+import { FileMosaic } from "../../../files-ui";
+
+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 DemoFileMosaicValidation = () => {
+  return (
+    <>
+      {sampleFilesProps.map((extFile) => (
+        <FileMosaic key={extFile.id} {...extFile} alwaysActive info preview />
+      ))}
+    </>
+  );
+};
+export default DemoFileMosaicValidation;

src/pages/demo/FileMosaicDemoPage.jsx

@@ -16,6 +16,13 @@ import AnchorToTab from "../../components/util-components/AnchorToTab";
 
 import CodeJSFileMosaicBasic from "../../components/demo-components/filemosaic-demo/CodeJSFileMosaicBasic";
 import DemoFileMosaicBasic from "../../components/demo-components/filemosaic-demo/DemoFileMosaicBasic";
+import DemoFileMosaicImagePreview from "../../components/demo-components/filemosaic-demo/DemoFileMosaicImagePreview";
+import CodeJSFileMosaicImagePreview from "../../components/demo-components/filemosaic-demo/CodeJSFileMosaicImagePreview";
+import DemoContainerFileMosaic from "../../components/demo-components/filemosaic-demo/DemoContainerFileMosaic";
+import CodeJSFileMosaicValidation from "../../components/demo-components/filemosaic-demo/CodeJSFileMosaicValidation";
+import DemoFileMosaicValidation from "../../components/demo-components/filemosaic-demo/DemoFileMosaicValidation";
+import CodeJSFileMosaicUploadStatus from "../../components/demo-components/filemosaic-demo/CodeJSFileMosaicUploadStatus";
+import DemoFileMosaicUploadStatus from "../../components/demo-components/filemosaic-demo/DemoFileMosaicUploadStatus";
 
 const FileMosaicDemoPage = (props) => {
   return (
@@ -50,21 +57,20 @@ const FileMosaicDemoPage = (props) => {
             object or from individual props.
           </DescParagraph>
 
-          <Paper
-            variant="outlined"
-            style={{
-              padding: "25px",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-            }}
-          >
-            <Stack spacing={10} direction="row" alignItems={"center"}>
-              <DemoFileMosaicBasic />
-            </Stack>
-          </Paper>
+          <DemoContainerFileMosaic>
+            <DemoFileMosaicBasic />
+          </DemoContainerFileMosaic>
 
           <CodeJSFileMosaicBasic />
+
+          <Alert severity="info">
+            <AlertTitle> FileInputButton </AlertTitle>
+            For completeness, some of these examples include{" "}
+            <CodeHighlight>{`<FileInputButton/>`} </CodeHighlight>
+            component for allowing the user to select files. For further
+            information of this component check out the{" "}
+            <a href="/components/fileinputbutton">FileInputButton</a> page.
+          </Alert>
         </section>
 
         <section id="image-preview">
@@ -77,18 +83,21 @@ const FileMosaicDemoPage = (props) => {
             given.
           </DescParagraph>
 
-          <Paper variant="outlined" style={{ padding: "25px" }}>
-            {/* <BasicDemoDropzone /> */}
-          </Paper>
+          <DemoContainerFileMosaic>
+            <DemoFileMosaicImagePreview />
+          </DemoContainerFileMosaic>
 
-          {/* <BasicDropzoneCodeJS /> */}
+          <CodeJSFileMosaicImagePreview />
           <Alert severity="info">
-            <AlertTitle> FileInputButton </AlertTitle>
-            For completeness, some of these examples include{" "}
-            <CodeHighlight>{`<FileInputButton/>`} </CodeHighlight>
-            component for allowing the user to select files. For further
-            information of this component check out the{" "}
-            <a href="/components/fileinputbutton">FileInputButton</a> page.
+            As you can notice, when
+            <CodeHighlight>{`imageUrl`}</CodeHighlight> prop is present, the{" "}
+            <CodeHighlight>{`preview`}</CodeHighlight> prop is not needed since
+            it has more priority.
+            <br />
+            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.
           </Alert>
         </section>
         <section id="validation">
@@ -97,14 +106,49 @@ const FileMosaicDemoPage = (props) => {
             The <CodeHighlight>valid</CodeHighlight> prop can be set to{" "}
             <TypeHighlight>true</TypeHighlight>,{" "}
             <TypeHighlight>false</TypeHighlight> or{" "}
-            <TypeHighlight>undefined</TypeHighlight>
+            <TypeHighlight>undefined</TypeHighlight>.
+          </DescParagraph>
+
+          <DemoContainerFileMosaic>
+            <DemoFileMosaicValidation />
+          </DemoContainerFileMosaic>
+
+          <CodeJSFileMosaicValidation />
+        </section>
+
+        <section id="uploading">
+          <SubTitle content="Uploading status" />
+          <DescParagraph>
+            The <CodeHighlight>uploadStatus</CodeHighlight> prop can be set to{" "}
+            <TypeHighlight>"preparing"</TypeHighlight>,{" "}
+            <TypeHighlight>"uploading"</TypeHighlight>,{" "}
+            <TypeHighlight>"aborted"</TypeHighlight>,{" "}
+            <TypeHighlight>"error"</TypeHighlight> or{" "}
+            <TypeHighlight>"success"</TypeHighlight>. Also the{" "}
+            <CodeHighlight>uploadMessage</CodeHighlight> prop is used for
+            displaying the error or success message and the{" "}
+            <CodeHighlight>progress</CodeHighlight> prop can be used to show the
+            current progress of the upload process.
+            <br />
+            Each of the following examples demonstrates one state combination of
+            the FileMosaic component.
           </DescParagraph>
 
-          <Paper variant="outlined" style={{ padding: "25px" }}>
-            {/* <BasicDemoDropzone /> */}
+          <Paper
+            variant="outlined"
+            style={{
+              padding: "25px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              flexDirection: "column",
+              gap: "7px",
+            }}
+          >
+            <DemoFileMosaicUploadStatus />
           </Paper>
-          <p></p>
-          {/* <BasicDropzoneCodeJS /> */}
+
+          <CodeJSFileMosaicUploadStatus />
         </section>
       </MainContentContainer>
       <RightMenuContainer>