diff --git a/src/components/demo-components/dropzone-demo/AdvancedDropzoneCodeJS.jsx b/src/components/demo-components/dropzone-demo/AdvancedDropzoneCodeJS.jsx
index 6de6f8cd82f8d60eed80a8389c0962aa4658916f..aadbaaec013459db608ec9a0242ccbf2e5df3818 100644
--- a/src/components/demo-components/dropzone-demo/AdvancedDropzoneCodeJS.jsx
+++ b/src/components/demo-components/dropzone-demo/AdvancedDropzoneCodeJS.jsx
@@ -19,10 +19,10 @@ const splittedCodeJS = `<Dropzone
onChange={updateFiles}
minHeight="195px"
value={extFiles}
+ accept="image/*, video/*"
maxFiles={3}
- // FmaxFileSize={2998000 * 20}
+ maxFileSize={2 * 1024*1024}
label="Drag'n drop files here or click to browse"
- // accept=".png,image/*, video/*"
uploadConfig={{
// autoUpload: true
url: BASE_URL + "/file/28048465460",
@@ -37,7 +37,7 @@ const splittedCodeJS = `<Dropzone
deleteButton: {},
uploadButton: {},
}}
- >
+>
{extFiles.map((file) => (
<FileMosaic
{...file}
@@ -121,27 +121,27 @@ export default function AdvancedDropzoneDemo() {
return (
<>
<Dropzone
- onChange={updateFiles}
- minHeight="195px"
- value={extFiles}
- maxFiles={3}
- // FmaxFileSize={2998000 * 20}
- label="Drag'n drop files here or click to browse"
- // accept=".png,image/*, video/*"
- uploadConfig={{
- // autoUpload: true
- url: BASE_URL + "/file/28048465460",
- cleanOnUpload: true,
- }}
- onUploadStart={handleStart}
- onUploadFinish={handleFinish}
- //fakeUpload
- actionButtons={{
- position: "after",
- abortButton: {},
- deleteButton: {},
- uploadButton: {},
- }}
+ onChange={updateFiles}
+ minHeight="195px"
+ value={extFiles}
+ accept="image/*, video/*"
+ maxFiles={3}
+ maxFileSize={2 * 1024*1024}
+ label="Drag'n drop files here or click to browse"
+ uploadConfig={{
+ // autoUpload: true
+ url: BASE_URL + "/file/28048465460",
+ cleanOnUpload: true,
+ }}
+ onUploadStart={handleStart}
+ onUploadFinish={handleFinish}
+ //fakeUpload
+ actionButtons={{
+ position: "after",
+ abortButton: {},
+ deleteButton: {},
+ uploadButton: {},
+ }}
>
{extFiles.map((file) => (
<FileMosaic
diff --git a/src/components/demo-components/dropzone-demo/AdvancedDropzoneDemo.tsx b/src/components/demo-components/dropzone-demo/AdvancedDropzoneDemo.tsx
index fd943f6049c2c2726f1870a46cca19120ad85a09..ed88efba1021abd5ea7adb757f2ef0332684890d 100644
--- a/src/components/demo-components/dropzone-demo/AdvancedDropzoneDemo.tsx
+++ b/src/components/demo-components/dropzone-demo/AdvancedDropzoneDemo.tsx
@@ -63,8 +63,9 @@ export default function AdvancedDropzoneDemo() {
onChange={updateFiles}
minHeight="195px"
value={extFiles}
+ accept="image/*, video/*"
maxFiles={3}
- // FmaxFileSize={2998000 * 20}
+ maxFileSize={2 * 1024*1024}
label="Drag'n drop files here or click to browse"
// accept=".png,image/*, video/*"
uploadConfig={{
@@ -92,7 +93,6 @@ export default function AdvancedDropzoneDemo() {
onAbort={handleAbort}
onCancel={handleCancel}
resultOnTooltip
- alwaysActive
preview
info
/>
diff --git a/src/components/demo-components/dropzone-demo/BasicDropzoneCodeJS.jsx b/src/components/demo-components/dropzone-demo/BasicDropzoneCodeJS.jsx
index e80a5403b374e05a99725c0c3e278a50d42171b0..c1576e5d498f067063262b6e6bd85835936cd28e 100644
--- a/src/components/demo-components/dropzone-demo/BasicDropzoneCodeJS.jsx
+++ b/src/components/demo-components/dropzone-demo/BasicDropzoneCodeJS.jsx
@@ -5,8 +5,8 @@ const BasicDropzoneCode = ({ splittedOnly = false, button = false }) => {
splittedOnly={splittedOnly}
codeCompleteJS={button ? completeCodeJSButton : completeCodeJS}
codeCompleteTS={button ? completeCodeTSButton : completeCodeTS}
- codeSandboxJS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
- codeSandboxTS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
+ codeSandboxJS="https://codesandbox.io/s/basic-demo-js-blssi1"
+ codeSandboxTS="https://codesandbox.io/s/basic-demo-js-blssi1"
codeSplittedJS={button ? splittedCodeJSButton : splittedCodeJS}
codeSplittedTS={button ? splittedCodeTSButton : splittedCodeTS}
/>
diff --git a/src/components/demo-components/global-demo/CodeDemoGlobalConfig.tsx b/src/components/demo-components/global-demo/CodeDemoGlobalConfig.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..31888d4eccb185d1b24da6cb8d2f8a4bfb873912
--- /dev/null
+++ b/src/components/demo-components/global-demo/CodeDemoGlobalConfig.tsx
@@ -0,0 +1,687 @@
+import * as React from "react";
+import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
+
+const CodeDemoGlobalConfig = ({ card = false }) => {
+ if (!card)
+ 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}
+ />
+ );
+ return (
+ <ShowDemoCode
+ codeCompleteJS={completeCodeJSCard}
+ codeCompleteTS={completeCodeTSCard}
+ codeSandboxJS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
+ codeSandboxTS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
+ codeSplittedJS={splittedCodeJSCard}
+ codeSplittedTS={splittedCodeTSCard}
+ />
+ );
+};
+export default CodeDemoGlobalConfig;
+
+const splittedCodeJS = `<FilesUiProvider
+ config={{
+ localization: localization,
+ darkMode: darkModeOn,
+ icons: otherIcons ,
+ }}
+>
+{/** components here */}
+</FilesUiProvider>`;
+const splittedCodeTS = splittedCodeJS;
+const completeCodeJS = `
+import * as React from "react";
+import {
+ Dropzone,
+ FileMosaic,
+ FilesUiProvider,
+} from "@files-ui/react";
+import { Autocomplete, TextField, Button } from "@mui/material";
+import "./DemoGlobals.css";
+
+const DemoGlobalConfig = () => {
+ const [localization, setLocalization] = React.useState(undefined);
+
+ const [darkModeOn, setDarkModeOn] = React.useState(false);
+ const [otherIcons, setOtherIcons] = React.useState(true);
+
+ const hadleSelect = (value) => {
+ console.log(value);
+ setLocalization(value?.value);
+ };
+ const iconsConfig = {
+ //local resource
+ docx: "/other_icons/wordicon.png",
+ //external resource
+ pdf: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQDw14VqtuvUv74kiT1anhx6eRb_JjOXBxeqA&usqp=CAU",
+ };
+ return (
+ <FilesUiProvider
+ config={{
+ localization: localization,
+ darkMode: darkModeOn,
+ icons: otherIcons ? iconsConfig : undefined,
+ }}
+ >
+ <div className="demo-controls-container">
+ <Autocomplete
+ disablePortal
+ autoSelect
+ size="small"
+ onChange={(e, value) => hadleSelect(value as LanguageItem)}
+ id="combo-box-demo"
+ options={languages}
+ sx={{ width: 300 }}
+ getOptionLabel={(option) => option.language}
+ renderInput={(params) => (
+ <TextField {...params} label="Localization" />
+ )}
+ />
+ <Button
+ variant="contained"
+ onClick={() => setDarkModeOn((_darkModeOn) => !_darkModeOn)}
+ >
+ {darkModeOn ? "turn on light" : "turn off light"}
+ </Button>
+ <Button
+ variant="outlined"
+ onClick={() => setOtherIcons((_otherIcons) => !_otherIcons)}
+ >
+ {!otherIcons ? "Other icons" : "Default icons"}
+ </Button>
+ </div>
+
+ <div
+ className="demo-localization-container"
+ style={{
+ backgroundColor: darkModeOn ? "#121212" : "white",
+ }}
+ >
+ <div className="dropzone-filemosaic-container">
+ <Dropzone
+ value={[]}
+ accept={"image/*"}
+ maxFileSize={28 * 1024 * 1024}
+ maxFiles={10}
+ ></Dropzone>
+ </div>
+
+ <div className="dropzone-filemosaic-container">
+ {extFiles.map((extFile, index) => (
+ <FileMosaic key={index} {...extFile} onDelete={() => {}} info />
+ ))}
+ </div>
+ </div>
+ </FilesUiProvider>
+ );
+};
+export default DemoGlobalConfig;
+
+const languages = [
+ { language: "Español: ES-es", value: "ES-es" },
+ { language: "English: EN-en", value: "EN-en" },
+ { language: "French: FR-fr", value: "FR-fr" },
+ { language: "Italian: IT-it", value: "IT-it" },
+ { language: "Portuguese: PT-pt", value: "PT-pt" },
+ { language: "Russian: RU-ru", value: "RU-ru" },
+ { language: "Chinese(simplified): ZH-cn", value: "ZH-cn" },
+ { language: "Chinese(traditional): ZH-hk", value: "ZH-hk" },
+];
+const extFiles= [
+ {
+ id: 0,
+ name: "file_global_conf.docx",
+ size: 28 * 1024,
+ errors: ["pdf not allowed", "file is too big"],
+ },
+ {
+ id: 1,
+ valid: false,
+ name: "file_global_conf.docx",
+
+ size: 28 * 1024,
+ errors: ["pdf not allowed", "file is too big"],
+ },
+ {
+ id: 2,
+ valid: true,
+ name: "file_global_conf.docx",
+ size: 28 * 1024,
+ },
+ {
+ id: 3,
+ valid: true,
+ name: "file_global_conf.pdf",
+ type: "application/pdf",
+ size: 28 * 1024,
+ uploadStatus: "preparing",
+ },
+ {
+ id: 4,
+ name: "file_global_conf.pdf",
+ type: "application/pdf",
+ size: 28 * 1024,
+ uploadStatus: "uploading",
+ progress: 28,
+ },
+ {
+ id: 5,
+ valid: true,
+ name: "file_global_conf.docx",
+ size: 28 * 1024,
+ uploadStatus: "aborted",
+ uploadMessage: "Upload was aborted",
+ },
+ {
+ id: 6,
+ valid: false,
+ name: "file_global_conf.pdf",
+ type: "application/pdf",
+ size: 28 * 1024,
+ uploadStatus: "error",
+ uploadMessage: "there was an error on the server",
+ },
+ {
+ id: 7,
+ valid: true,
+ name: "file_global_conf.docx",
+ size: 28 * 1024,
+ uploadStatus: "success",
+ uploadMessage: "files-ui <3",
+ },
+];
+`;
+const completeCodeTS = `import * as React from "react";
+import {
+ Dropzone,
+ ExtFile,
+ FileMosaic,
+ Localization,
+ FilesUiProvider,
+ IconsSet,
+} from "@files-ui/react";
+import { Autocomplete, TextField, Button } from "@mui/material";
+import "./DemoGlobals.css";
+
+const DemoGlobalConfig = () => {
+ const [localization, setLocalization] = React.useState<
+ Localization | undefined
+ >(undefined);
+
+ const [darkModeOn, setDarkModeOn] = React.useState<boolean>(false);
+ const [otherIcons, setOtherIcons] = React.useState<boolean>(true);
+
+ const hadleSelect = (value: LanguageItem | null) => {
+ console.log(value);
+ setLocalization(value?.value);
+ };
+ const iconsConfig: IconsSet = {
+ //local resource
+ docx: "/other_icons/wordicon.png",
+ //external resource
+ pdf: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQDw14VqtuvUv74kiT1anhx6eRb_JjOXBxeqA&usqp=CAU",
+ };
+ return (
+ <FilesUiProvider
+ config={{
+ localization: localization,
+ darkMode: darkModeOn,
+ icons: otherIcons ? iconsConfig : undefined,
+ }}
+ >
+ <div className="demo-controls-container">
+ <Autocomplete
+ disablePortal
+ autoSelect
+ size="small"
+ onChange={(e, value) => hadleSelect(value as LanguageItem)}
+ id="combo-box-demo"
+ options={languages}
+ sx={{ width: 300 }}
+ getOptionLabel={(option) => option.language}
+ renderInput={(params) => (
+ <TextField {...params} label="Localization" />
+ )}
+ />
+ <Button
+ variant="contained"
+ onClick={() => setDarkModeOn((_darkModeOn) => !_darkModeOn)}
+ >
+ {darkModeOn ? "turn on light" : "turn off light"}
+ </Button>
+ <Button
+ variant="outlined"
+ onClick={() => setOtherIcons((_otherIcons) => !_otherIcons)}
+ >
+ {!otherIcons ? "Other icons" : "Default icons"}
+ </Button>
+ </div>
+
+ <div
+ className="demo-localization-container"
+ style={{
+ backgroundColor: darkModeOn ? "#121212" : "white",
+ }}
+ >
+ <div className="dropzone-filemosaic-container">
+ <Dropzone
+ value={[]}
+ accept={"image/*"}
+ maxFileSize={28 * 1024 * 1024}
+ maxFiles={10}
+ ></Dropzone>
+ </div>
+
+ <div className="dropzone-filemosaic-container">
+ {extFiles.map((extFile, index) => (
+ <FileMosaic key={index} {...extFile} onDelete={() => {}} info />
+ ))}
+ </div>
+ </div>
+ </FilesUiProvider>
+ );
+};
+export default DemoGlobalConfig;
+
+interface LanguageItem {
+ language: string;
+ value: Localization;
+}
+
+const languages: LanguageItem = [
+ { language: "Español: ES-es", value: "ES-es" },
+ { language: "English: EN-en", value: "EN-en" },
+ { language: "French: FR-fr", value: "FR-fr" },
+ { language: "Italian: IT-it", value: "IT-it" },
+ { language: "Portuguese: PT-pt", value: "PT-pt" },
+ { language: "Russian: RU-ru", value: "RU-ru" },
+ { language: "Chinese(simplified): ZH-cn", value: "ZH-cn" },
+ { language: "Chinese(traditional): ZH-hk", value: "ZH-hk" },
+];
+const extFiles: ExtFile[] = [
+ {
+ id: 0,
+ name: "file_global_conf.docx",
+ size: 28 * 1024,
+ errors: ["pdf not allowed", "file is too big"],
+ },
+ {
+ id: 1,
+ valid: false,
+ name: "file_global_conf.docx",
+
+ size: 28 * 1024,
+ errors: ["pdf not allowed", "file is too big"],
+ },
+ {
+ id: 2,
+ valid: true,
+ name: "file_global_conf.docx",
+ size: 28 * 1024,
+ },
+ {
+ id: 3,
+ valid: true,
+ name: "file_global_conf.pdf",
+ type: "application/pdf",
+ size: 28 * 1024,
+ uploadStatus: "preparing",
+ },
+ {
+ id: 4,
+ name: "file_global_conf.pdf",
+ type: "application/pdf",
+ size: 28 * 1024,
+ uploadStatus: "uploading",
+ progress: 28,
+ },
+ {
+ id: 5,
+ valid: true,
+ name: "file_global_conf.docx",
+ size: 28 * 1024,
+ uploadStatus: "aborted",
+ uploadMessage: "Upload was aborted",
+ },
+ {
+ id: 6,
+ valid: false,
+ name: "file_global_conf.pdf",
+ type: "application/pdf",
+ size: 28 * 1024,
+ uploadStatus: "error",
+ uploadMessage: "there was an error on the server",
+ },
+ {
+ id: 7,
+ valid: true,
+ name: "file_global_conf.docx",
+ size: 28 * 1024,
+ uploadStatus: "success",
+ uploadMessage: "files-ui <3",
+ },
+];`;
+
+const splittedCodeJSCard = splittedCodeJS;
+const splittedCodeTSCard = splittedCodeJS;
+const completeCodeTSCard = `import * as React from "react";
+import {
+ ExtFile,
+ Localization,
+ FileInputButton,
+ FileCard,
+ FilesUiProvider,
+ IconsSet,
+} from "@files-ui/react";
+import { Autocomplete, TextField, Button } from "@mui/material";
+import "./DemoGlobals.css";
+
+const DemoGlobalConfig = () => {
+ const [localization, setLocalization] = React.useState<
+ Localization | undefined
+ >(undefined);
+
+ const [darkModeOn, setDarkModeOn] = React.useState<boolean>(false);
+ const [otherIcons, setOtherIcons] = React.useState<boolean>(true);
+
+ const hadleSelect = (value: LanguageItem | null) => {
+ console.log(value);
+ setLocalization(value?.value);
+ };
+ const iconsConfig: IconsSet = {
+ //local resource
+ docx: "/other_icons/wordicon.png",
+ //external resource
+ pdf: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQDw14VqtuvUv74kiT1anhx6eRb_JjOXBxeqA&usqp=CAU",
+ };
+ return (
+ <FilesUiProvider
+ config={{
+ localization: localization,
+ darkMode: darkModeOn,
+ icons: otherIcons ? iconsConfig : undefined,
+ }}
+ >
+ <div className="demo-controls-container">
+ <Autocomplete
+ disablePortal
+ autoSelect
+ size="small"
+ onChange={(e, value) => hadleSelect(value as LanguageItem)}
+ id="combo-box-demo"
+ options={languages}
+ sx={{ width: 300 }}
+ getOptionLabel={(option) => option.language}
+ renderInput={(params) => (
+ <TextField {...params} label="Localization" />
+ )}
+ />
+ <Button
+ variant="contained"
+ onClick={() => setDarkModeOn((_darkModeOn) => !_darkModeOn)}
+ >
+ {darkModeOn ? "turn on light" : "turn off light"}
+ </Button>
+ <Button
+ variant="outlined"
+ onClick={() => setOtherIcons((_otherIcons) => !_otherIcons)}
+ >
+ {!otherIcons ? "Other icons" : "Default icons"}
+ </Button>
+ </div>
+ <div
+ className="demo-localization-container"
+ style={{
+ backgroundColor: darkModeOn ? "#121212" : "white",
+ }}
+ >
+ <div className="inputbutton-container">
+ <FileInputButton value={[]} />
+ </div>
+ <div className="filecard-container">
+ {extFiles.map((extFile, index) => (
+ <FileCard key={index} {...extFile} onDelete={() => {}} info />
+ ))}
+ </div>
+ </div>
+ </FilesUiProvider>
+};
+export default DemoGlobalConfig;
+
+interface LanguageItem {
+ language: string;
+ value: Localization;
+}
+
+const languages = [
+ { language: "Español: ES-es", value: "ES-es" },
+ { language: "English: EN-en", value: "EN-en" },
+ { language: "French: FR-fr", value: "FR-fr" },
+ { language: "Italian: IT-it", value: "IT-it" },
+ { language: "Portuguese: PT-pt", value: "PT-pt" },
+ { language: "Russian: RU-ru", value: "RU-ru" },
+ { language: "Chinese(simplified): ZH-cn", value: "ZH-cn" },
+ { language: "Chinese(traditional): ZH-hk", value: "ZH-hk" },
+];
+const extFiles: ExtFile[] = [
+ {
+ id: 0,
+ name: "file_global_conf.docx",
+ size: 28 * 1024,
+ errors: ["pdf not allowed", "file is too big"],
+ },
+ {
+ id: 1,
+ valid: false,
+ name: "file_global_conf.docx",
+
+ size: 28 * 1024,
+ errors: ["pdf not allowed", "file is too big"],
+ },
+ {
+ id: 2,
+ valid: true,
+ name: "file_global_conf.docx",
+ size: 28 * 1024,
+ },
+ {
+ id: 3,
+ valid: true,
+ name: "file_global_conf.pdf",
+ type: "application/pdf",
+ size: 28 * 1024,
+ uploadStatus: "preparing",
+ },
+ {
+ id: 4,
+ name: "file_global_conf.pdf",
+ type: "application/pdf",
+ size: 28 * 1024,
+ uploadStatus: "uploading",
+ progress: 28,
+ },
+ {
+ id: 5,
+ valid: true,
+ name: "file_global_conf.docx",
+ size: 28 * 1024,
+ uploadStatus: "aborted",
+ uploadMessage: "Upload was aborted",
+ },
+ {
+ id: 6,
+ valid: false,
+ name: "file_global_conf.pdf",
+ type: "application/pdf",
+ size: 28 * 1024,
+ uploadStatus: "error",
+ uploadMessage: "there was an error on the server",
+ },
+ {
+ id: 7,
+ valid: true,
+ name: "file_global_conf.docx",
+ size: 28 * 1024,
+ uploadStatus: "success",
+ uploadMessage: "files-ui <3",
+ },
+];`;
+const completeCodeJSCard = `import * as React from "react";
+import {
+ FileInputButton,
+ FileCard,
+ FilesUiProvider,
+} from "@files-ui/react";
+import { Autocomplete, TextField, Button } from "@mui/material";
+import "./DemoGlobals.css";
+
+const DemoGlobalConfig = () => {
+ const [localization, setLocalization] = React.useState(undefined);
+
+ const [darkModeOn, setDarkModeOn] = React.useState(false);
+ const [otherIcons, setOtherIcons] = React.useState(true);
+
+ const hadleSelect = (value) => {
+ console.log(value);
+ setLocalization(value?.value);
+ };
+ const iconsConfig = {
+ //local resource
+ docx: "/other_icons/wordicon.png",
+ //external resource
+ pdf: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQDw14VqtuvUv74kiT1anhx6eRb_JjOXBxeqA&usqp=CAU",
+ };
+ return (
+ <FilesUiProvider
+ config={{
+ localization: localization,
+ darkMode: darkModeOn,
+ icons: otherIcons ? iconsConfig : undefined,
+ }}
+ >
+ <div className="demo-controls-container">
+ <Autocomplete
+ disablePortal
+ autoSelect
+ size="small"
+ onChange={(e, value) => hadleSelect(value as LanguageItem)}
+ id="combo-box-demo"
+ options={languages}
+ sx={{ width: 300 }}
+ getOptionLabel={(option) => option.language}
+ renderInput={(params) => (
+ <TextField {...params} label="Localization" />
+ )}
+ />
+ <Button
+ variant="contained"
+ onClick={() => setDarkModeOn((_darkModeOn) => !_darkModeOn)}
+ >
+ {darkModeOn ? "turn on light" : "turn off light"}
+ </Button>
+ <Button
+ variant="outlined"
+ onClick={() => setOtherIcons((_otherIcons) => !_otherIcons)}
+ >
+ {!otherIcons ? "Other icons" : "Default icons"}
+ </Button>
+ </div>
+ <div
+ className="demo-localization-container"
+ style={{
+ backgroundColor: darkModeOn ? "#121212" : "white",
+ }}
+ >
+ <div className="inputbutton-container">
+ <FileInputButton value={[]} />
+ </div>
+ <div className="filecard-container">
+ {extFiles.map((extFile, index) => (
+ <FileCard key={index} {...extFile} onDelete={() => {}} info />
+ ))}
+ </div>
+ </div>
+ </FilesUiProvider>
+};
+export default DemoGlobalConfig;
+
+const languages = [
+ { language: "Español: ES-es", value: "ES-es" },
+ { language: "English: EN-en", value: "EN-en" },
+ { language: "French: FR-fr", value: "FR-fr" },
+ { language: "Italian: IT-it", value: "IT-it" },
+ { language: "Portuguese: PT-pt", value: "PT-pt" },
+ { language: "Russian: RU-ru", value: "RU-ru" },
+ { language: "Chinese(simplified): ZH-cn", value: "ZH-cn" },
+ { language: "Chinese(traditional): ZH-hk", value: "ZH-hk" },
+];
+const extFiles = [
+ {
+ id: 0,
+ name: "file_global_conf.docx",
+ size: 28 * 1024,
+ errors: ["pdf not allowed", "file is too big"],
+ },
+ {
+ id: 1,
+ valid: false,
+ name: "file_global_conf.docx",
+
+ size: 28 * 1024,
+ errors: ["pdf not allowed", "file is too big"],
+ },
+ {
+ id: 2,
+ valid: true,
+ name: "file_global_conf.docx",
+ size: 28 * 1024,
+ },
+ {
+ id: 3,
+ valid: true,
+ name: "file_global_conf.pdf",
+ type: "application/pdf",
+ size: 28 * 1024,
+ uploadStatus: "preparing",
+ },
+ {
+ id: 4,
+ name: "file_global_conf.pdf",
+ type: "application/pdf",
+ size: 28 * 1024,
+ uploadStatus: "uploading",
+ progress: 28,
+ },
+ {
+ id: 5,
+ valid: true,
+ name: "file_global_conf.docx",
+ size: 28 * 1024,
+ uploadStatus: "aborted",
+ uploadMessage: "Upload was aborted",
+ },
+ {
+ id: 6,
+ valid: false,
+ name: "file_global_conf.pdf",
+ type: "application/pdf",
+ size: 28 * 1024,
+ uploadStatus: "error",
+ uploadMessage: "there was an error on the server",
+ },
+ {
+ id: 7,
+ valid: true,
+ name: "file_global_conf.docx",
+ size: 28 * 1024,
+ uploadStatus: "success",
+ uploadMessage: "files-ui <3",
+ },
+];`;
diff --git a/src/components/demo-components/global-demo/DemoGlobalConfig.tsx b/src/components/demo-components/global-demo/DemoGlobalConfig.tsx
index 43ddf3fcb3367e03ef0d18e01b25aaf14a6ba495..6ae26eadf2c96c25ce4225b1b2db5427aeebde3e 100644
--- a/src/components/demo-components/global-demo/DemoGlobalConfig.tsx
+++ b/src/components/demo-components/global-demo/DemoGlobalConfig.tsx
@@ -7,10 +7,10 @@ import {
FileInputButton,
FileCard,
FilesUiProvider,
+ IconsSet,
} from "../../../files-ui";
-import { Autocomplete, TextField } from "@mui/material";
-import "./DemoLocalization.css";
-import Button from "@mui/material/Button";
+import { Autocomplete, TextField, Button } from "@mui/material";
+import "./DemoGlobals.css";
const DemoGlobalConfig = (props: { card: boolean }) => {
const [localization, setLocalization] = React.useState<
@@ -24,30 +24,22 @@ const DemoGlobalConfig = (props: { card: boolean }) => {
console.log(value);
setLocalization(value?.value);
};
- const iconsConfig = {
+ const iconsConfig: IconsSet = {
//local resource
docx: "/other_icons/wordicon.png",
//external resource
pdf: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQDw14VqtuvUv74kiT1anhx6eRb_JjOXBxeqA&usqp=CAU",
};
- return (
- <FilesUiProvider
- config={{
- localization: localization,
- darkMode: darkModeOn,
- icons: otherIcons ? iconsConfig : undefined,
- }}
- >
-
- <div
- style={{
- display: "flex",
- flexWrap:"wrap",
- justifyContent: "space-evenly",
- width: "100%",
- gap:"5px"
- }}
- >
+ if (props.card)
+ return (
+ <FilesUiProvider
+ config={{
+ localization: localization,
+ darkMode: darkModeOn,
+ icons: otherIcons ? iconsConfig : undefined,
+ }}
+ >
+ <div className="demo-controls-container">
<Autocomplete
disablePortal
autoSelect
@@ -74,65 +66,80 @@ const DemoGlobalConfig = (props: { card: boolean }) => {
{!otherIcons ? "Other icons" : "Default icons"}
</Button>
</div>
-
- {props.card ? (
- <div
- className="demo-localization-container"
- style={{
- backgroundColor: darkModeOn ? "#121212" : "white",
- padding: "10px",
- }}
- >
- <div className="inputbutton-container">
- <FileInputButton
- //style={{ width: "400px" }}
- value={[]}
- //localization={localization}
- ></FileInputButton>
- </div>
-
- <div className="filecard-container">
- {extFiles.map((extFile, index) => (
- <FileCard
- key={index}
- {...extFile}
- localization={localization}
- onDelete={() => {}}
- info
- />
- ))}
- </div>
- </div>
- ) : (
- <div className="demo-localization-container" style={{
+ <div
+ className="demo-localization-container"
+ style={{
backgroundColor: darkModeOn ? "#121212" : "white",
- padding: "10px",
- }}>
- <div className="dropzone-filemosaic-container">
- <Dropzone
- //value={[]}
- accept={"image/*"}
- maxFileSize={28 * 1024 * 1024}
- maxFiles={10}
- //style={{ width: "400px" }}
- localization={localization}
- ></Dropzone>
- </div>
-
- <div className="dropzone-filemosaic-container">
- {extFiles.map((extFile, index) => (
- <FileMosaic
- key={index}
- {...extFile}
- localization={localization}
- onDelete={() => {}}
- info
- />
- ))}
- </div>
+ }}
+ >
+ <div className="inputbutton-container">
+ <FileInputButton value={[]} />
+ </div>
+ <div className="filecard-container">
+ {extFiles.map((extFile, index) => (
+ <FileCard key={index} {...extFile} onDelete={() => {}} info />
+ ))}
</div>
- )}
-
+ </div>
+ </FilesUiProvider>
+ );
+ return (
+ <FilesUiProvider
+ config={{
+ localization: localization,
+ darkMode: darkModeOn,
+ icons: otherIcons ? iconsConfig : undefined,
+ }}
+ >
+ <div className="demo-controls-container">
+ <Autocomplete
+ disablePortal
+ autoSelect
+ size="small"
+ onChange={(e, value) => hadleSelect(value as LanguageItem)}
+ id="combo-box-demo"
+ options={languages}
+ sx={{ width: 300 }}
+ getOptionLabel={(option) => option.language}
+ renderInput={(params) => (
+ <TextField {...params} label="Localization" />
+ )}
+ />
+ <Button
+ variant="contained"
+ onClick={() => setDarkModeOn((_darkModeOn) => !_darkModeOn)}
+ >
+ {darkModeOn ? "turn on light" : "turn off light"}
+ </Button>
+ <Button
+ variant="outlined"
+ onClick={() => setOtherIcons((_otherIcons) => !_otherIcons)}
+ >
+ {!otherIcons ? "Other icons" : "Default icons"}
+ </Button>
+ </div>
+
+ <div
+ className="demo-localization-container"
+ style={{
+ backgroundColor: darkModeOn ? "#121212" : "white",
+ }}
+ >
+ <div className="dropzone-filemosaic-container">
+ <Dropzone
+ value={[]}
+ accept={"image/*"}
+ maxFileSize={28 * 1024 * 1024}
+ maxFiles={10}
+ ></Dropzone>
+ </div>
+
+ <div className="dropzone-filemosaic-container">
+ {extFiles.map((extFile, index) => (
+ <FileMosaic key={index} {...extFile} onDelete={() => {}} info />
+ ))}
+ </div>
+ </div>
</FilesUiProvider>
);
};
diff --git a/src/components/demo-components/global-demo/DemoLocalization.css b/src/components/demo-components/global-demo/DemoGlobals.css
similarity index 82%
rename from src/components/demo-components/global-demo/DemoLocalization.css
rename to src/components/demo-components/global-demo/DemoGlobals.css
index e0ec24b80d681bd778d5d41f611346508d99e696..fda985bad43f3f10feb066544191c1b5d324107f 100644
--- a/src/components/demo-components/global-demo/DemoLocalization.css
+++ b/src/components/demo-components/global-demo/DemoGlobals.css
@@ -1,9 +1,18 @@
+.demo-controls-container {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-evenly;
+ width: 100%;
+ gap: 5px;
+}
+
.demo-localization-container {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 50vh;
+ padding: 10px;
}
.dropzone-filemosaic-container {
diff --git a/src/data/FilesUiConfigAPIRows.tsx b/src/data/FilesUiConfigAPIRows.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..53d2ebdf36e7686c9409b57b242641623a7cc825
--- /dev/null
+++ b/src/data/FilesUiConfigAPIRows.tsx
@@ -0,0 +1,22 @@
+import TypeHighlight from "../components/typeHighlight/TypeHighlight";
+
+export const FilesUiConfigAPIRows = [
+ {
+ name: "success",
+ type: <TypeHighlight np>boolean</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: <>If true, it means that the request was successful.</>,
+ },
+ {
+ name: "message",
+ type: <TypeHighlight np>string</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: <>A message that describes the result of the request.</>,
+ },
+ {
+ name: "payload",
+ type: <TypeHighlight np>Object</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: <>The response of the server.</>,
+ },
+];
diff --git a/src/data/IconsMapAPIRows.tsx b/src/data/IconsMapAPIRows.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..041c02866120ec2d27b379e4b804cd349fdaea30
--- /dev/null
+++ b/src/data/IconsMapAPIRows.tsx
@@ -0,0 +1,11 @@
+import TypeHighlight from "../components/typeHighlight/TypeHighlight";
+
+export const IconsMapAPIRows = [
+ {
+ name: "success",
+ type: <TypeHighlight np>boolean</TypeHighlight>,
+ default: <TypeHighlight np></TypeHighlight>,
+ description: <>If true, it means that the request was successful.</>,
+ },
+
+];
diff --git a/src/pages/demo/DropzoneDemoPage.jsx b/src/pages/demo/DropzoneDemoPage.jsx
index 64640a975a1dfb9346dce0db8151d977414bf1d2..e2d5eb9d3cd7f939ace705beaaf894dc296499f6 100644
--- a/src/pages/demo/DropzoneDemoPage.jsx
+++ b/src/pages/demo/DropzoneDemoPage.jsx
@@ -63,7 +63,7 @@ const DropzoneDemoPage = (props) => {
The default <CodeHighlight>{'<input type="file"/>'}</CodeHighlight> is
just a quite boring button. That's why we present the{" "}
<CodeHighlight>{"<Dropzone/>"}</CodeHighlight>
- component is an special <CodeHighlight>input</CodeHighlight> enhanced
+ component as an special <CodeHighlight>input</CodeHighlight> enhanced
by the ability to allow users to drag and drop files there or choose
files from a file dialog and also to validate an upload them.
</MainParagraph>
@@ -91,8 +91,13 @@ const DropzoneDemoPage = (props) => {
</ol>
</DescParagraph>
<DescParagraph>
- It's meant to be an improved version of the "react-dropzone" and
- "dropzone" packages.
+ It's meant to be an improved version of the{" "}
+ <AnchorToTab href="https://react-dropzone.js.org/">
+ react-dropzone
+ </AnchorToTab>{" "}
+ and{" "}
+ <AnchorToTab href="https://docs.dropzone.dev/">dropzone</AnchorToTab>{" "}
+ packages.
</DescParagraph>
<section id="basic-dropzone">
diff --git a/src/pages/demo/FileCardDemoPage.jsx b/src/pages/demo/FileCardDemoPage.jsx
index 30cad0d1e0e2f61ed263342dad20613e813cd3ed..e05a53f6a7c7c4d96ba9326147e72eeeaa361d7f 100644
--- a/src/pages/demo/FileCardDemoPage.jsx
+++ b/src/pages/demo/FileCardDemoPage.jsx
@@ -309,8 +309,8 @@ const FileCardDemoPage = (props) => {
You can check an example here:
<ul>
<li>
- <AnchorToTab href="/file-download">
- {"Download a File"}
+ <AnchorToTab href="/file-download#differenthost2">
+ {"Download a File from different host"}
</AnchorToTab>
</li>
</ul>
diff --git a/src/pages/demo/FileInputButtonDemoPage.tsx b/src/pages/demo/FileInputButtonDemoPage.tsx
index 8fb9c108a7d19dd966ba0f276b062c572b5fd554..6060193bbaab0b631f986dc4f3ed231fc1ee3cbd 100644
--- a/src/pages/demo/FileInputButtonDemoPage.tsx
+++ b/src/pages/demo/FileInputButtonDemoPage.tsx
@@ -61,7 +61,7 @@ const FileInputButtonDemoPage: React.FC<FileInputButtonDemoPageProps> = (
The default <CodeHighlight>{'<input type="file"/>'}</CodeHighlight> is
just a quite boring button. That's why we present the
<CodeHighlight>{"<FileInputButton/>"}</CodeHighlight> component which
- is an special <CodeHighlight>input</CodeHighlight> enhanced by the
+ as an special <CodeHighlight>input</CodeHighlight> enhanced by the
ability to allow users to choose files from a file dialog and also to
validate an upload them.
</MainParagraph>
diff --git a/src/pages/demo/FileMosaicDemoPage.jsx b/src/pages/demo/FileMosaicDemoPage.jsx
index f879a6cef50c34065d885c04056ebc90aa240cef..4ca66f30ca8da67cf23579adf82ff66d503e7547 100644
--- a/src/pages/demo/FileMosaicDemoPage.jsx
+++ b/src/pages/demo/FileMosaicDemoPage.jsx
@@ -323,8 +323,8 @@ const FileMosaicDemoPage = (props) => {
You can check an example here:
<ul>
<li>
- <AnchorToTab href="/file-download">
- {"Download a File"}
+ <AnchorToTab href="/file-download#differenthost2">
+ {"Download a File from different host"}
</AnchorToTab>
</li>
</ul>
diff --git a/src/pages/download-page/FileDownloadPage.tsx b/src/pages/download-page/FileDownloadPage.tsx
index ef7e7db102c78cc98fb9e5a2a35529cdb259b067..9f6d5803485aec10276291acf9157dca9e3d7dc3 100644
--- a/src/pages/download-page/FileDownloadPage.tsx
+++ b/src/pages/download-page/FileDownloadPage.tsx
@@ -99,7 +99,7 @@ const FileDownloadPage = () => {
setting the <CodeHighlight>onDownload</CodeHighlight> prop. There
is an example of how to do it with pure javascript.
<br />
- The approach we use here can be summerized in 5 steps:
+ The approach we use here can be summerized in 4 steps:
<ol>
<li>
Make a GET request with{" "}
@@ -110,7 +110,7 @@ const FileDownloadPage = () => {
<AnchorToTab href="https://axios-http.com/">
axios
</AnchorToTab>{" "}
- or any other way to fetch resources from internet.
+ or any other way to fetch resources from internet).
</li>
<li>
Create an{" "}
@@ -136,7 +136,7 @@ const FileDownloadPage = () => {
document.
</li>
</ol>
- resources)
+
</DescParagraph>
<Paper
variant="outlined"
diff --git a/src/pages/global-config-page/GlobalConfigPage.tsx b/src/pages/global-config-page/GlobalConfigPage.tsx
index 102d442a2d2eca0b11601e79bc9103de0c85cd0d..79e2f84db3a5dcc502f474fcd7be744831cb6056 100644
--- a/src/pages/global-config-page/GlobalConfigPage.tsx
+++ b/src/pages/global-config-page/GlobalConfigPage.tsx
@@ -14,6 +14,7 @@ import RightMenuContainer from "../../components/layout-pages/RightMenuContainer
import RightMenu from "../../components/RightMenu/RightMenu";
import DemoGlobalConfig from "../../components/demo-components/global-demo/DemoGlobalConfig";
import FileCardMosaicSwitch from "../../components/switch/FileCardMosaicSwitch";
+import CodeDemoGlobalConfig from "../../components/demo-components/global-demo/CodeDemoGlobalConfig";
interface GlobalConfigPageProps {}
const GlobalConfigPage: React.FC<GlobalConfigPageProps> = (
@@ -49,25 +50,26 @@ const GlobalConfigPage: React.FC<GlobalConfigPageProps> = (
Also, you can add your custom icons sources.
</MainParagraph>
<DescParagraph>
- This feature is possible thanks to the{" "}
+ This feature is possible thanks to the React{" "}
<AnchorToTab href="https://react.dev/reference/react#context-hooks">
Context hooks
</AnchorToTab>
.
</DescParagraph>
<Alert severity="info">
- <AlertTitle> FileMosaic </AlertTitle>
+ <AlertTitle> Context and Providers </AlertTitle>
+ When it comes to Context and Providers you can think that the
+ provider is just the in charge one to pass globally a "prop". So you
+ can avoid the set it individually on every component.
+ <br></br>
For using this feature you don't need to be an expert on{" "}
<TypeHighlight>React.Context</TypeHighlight>.
</Alert>
- <section id="FilesUiProvider">
- <SubTitle content="FilesUiProvider" />
+ <section id="config">
+ <SubTitle content="Config" />
<DescParagraph>
- When it comes to Context and Providers you can think that the
- provider is just the in charge one to pass globally a "prop". So
- you can avoid the set it individually on every component.
- <br></br>
- In the following themo we will set the 3 allowed params:
+ In the following demo we will wrap the complete app and will set
+ the 3 allowed params:
<ul>
<li>darkMode</li>
<li>localization</li>
@@ -95,28 +97,25 @@ const GlobalConfigPage: React.FC<GlobalConfigPageProps> = (
>
<DemoGlobalConfig card={component === "FileCard"} />
</Paper>
- {/* <CodeJSFileMosaicLocalization card={component === "FileCard"} /> */}
+
+ <CodeDemoGlobalConfig />
<Alert severity="info">
- <AlertTitle> FileMosaic </AlertTitle>
- This demo is a combination of 3 samples that you can find For
- completeness, these examples include{" "}
- <CodeHighlight>{`<FileMosaic/>`} </CodeHighlight>
- component for showing the files selected by the user with minimun
- props too. For further information of this component check out the{" "}
- <AnchorToTab href="/components/filemosaic">
- FileMosaic
- </AnchorToTab>{" "}
- page.
- </Alert>
- <Alert severity="info">
- <AlertTitle>
- {" "}
- config prop on {"<FIlesUiProvider>...</FIlesUiProvider>"}{" "}
- </AlertTitle>
- For further information of this data type check out the{" "}
- <AnchorToTab href="/types#globalconfig">config type</AnchorToTab>{" "}
- page.
+ This demo is a combination of other samples that you can find in
+ their respective pages. For further information about the data
+ types involved you can visit:
+ <ul>
+ <li>
+ <AnchorToTab href="/types#filesuiconfig">
+ FilesUIConfig type page
+ </AnchorToTab>
+ </li>
+ <li>
+ <AnchorToTab href="/types#iconsset">
+ IconsSet type page
+ </AnchorToTab>
+ </li>
+ </ul>
</Alert>
</section>
</MainContentContainer>
@@ -137,17 +136,7 @@ export default GlobalConfigPage;
const rightMenuItems = [
{
id: 0,
- label: "Localization",
- referTo: "/file-download#samehost",
- },
- {
- id: 1,
- label: "Dark mode",
- referTo: "/file-download#samehost",
- },
- {
- id: 2,
- label: "Custom file icons",
- referTo: "/file-download#samehost",
+ label: "FilesUiProvider",
+ referTo: "/global-config#config",
},
];
diff --git a/src/pages/types-page/TypesPage.jsx b/src/pages/types-page/TypesPage.jsx
index 21ca8465d6a66ccf299aa7cb62103d8bf16b33ec..c33bd6ce5c79d23e84b38bda915c69b312c4b1cd 100644
--- a/src/pages/types-page/TypesPage.jsx
+++ b/src/pages/types-page/TypesPage.jsx
@@ -1,5 +1,6 @@
import { Highlighter } from "rc-highlight";
import * as React from "react";
+import DescParagraph from "../../components/demo-components/desc-paragraph/DescParagraph";
import SubTitle from "../../components/demo-components/sub-title/SubTitle";
//import DescParagraph from "../../components/demo-components/desc-paragraph/DescParagraph";
import MainContentContainer from "../../components/layout-pages/MainContentContainer";
@@ -12,8 +13,10 @@ import AnchorToTab from "../../components/util-components/AnchorToTab";
import { ActionButtonItemAPIRows } from "../../data/ActionButtonItemAPIRows";
import { ActionButtonsAPIRows } from "../../data/ActionButtonsAPIRows";
import { ExtFileAPIRows } from "../../data/ExtFileAPIRows";
+//import { FilesUiConfigAPIRows } from "../../data/FilesUiConfigAPIRows";
import { FooterConfigAPIRows } from "../../data/FooterConfigAPIRows";
import { HeaderConfigAPIRows } from "../../data/HeaderConfigAPIRows";
+//import { IconsMapAPIRows } from "../../data/IconsMapAPIRows";
import { ServerResponseAPIRows } from "../../data/ServerResponseAPIRows";
import { UploadConfigAPIRows } from "../../data/UploadConfigAPIRows";
import { ValidateFileResponseAPIrows } from "../../data/ValidateFileResponseAPIrows";
@@ -67,12 +70,21 @@ const rightMenuItems = [
label: "UPLOADSTATUS",
referTo: "/types#uploadstatus",
},
+ {
+ id: 9,
+ label: "FilesUiConfig",
+ referTo: "/types#filesuiconfig",
+ },
+ {
+ id: 10,
+ label: "IconsSet",
+ referTo: "/types#iconsset",
+ },
];
const TypesPage = (props) => {
-
-const [user,dispatch] = React.useContext(UserContext);
-const darkMode = user.darkMode;
+ const [user, ] = React.useContext(UserContext);
+ const darkMode = user.darkMode;
const [selectedItem, setSelectedItem] = React.useState(0);
@@ -181,6 +193,45 @@ const darkMode = user.darkMode;
{UPLOADSTATUSCODE}
</Highlighter>
</section>
+ <section id="filesuiconfig">
+ <SubTitle content={"FilesUIConfig"} />{" "}
+ <DescParagraph>
+ Global configuration for Files UI components
+ </DescParagraph>
+ <Highlighter
+ style={{
+ margin: "20px 0",
+ fontSize: "15px",
+ lineHeight: "",
+ }}
+ onCopyToClipboard={(code_) => {
+ console.log("code copied to clipboard: ");
+ console.log(code_);
+ }}
+ >
+ {FilesUIConfigCODE}
+ </Highlighter>
+ </section>
+ <section id="iconsset">
+
+ <SubTitle content={"IconsSet"} />{" "}
+ <DescParagraph>
+ Data type that keeps track of all keys of addmited mime types.
+ </DescParagraph>
+ <Highlighter
+ style={{
+ margin: "20px 0",
+ fontSize: "15px",
+ lineHeight: "",
+ }}
+ onCopyToClipboard={(code_) => {
+ console.log("code copied to clipboard: ");
+ console.log(code_);
+ }}
+ >
+ {IconsSetCode}
+ </Highlighter>
+ </section>
</MainContentContainer>
</MainLayoutPage>{" "}
<RightMenuContainer>
@@ -195,4 +246,95 @@ const darkMode = user.darkMode;
);
};
export default TypesPage;
+
const UPLOADSTATUSCODE = `export type UPLOADSTATUS = "preparing" | "aborted" | "uploading" | "success" | "error";`;
+
+const FilesUIConfigCODE = `export type FilesUIConfig = {
+ // If true, dark mode colors are used in FileMosaic and FIleCard components.
+ darkMode?: boolean;
+
+ // Set of icons to override the existing ones
+ icons?: IconsConfig;
+
+ // The language in which text labels are shown.
+ localization?: Localization;
+}`;
+
+const IconsSetCode= `export type IconsSet = {
+ aac?: string;
+ accdb?: string;
+ abw?: string;
+ arc?: string;
+ avi?: string;
+ azw?: string;
+ octet?: string;
+ bmp?: string;
+ bz?: string;
+ bz2?: string;
+ cda?: string;
+ csh?: string;
+ css?: string;
+ csv?: string;
+ docx?: string;
+ drawio?: string;
+ eot?: string;
+ epub?: string;
+ gzip?: string;
+ gif?: string;
+ html?: string;
+ icalendar?: string;
+ jar?: string;
+ jpeg?: string;
+ javascript?: string;
+ json?: string;
+ jsonld?: string;
+ midi?: string;
+ mp3?: string;
+ mp4?: string;
+ mpeg?: string;
+ mpkg?: string;
+ mp2t?: string;
+ odp?: string;
+ ods?: string;
+ odt?: string;
+ oga?: string;
+ ogv?: string;
+ ogx?: string;
+ opus?: string;
+ otf?: string;
+ png?: string;
+ pdf?: string;
+ php?: string;
+ pptx?: string;
+ psd?: string;
+ rar?: string;
+ rtf?: string;
+ sass?: string;
+ sh?: string;
+ swf?: string;
+ tar?: string;
+ tiff?: string;
+ ttf?: string;
+ typescript?: string;
+ text?: string;
+ vsd?: string;
+ wav?: string;
+ weba?: string;
+ webm?: string;
+ webp?: string;
+ woff?: string;
+ wma?: string;
+ wmv?: string;
+ xhtml?: string;
+ xlsx?: string;
+ xml?: string;
+ xul?: string;
+ zip?: string;
+ sevenzip?: string;
+ python?: string;
+ java?: string;
+ react?: string;
+ vue?: string;
+ //fallback when file type is not here
+ fallBack?: string;
+}`;
\ No newline at end of file
diff --git a/src/pages/usage/UsagePage.jsx b/src/pages/usage/UsagePage.jsx
index f1193068bf5fc8fc1182ce88baa0e9841907f40d..7e80ce46258e03039b7efd765d5e94bd8a7b8932 100644
--- a/src/pages/usage/UsagePage.jsx
+++ b/src/pages/usage/UsagePage.jsx
@@ -69,7 +69,8 @@ const UsagePage = (props) => {
</DescParagraph>
<iframe
title="codesandbox"
- src="https://codesandbox.io/embed/dropzone-ui-basic-3j01v"
+ // add ".../embed/..."
+ src="https://codesandbox.io/embed/basic-demo-js-blssi1"
//src="https://codesandbox.io/embed/u9sy1h?hidenavigation=1&fontsize=14&view=preview"
//src="https://codesandbox.io/s/material-ui-u9sy1h"
style={{