diff --git a/src/components/demo-components/dropzone-demo/BasicDropzoneCodeJS.jsx b/src/components/demo-components/dropzone-demo/BasicDropzoneCodeJS.jsx
index 8de8378c08e8d7c284cc5714702c5db0d9fd2f4c..73d271fe79b40a69dff611025989632bc0a47a06 100644
--- a/src/components/demo-components/dropzone-demo/BasicDropzoneCodeJS.jsx
+++ b/src/components/demo-components/dropzone-demo/BasicDropzoneCodeJS.jsx
@@ -1,19 +1,25 @@
import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
-const BasicDropzoneCode = ({ splittedOnly = false }) => {
+const BasicDropzoneCode = ({ splittedOnly = false, button=false }) => {
return (
<ShowDemoCode
splittedOnly={splittedOnly}
- codeCompleteJS={completeCodeJS}
- codeCompleteTS={completeCodeTS}
+ codeCompleteJS={button?splittedCodeJSButton:completeCodeJS}
+ codeCompleteTS={button?splittedCodeTSButton:completeCodeTS}
codeSandboxJS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
codeSandboxTS="https://codesandbox.io/s/dropzone-ui-basic-3j01v"
- codeSplittedJS={splittedCodeJS}
- codeSplittedTS={splittedCodeTS}
+ codeSplittedJS={button?splittedCodeJSButton:splittedCodeJS}
+ codeSplittedTS={button?splittedCodeTSButton:splittedCodeTS}
/>
);
};
export default BasicDropzoneCode;
+const splittedCodeJSButton = `<FileInputButton onChange={updateFiles} value={files} />
+{files.map((file) => (
+ <FileCard key={file.id} {...file} onDelete={removeFile} info />
+))}`;
+const splittedCodeTSButton = splittedCodeJSButton;
+//////////
const splittedCodeJS = `<Dropzone
onChange={updateFiles}
value={files}
diff --git a/src/components/demo-components/dropzone-demo/BasicDropzoneDemo.jsx b/src/components/demo-components/dropzone-demo/BasicDropzoneDemo.jsx
index 29bd9d13c7c74843ce757b2c85f0a6f2f56bb05a..c9f440ed1c814309ee0895965c3c4a540089c1cd 100644
--- a/src/components/demo-components/dropzone-demo/BasicDropzoneDemo.jsx
+++ b/src/components/demo-components/dropzone-demo/BasicDropzoneDemo.jsx
@@ -1,6 +1,11 @@
-import { Dropzone, FileMosaic } from "../../../files-ui";
+import {
+ Dropzone,
+ FileCard,
+ FileInputButton,
+ FileMosaic,
+} from "../../../files-ui";
import * as React from "react";
-export default function BasicDemoDropzone() {
+export default function BasicDemoDropzone({ button }) {
const [files, setFiles] = React.useState([]);
const updateFiles = (incommingFiles) => {
//do something with the files
@@ -10,6 +15,38 @@ export default function BasicDemoDropzone() {
const removeFile = (id) => {
setFiles(files.filter((x) => x.id !== id));
};
+ if (button) {
+ return (
+ <div
+ style={{
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "space-evenly",
+ gap: "10px",
+ flexWrap: "wrap",
+ width: "100%",
+ }}
+ >
+ <FileInputButton onChange={updateFiles} value={files} />
+ {files.length > 0 && (
+ <div
+ style={{
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ flexDirection: "column",
+ gap:"5px",
+ minWidth:"50%"
+ }}
+ >
+ {files.map((file) => (
+ <FileCard key={file.id} {...file} onDelete={removeFile} info />
+ ))}
+ </div>
+ )}
+ </div>
+ );
+ }
return (
<Dropzone onChange={updateFiles} value={files}>
{files.length > 0 &&
diff --git a/src/pages/demo/DropzoneDemoPage.jsx b/src/pages/demo/DropzoneDemoPage.jsx
index bcfc979f2e3058ac3be2bce5b1101711c21ae009..935aac1ca78027994b5016d2fc9e385a202ebfa0 100644
--- a/src/pages/demo/DropzoneDemoPage.jsx
+++ b/src/pages/demo/DropzoneDemoPage.jsx
@@ -20,6 +20,7 @@ import MainParagraph from "../../components/paragraph-main/MainParagraph";
import RightMenu from "../../components/RightMenu/RightMenu";
import TypeHighlight from "../../components/typeHighlight/TypeHighlight";
import AnchorToTab from "../../components/util-components/AnchorToTab";
+
import DemoDropzoneFooterConfig from "../../components/demo-components/dropzone-demo/DemoDropzoneFooterConfig";
import DemoDropzoneHeaderConfig from "../../components/demo-components/dropzone-demo/DemoDropzoneHeaderConfig";
import CodeDemoDropzoneHeaderConfig from "../../components/demo-components/dropzone-demo/CodeDemoDropzoneHeaderConfig";
@@ -46,9 +47,11 @@ const DropzoneDemoPage = (props) => {
<MainTitle>Dropzone</MainTitle>
<MainParagraph>
- The "dropzone" component is a special{" "}
- <CodeHighlight>input</CodeHighlight> enhanced by the ability to allow
- users to drag and drop files there or choose files from a file dialog.
+ The default <CodeHighlight>{'<input type="file"/>'}</CodeHighlight> is
+ just a quite boring button. That's why we present the"dropzone"
+ component is 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>
<DescParagraph>
@@ -81,7 +84,7 @@ const DropzoneDemoPage = (props) => {
<section id="basic-dropzone">
<SubTitle content="Basic Dropzone" />
<DescParagraph>
- In this demo we set dropzone with the minimum props that allows you
+ In this demo we set the <CodeHighlight>{"<Dropzone/>"}</CodeHighlight> with the minimum props that allows you
to get your task done fast. These props are{" "}
<CodeHighlight>onChange</CodeHighlight> and{" "}
<CodeHighlight>value</CodeHighlight>.
diff --git a/src/pages/demo/FileInputButtonDemoPage.tsx b/src/pages/demo/FileInputButtonDemoPage.tsx
index 144f5d4a4ac9a542583b82c3b69d702ace3a73e8..975fc1c13c3fa553d9a854da9ecded0ccb7c07f7 100644
--- a/src/pages/demo/FileInputButtonDemoPage.tsx
+++ b/src/pages/demo/FileInputButtonDemoPage.tsx
@@ -1,10 +1,715 @@
+import Alert from "@mui/material/Alert/Alert";
+import AlertTitle from "@mui/material/AlertTitle/AlertTitle";
+import Paper from "@mui/material/Paper";
import * as React from "react";
-interface FileInputButtonDemoPageProps{}
-const FileInputButtonDemoPage:React.FC<FileInputButtonDemoPageProps> = (props:FileInputButtonDemoPageProps) =>{
- return(
- <div>
- FileInputButtonDemoPage
- </div>
- )
-}
-export default FileInputButtonDemoPage;
\ No newline at end of file
+import CodeHighlight from "../../components/codeHighlight/CodeHighlight";
+import DescParagraph from "../../components/demo-components/desc-paragraph/DescParagraph";
+import SubTitle from "../../components/demo-components/sub-title/SubTitle";
+import MainContentContainer from "../../components/layout-pages/MainContentContainer";
+import MainTitle from "../../components/main-title/MainTitle";
+import MainParagraph from "../../components/paragraph-main/MainParagraph";
+import TypeHighlight from "../../components/typeHighlight/TypeHighlight";
+import AnchorToTab from "../../components/util-components/AnchorToTab";
+import RightMenuContainer from "../../components/layout-pages/RightMenuContainer";
+import RightMenu from "../../components/RightMenu/RightMenu";
+
+import BasicDropzoneCodeJS from "../../components/demo-components/dropzone-demo/BasicDropzoneCodeJS";
+import DemoDropzoneFooterConfig from "../../components/demo-components/dropzone-demo/DemoDropzoneFooterConfig";
+import DemoDropzoneHeaderConfig from "../../components/demo-components/dropzone-demo/DemoDropzoneHeaderConfig";
+import CodeDemoDropzoneHeaderConfig from "../../components/demo-components/dropzone-demo/CodeDemoDropzoneHeaderConfig";
+import CodeDemoDropzoneFooterConfig from "../../components/demo-components/dropzone-demo/CodeDemoDropzoneFooterConfig";
+import DemoDropzoneStyling from "../../components/demo-components/dropzone-demo/DemoDropzoneStyling";
+import DemoDropzoneBehaviour from "../../components/demo-components/dropzone-demo/DemoDropzoneBehaviour";
+import DemoDropzoneLabel from "../../components/demo-components/dropzone-demo/DemoDropzoneLabel";
+import DemoDropzoneDropLayer from "../../components/demo-components/dropzone-demo/DemoDropzoneDropLayer";
+import DemoDropzoneClickable from "../../components/demo-components/dropzone-demo/DemoDropzoneClickable";
+import DemoDropzoneDisabled from "../../components/demo-components/dropzone-demo/DemoDropzoneDisabled";
+import DemoDropzoneRipple from "../../components/demo-components/dropzone-demo/DemoDropzoneRipple";
+import CodeDemoDropzoneStyling from "../../components/demo-components/dropzone-demo/CodeDropzoneDemoStyling";
+import CodeDemoDropzoneRipple from "../../components/demo-components/dropzone-demo/CodeDemoDropzoneRipple";
+import CodeDemoDropzoneDisabled from "../../components/demo-components/dropzone-demo/CodeDemoDropzoneDisabled";
+import CodeDemoDropzoneClickable from "../../components/demo-components/dropzone-demo/CodeDemoDropzoneClickable";
+import CodeDemoDropzoneDropLayer from "../../components/demo-components/dropzone-demo/CodeDemoDropzoneDropLayer";
+import CodeDemoDropzoneBehaviour from "../../components/demo-components/dropzone-demo/CodeDemoDropzoneBehaviour";
+import CodeDemoDropzoneLabel from "../../components/demo-components/dropzone-demo/CodeDropzoneDemoLabel";
+import BasicDemoDropzone from "../../components/demo-components/dropzone-demo/BasicDropzoneDemo";
+import DemoDropzoneValidation from "../../components/demo-components/dropzone-demo/DemoDropzoneValidation";
+import CodeDemoDropzoneValidation from "../../components/demo-components/dropzone-demo/CodeDemoDropzoneValidation";
+import DemoDropzoneCustomValidation from "../../components/demo-components/dropzone-demo/DemoDropzoneCustomValidation";
+import CodeDemoDropzoneCustomValidation from "../../components/demo-components/dropzone-demo/CodeDemoDropzoneCustomValidation";
+import DemoDropzoneUploading from "../../components/demo-components/dropzone-demo/DemoDropzoneUploading";
+import CodeDemoDropzoneUploading from "../../components/demo-components/dropzone-demo/CodeDemoDropzoneUploading";
+import DemoDropzoneActionButtons from "../../components/demo-components/dropzone-demo/DemoDropzoneActionButtons";
+import CodeDemoDropzoneActionButtons from "../../components/demo-components/dropzone-demo/CodeDemoDropzoneActionButtons";
+
+interface FileInputButtonDemoPageProps {}
+const FileInputButtonDemoPage: React.FC<FileInputButtonDemoPageProps> = (
+ props: FileInputButtonDemoPageProps
+) => {
+ return (
+ <React.Fragment>
+ <MainContentContainer>
+ <MainTitle>FileInputButton</MainTitle>
+
+ <MainParagraph>
+ The default <CodeHighlight>{'<input type="file"/>'}</CodeHighlight> is
+ just a quite boring button. That's why we present the
+ "fileinputbutton" component which is 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>
+
+ <DescParagraph>
+ The widget is useful for handling one{" "}
+ <TypeHighlight>File</TypeHighlight> or a list of{" "}
+ <TypeHighlight>Files</TypeHighlight> in one or more of these
+ scenarios:
+ <ol>
+ <li>The file(s) must be chosen from a File Dialog</li>
+ <li>
+ The file(s) must be validated or not. If validation is required,
+ it can be done by taking into account a predefined set of allowed{" "}
+ <AnchorToTab href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept">
+ Common MIME Types
+ </AnchorToTab>
+ ; specifiying the max file size (in bytes) and/or the max amount
+ of files.
+ </li>
+ <li>The file(s) must be uploaded somewhere in the internet.</li>
+ </ol>
+ </DescParagraph>
+
+ <DescParagraph>
+ This component works perfectly with{" "}
+ <CodeHighlight>{"<FileMosaic/>"}</CodeHighlight> and
+ <CodeHighlight>{"<FileCard/>"}</CodeHighlight> components for
+ displaying the files.
+ </DescParagraph>
+
+ <section id="basic-fileinputbutton">
+ <SubTitle content="Basic FileInputButton" />
+ <DescParagraph>
+ In this demo we set the{" "}
+ <CodeHighlight>{"<FileInputButton/>"}</CodeHighlight> with the
+ minimum props that allows you to get your task done fast. These
+ props are <CodeHighlight>onChange</CodeHighlight> and{" "}
+ <CodeHighlight>value</CodeHighlight>.
+ </DescParagraph>
+ <Paper variant="outlined" style={{ padding: "25px" }}>
+ <BasicDemoDropzone button />
+ </Paper>
+ <BasicDropzoneCodeJS button />
+ <Alert severity="info">
+ <AlertTitle> FileCard </AlertTitle>
+ For completeness, these examples include{" "}
+ <CodeHighlight>{`<FileCard/>`} </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/filecard">FileCard</AnchorToTab>{" "}
+ 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{" "}
+ <AnchorToTab href="/types#ext-file">ExtFile-API. </AnchorToTab>
+ </Alert>
+ </section>
+
+ <section id="validation">
+ <SubTitle content="Validation" />
+ <DescParagraph>
+ In this demo you can see how{" "}
+ <CodeHighlight>{"<Dropzone/>"}</CodeHighlight> component covers the
+ following features when it comes to validating files.
+ <ol>
+ <li>Accepting specific file types.</li>
+ <li>Accepting an specific number of files.</li>
+ <li>Accepting files with an specific size (in bytes).</li>
+ </ol>
+ </DescParagraph>
+
+ <Paper variant="outlined" style={{ padding: "25px" }}>
+ <DemoDropzoneValidation />
+ </Paper>
+ <CodeDemoDropzoneValidation />
+ <Alert severity="info">
+ <AlertTitle> Removing non valid Files </AlertTitle>
+ We call "clean" to the operation of removing non valid files. Apart
+ from deleting them individually, there are some other ways in which
+ you can remove all of them. You can try the following props in the{" "}
+ {"<Dropzone/>"} component:
+ <ul>
+ <li>
+ <TypeHighlight>cleanFiles</TypeHighlight> : This will make
+ dropzone header to display the "clean" icon which can trigger
+ the "clean" operation.
+ </li>
+ <li>
+ <TypeHighlight>actionButtons</TypeHighlight> : By setting this
+ prop properly, a button will be visible and will trigger the
+ "clean" operation (This is the way used in this demo).
+ </li>
+ <li>
+ <TypeHighlight>autoClean</TypeHighlight> : By setting this prop,
+ non valid files will be automatically discarted and will not be
+ given in the <CodeHighlight>onChange</CodeHighlight> event.
+ </li>
+ </ul>
+ </Alert>
+ </section>
+
+ <section id="custom-validation">
+ <SubTitle content="Custom validation" />
+ <DescParagraph>
+ You can also override the Dropzone validation operation by giving a
+ custom validation function that must fit the following signature:{" "}
+ <CodeHighlight>
+ {"validator?: (f: "}
+ <AnchorToTab href="https://developer.mozilla.org/en-US/docs/Web/API/File">
+ File
+ </AnchorToTab>
+ {") => "}
+ <AnchorToTab href="/types#custom-validate-file-response">
+ CustomValidateFileResponse
+ </AnchorToTab>
+ </CodeHighlight>
+ . Custom validator can work together with{" "}
+ <TypeHighlight>accept</TypeHighlight>,{" "}
+ <TypeHighlight>maxFileSize</TypeHighlight> and{" "}
+ <TypeHighlight>maxFiles</TypeHighlight> props.
+ </DescParagraph>
+ <Paper variant="outlined" style={{ padding: "25px" }}>
+ <DemoDropzoneCustomValidation />
+ </Paper>
+ <CodeDemoDropzoneCustomValidation />
+ </section>
+
+ <section id="uploading">
+ <SubTitle content="Uploading" />
+ <DescParagraph>
+ For uploading , the prop <TypeHighlight>uploadConfig</TypeHighlight>{" "}
+ must be given. This prop recieves an object in which you can specify
+ the HTTP method, the url, the headers and also extra data to be
+ uploaded. The type definition for the prop mentioned can be found{" "}
+ <AnchorToTab href="/types#UploadConfig">here</AnchorToTab>.
+ </DescParagraph>
+
+ <Paper variant="outlined" style={{ padding: "25px" }}>
+ <DemoDropzoneUploading />
+ </Paper>
+
+ <CodeDemoDropzoneUploading />
+ <Alert severity="info">
+ <AlertTitle> Server response </AlertTitle>
+ For uploading files through files-ui, server must return the
+ response with the structure of the{" "}
+ <TypeHighlight>
+ {" "}
+ <AnchorToTab href="/types#ServerResponse">
+ ServerResponse
+ </AnchorToTab>
+ </TypeHighlight>{" "}
+ type.
+ </Alert>
+ <br />
+ <Alert severity="info">
+ <AlertTitle> "fakeUpload" </AlertTitle>
+ By giving this prop, the {"<Dropzone/>"} component will simulate the
+ upload operation by randomly set the upload status and message in
+ ech uploadable <TypeHighlight>ExtFile</TypeHighlight>. It also will
+ set a fake progress.
+ </Alert>
+ <br />
+ <Alert severity="info">
+ <AlertTitle> Upload config properties </AlertTitle>
+ Apart from the properties you can see in the example above, there
+ are more of them that can make the upload process to behave
+ differently.
+ <ul>
+ <li>
+ <TypeHighlight>autoUpload</TypeHighlight> : By setting this prop
+ to true, the upload process will start automatically just after
+ the user drops or selects files.
+ </li>
+ <li>
+ <TypeHighlight>cleanOnUpload</TypeHighlight> : By setting this
+ prop, you can control whether the upload process should "clean"
+ the non valid files before uploading or not By default this
+ value is true.
+ </li>
+ </ul>
+ More information about the uploadConfig type structure can be found{" "}
+ <AnchorToTab href="/types#UploadConfig">here</AnchorToTab>.
+ </Alert>
+ </section>
+
+ <section id="action-buttons">
+ <SubTitle content="Dropzone with action buttons" />
+ <DescParagraph>
+ If you need to display buttons that trigger the default events in
+ the <CodeHighlight>{"<Dropzone/>"}</CodeHighlight> component, you
+ can do it by adding the <TypeHighlight>actionButtons</TypeHighlight>{" "}
+ prop. This will add buttons to the top or to the bottom of this
+ component.
+ <ul>
+ <li>
+ Dropzone with the{" "}
+ <TypeHighlight>actionButtons.cleanButton</TypeHighlight> prop
+ defined will display a button which triggers the clean process.
+ <br />
+ This button will be visible only{" "}
+ <strong>when the "upload" process is not active</strong>.
+ </li>
+ <li>
+ Dropzone with the{" "}
+ <TypeHighlight>actionButtons.deleteButton</TypeHighlight> prop
+ defined will display a button which deletes all files.
+ <br />
+ this button will be visible only{" "}
+ <strong>when the "upload" process is not active</strong>.
+ </li>
+ <li>
+ Dropzone with the{" "}
+ <TypeHighlight>actionButtons.uploadButton</TypeHighlight> prop
+ defined will display a button which starts the upload process.
+ This button will <strong>not</strong> be visible{" "}
+ <strong>during the "upload" process</strong>.
+ </li>
+ <li>
+ Dropzone with the{" "}
+ <TypeHighlight>actionButtons.abortButton</TypeHighlight> prop
+ defined will display a button which stops the upload process.
+ <br />
+ This button will be visible only{" "}
+ <strong>during the "upload" process</strong>.
+ </li>
+ </ul>
+ </DescParagraph>
+
+ <Paper variant="outlined" style={{ padding: "25px" }}>
+ <DemoDropzoneActionButtons />
+ </Paper>
+
+ <CodeDemoDropzoneActionButtons />
+ </section>
+
+ <section id="header-config">
+ <SubTitle content="Dropzone header config" />
+ <DescParagraph>
+ You can use the <TypeHighlight>headerConfig</TypeHighlight> prop to
+ define what will be displayed in the header.
+ <ul>
+ <li>
+ Dropzone with the{" "}
+ <TypeHighlight>headerConfig.customHeader</TypeHighlight> prop
+ defined will display this prop replacing the entire default
+ header.
+ </li>
+ </ul>
+ By default all of these values are set to{" "}
+ <TypeHighlight>true</TypeHighlight>.
+ </DescParagraph>
+
+ <Paper variant="outlined" style={{ padding: "25px" }}>
+ <DemoDropzoneHeaderConfig />
+ </Paper>
+
+ <CodeDemoDropzoneHeaderConfig />
+ <Alert severity="info">
+ <AlertTitle> HeaderConfig </AlertTitle>
+ There are more options that can be defined such as:
+ <ul>
+ <li>
+ Dropzone with the{" "}
+ <TypeHighlight>headerConfig.deleteFiles</TypeHighlight> prop set
+ to <TypeHighlight>true</TypeHighlight> will display a delete
+ button which triggers the delete process.
+ <br />
+ This button will be visible only{" "}
+ <strong>when the "upload" process is not active</strong>.
+ </li>
+ <li>
+ Dropzone with the{" "}
+ <TypeHighlight>headerConfig.cleanFiles</TypeHighlight> prop set
+ to <TypeHighlight>true</TypeHighlight> will display a "clean"
+ buton. This button will be visible only during the "upload"
+ process.
+ <br />
+ button will be visible only{" "}
+ <strong>when the "upload" process is not active</strong>.
+ </li>
+ <li>
+ Dropzone with the{" "}
+ <TypeHighlight>headerConfig.uploadFiles</TypeHighlight> prop set
+ to <TypeHighlight>true</TypeHighlight> will display a button
+ which starts the upload process.
+ </li>
+ <li>
+ Dropzone with the{" "}
+ <TypeHighlight>headerConfig.uploading</TypeHighlight> prop set
+ to <TypeHighlight>true</TypeHighlight> will display a loading
+ icon <strong>during the "upload" process</strong>.
+ </li>
+ <li>
+ Dropzone with the{" "}
+ <TypeHighlight>headerConfig.maxFileSize</TypeHighlight> prop set
+ to <TypeHighlight>true</TypeHighlight> will display the max file
+ size label.
+ </li>
+ <li>
+ Dropzone with the{" "}
+ <TypeHighlight>headerConfig.validFilesCount</TypeHighlight> prop
+ set to <TypeHighlight>true</TypeHighlight> will display the
+ current count of valid files.
+ </li>
+ </ul>
+ By default all of these values are set to
+ <TypeHighlight>true</TypeHighlight>. The complete type definition
+ can be found{" "}
+ <AnchorToTab href="/types#header-config">here</AnchorToTab>.
+ </Alert>
+ </section>
+
+ <section id="footer-config">
+ <SubTitle content="Dropzone footer config" />
+ <DescParagraph>
+ You can use the <TypeHighlight>footerConfig</TypeHighlight> prop to
+ define what will be displayed in the footer.
+ <ul>
+ <li>
+ Dropzone with the{" "}
+ <TypeHighlight>footerConfig.customMessage</TypeHighlight> prop
+ defined will be considered the message to display in the footer.
+ </li>
+ </ul>
+ </DescParagraph>
+
+ <Paper variant="outlined" style={{ padding: "25px" }}>
+ <DemoDropzoneFooterConfig />
+ </Paper>
+
+ <CodeDemoDropzoneFooterConfig />
+
+ <Alert severity="info">
+ <AlertTitle> FooterConfig </AlertTitle>
+ There are more options that can be defined such as:
+ <ul>
+ <li>
+ Dropzone with the{" "}
+ <TypeHighlight>footerConfig.allowedTypesLabel</TypeHighlight>{" "}
+ prop set to <TypeHighlight>false</TypeHighlight> will hide the
+ label that indicates the files types allowed. This label will be
+ hidden <strong>when the "upload" process is active</strong>.
+ </li>
+ <li>
+ Dropzone with the{" "}
+ <TypeHighlight>
+ footerConfig.uploadProgressMessage
+ </TypeHighlight>{" "}
+ prop set to <TypeHighlight>false</TypeHighlight> will not
+ display the label with the upload progress. This label will be
+ visible<strong> only during the "upload" process</strong>.
+ </li>
+ <li>
+ Dropzone with the{" "}
+ <TypeHighlight>footerConfig.uploadResultMessage</TypeHighlight>{" "}
+ prop set to <TypeHighlight>false</TypeHighlight> will not
+ display a label at the end of the upload process. This label can{" "}
+ be visible for 2 seconds just{" "}
+ <strong>after the "upload" process finishes</strong>.
+ </li>
+ <li>
+ Dropzone with the{" "}
+ <TypeHighlight>footerConfig.noMissingFilesLabel</TypeHighlight>{" "}
+ prop set to <TypeHighlight>false</TypeHighlight> will not
+ display a label when upload starts with no uploadable files.
+ </li>
+ <li>
+ Dropzone with the{" "}
+ <TypeHighlight>footerConfig.style</TypeHighlight> prop set to{" "}
+ <TypeHighlight>false</TypeHighlight>defined will override the
+ styles associated to the footer component.
+ </li>
+ </ul>
+ By default all of these values are set to
+ <TypeHighlight>true</TypeHighlight>.
+ <br />
+ The complete type definition can be found{" "}
+ <AnchorToTab href="/types#footer-config">here</AnchorToTab>.
+ </Alert>
+ </section>
+
+ <section id="styling">
+ <SubTitle content="Styling Dropzone" />
+ <DescParagraph>
+ You can use change the look and feel of the{" "}
+ <CodeHighlight>Dropzone</CodeHighlight> component
+ <ul>
+ <li>
+ Dropzone with the <TypeHighlight>color</TypeHighlight> prop
+ defined will use this color for border, drop layer, font color
+ and ripple.
+ </li>
+ <li>
+ Dropzone with the <TypeHighlight>minHeight</TypeHighlight> prop
+ defined will use this value to define the minimum height of the
+ component.
+ </li>
+ <li>
+ Dropzone with the <TypeHighlight>background</TypeHighlight> prop
+ defined will use this value for the background. You can set nice
+ gradients or even a background image.
+ </li>
+ </ul>
+ </DescParagraph>
+
+ <Paper variant="outlined" style={{ padding: "25px" }}>
+ <DemoDropzoneStyling />
+ </Paper>
+
+ <CodeDemoDropzoneStyling />
+ </section>
+
+ <section id="label">
+ <SubTitle content="Label" />
+ <DescParagraph>
+ You can specify a fixed label for{" "}
+ <CodeHighlight>{"<Dropzone/>"}</CodeHighlight> component to display
+ when there isn't any files.
+ </DescParagraph>
+
+ <Paper variant="outlined" style={{ padding: "25px" }}>
+ <DemoDropzoneLabel />
+ </Paper>
+
+ <CodeDemoDropzoneLabel />
+ </section>
+
+ <section id="ripple">
+ <SubTitle content="Ripple" />
+ <DescParagraph>
+ According to{" "}
+ <AnchorToTab href="https://m2.material.io/develop/ios/supporting/ripple">
+ Material Design
+ </AnchorToTab>
+ , the Ripple component provides a radial action in the form of a
+ visual ripple expanding outward from the user's touch. Ripple is a
+ visual form of feedback for touch events providing users a clear
+ signal that an element is being touched. In this component, a ripple
+ is displayed after 2 user actions:
+ <ul>
+ <li>When user clicks or touches the component.</li>
+ <li>Just after user dropped files.</li>
+ </ul>
+ For disabling the ripple effect you can set the{" "}
+ <TypeHighlight>disableRipple</TypeHighlight> prop to true.
+ </DescParagraph>
+
+ <Paper variant="outlined" style={{ padding: "25px" }}>
+ <DemoDropzoneRipple />
+ </Paper>
+
+ <CodeDemoDropzoneRipple />
+ </section>
+
+ <section id="disabled">
+ <SubTitle content="Disabled Dropzone" />
+ <DescParagraph>
+ According to{" "}
+ <AnchorToTab href="https://m2.material.io/develop/ios/supporting/ripple">
+ Material Design
+ </AnchorToTab>{" "}
+ a disabled state communicates when a component or element isn’t
+ interactive, and should be deemphasized in a UI.
+ <TypeHighlight>disabled</TypeHighlight> prop to true.
+ </DescParagraph>
+
+ <Paper variant="outlined" style={{ padding: "25px" }}>
+ <DemoDropzoneDisabled />
+ </Paper>
+
+ <CodeDemoDropzoneDisabled />
+ </section>
+
+ <section id="clickable">
+ <SubTitle content="Clickable Dropzone" />
+ <DescParagraph>
+ Dropzone with the
+ <TypeHighlight>clickable</TypeHighlight> prop set to false will not
+ open the file dialog to select files when user clicks the component.
+ </DescParagraph>
+
+ <Paper variant="outlined" style={{ padding: "25px" }}>
+ <DemoDropzoneClickable />
+ </Paper>
+
+ <CodeDemoDropzoneClickable />
+ </section>
+
+ <section id="drop-layer">
+ <SubTitle content="Drop Layer" />
+ <DescParagraph>
+ Dropzone with the
+ <TypeHighlight>dropOnLayer</TypeHighlight> prop set to false will
+ not perform the drop operation in a layer that covers the complete
+ component container.
+ <br />
+ In this demo try to drag and drop files in both dropzones to see the
+ difference.
+ </DescParagraph>
+
+ <Paper variant="outlined" style={{ padding: "25px" }}>
+ <DemoDropzoneDropLayer />
+ </Paper>
+
+ <CodeDemoDropzoneDropLayer />
+ </section>
+
+ <section id="add-or-replace">
+ <SubTitle content="Add or replace files" />
+ <DescParagraph>
+ There are 2 different behaviours when user selects or drops new
+ files:
+ <ul>
+ <li>
+ Dropzone with the <CodeHighlight>behaviour</CodeHighlight> set
+ to <TypeHighlight>"add"</TypeHighlight> will add the new files
+ to the current array of ExtFiles.
+ </li>
+ <li>
+ Dropzone with the <CodeHighlight>behaviour</CodeHighlight> set
+ to <TypeHighlight>"replace"</TypeHighlight> will replace the
+ current array of ExtFiles with the new ones.
+ </li>
+ </ul>
+ In this demo try to select or drop files more than once on each
+ dropzone to see the difference.
+ </DescParagraph>
+
+ <Paper variant="outlined" style={{ padding: "25px" }}>
+ <DemoDropzoneBehaviour />
+ </Paper>
+
+ <CodeDemoDropzoneBehaviour />
+ </section>
+
+ <section id="localization">
+ <SubTitle content="Localization" />
+ <DescParagraph>
+ The localization demo for this component can be found in the{" "}
+ <AnchorToTab href="/localization">localization page</AnchorToTab>
+ </DescParagraph>
+
+ {/* <Paper variant="outlined" style={{ padding: "25px" }}>
+ <DemoDropzoneFooterConfig />
+ </Paper>
+
+ <CodeDemoDropzoneFooterConfig /> */}
+ </section>
+
+ <section id="api">
+ <SubTitle content="API" />
+ <DescParagraph>
+ See the documentation below for a complete reference to all of the
+ props and classes available to the components mentioned here.
+ <ul>
+ <li>
+ <CodeHighlight>
+ <AnchorToTab href="/api/dropzone">
+ {"<Dropzone />"}
+ </AnchorToTab>
+ </CodeHighlight>
+ </li>
+ <li>
+ <CodeHighlight>
+ <AnchorToTab href="/api/filemosaic">
+ {"<FileMosaic />"}
+ </AnchorToTab>
+ </CodeHighlight>
+ </li>
+ </ul>
+ </DescParagraph>
+ </section>
+ </MainContentContainer>
+
+ <RightMenuContainer>
+ <RightMenu width="240px" items={rightMenuItems} />
+ </RightMenuContainer>
+ </React.Fragment>
+ );
+};
+export default FileInputButtonDemoPage;
+
+const rightMenuItems = [
+ {
+ id: 0,
+ label: "Basic file input",
+ referTo: "/components/fileinputbutton#basic-fileinputbutton",
+ },
+ {
+ id: 1,
+ label: "Validation",
+ referTo: "/components/fileinputbutton#validation",
+ },
+ {
+ id: 2,
+ label: "Custom validation",
+ referTo: "/components/fileinputbutton#custom-validation",
+ },
+ {
+ id: 3,
+ label: "Uploading",
+ referTo: "/components/fileinputbutton#uploading",
+ },
+ /* {
+ id: 4,
+ label: "Dropzone events",
+ referTo: "/components/dropzone#dropzone-events",
+ }, */
+ {
+ id: 5,
+ label: "Action buttons",
+ referTo: "/components/fileinputbutton#action-buttons",
+ },
+
+ {
+ id: 6,
+ label: "Styling",
+ referTo: "/components/fileinputbutton#styling",
+ },
+ {
+ id: 14,
+ label: "Label",
+ referTo: "/components/fileinputbutton#label",
+ },
+ {
+ id: 8,
+ label: "Ripple",
+ referTo: "/components/fileinputbutton#ripple",
+ },
+ {
+ id: 11,
+ label: "Disabled",
+ referTo: "/components/fileinputbutton#disabled",
+ },
+
+ {
+ id: 15,
+ label: "Add or replace",
+ referTo: "/components/fileinputbutton#add-or-replace",
+ },
+ {
+ id: 7,
+ label: "Localization",
+ referTo: "/components/fileinputbutton#localization",
+ },
+];