diff --git a/src/components/demo-components/dropzone-demo/CodeDemoDropzoneActionButtons.jsx b/src/components/demo-components/dropzone-demo/CodeDemoDropzoneActionButtons.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..4d2c8ee3da6ba9acc78d6f3326be367fcfa7350a
--- /dev/null
+++ b/src/components/demo-components/dropzone-demo/CodeDemoDropzoneActionButtons.jsx
@@ -0,0 +1,125 @@
+import ShowDemoCode from "../../show-demo-code/ShowDemoCode";
+const CodeDemoDropzoneActionButtons = ({ splittedOnly = false }) => {
+ return (
+ <ShowDemoCode
+ splittedOnly={splittedOnly}
+ 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 CodeDemoDropzoneActionButtons;
+
+const splittedCodeJS = `<Dropzone
+ onChange={updateFiles}
+ value={files}
+ autoClean
+ uploadConfig={{ url: "https://www.myawsomeserver.com/upload" }}
+ fakeUpload
+ actionButtons={{
+ position: "bottom",
+ uploadButton: { style: { textTransform: "uppercase" } },
+ abortButton: {},
+ cleanButton: {},
+ deleteButton: {},
+ }}
+>
+ {files.length > 0 &&
+ files.map((file) => (
+ <FileMosaic key={file.id} {...file} onDelete={removeFile} info/>
+ ))}
+</Dropzone>`;
+const splittedCodeTS = `<Dropzone
+ onChange={updateFiles}
+ value={files}
+ autoClean
+ uploadConfig={{ url: "https://www.myawsomeserver.com/upload" }}
+ fakeUpload
+ actionButtons={{
+ position: "bottom",
+ uploadButton: { style: { textTransform: "uppercase" } },
+ abortButton: {},
+ cleanButton: {},
+ deleteButton: {},
+ }}
+>
+ {files.length > 0 &&
+ files.map((file: ExtFile) => (
+ <FileMosaic key={file.id} {...file} onDelete={removeFile} info/>
+ ))}
+</Dropzone>`;
+const completeCodeJS = `import * as React from "react";
+import { Dropzone, FileMosaic } from "@files-ui/react";
+
+export default function App() {
+ const [files, setFiles] = React.useState([]);
+ const updateFiles = (incommingFiles) => {
+ //do something with the files
+ setFiles(incommingFiles);
+ //even your own upload implementation
+ };
+ const removeFile = (id) => {
+ setFiles(files.filter((x) => x.id !== id));
+ };
+ return (
+ <Dropzone
+ onChange={updateFiles}
+ value={files}
+ autoClean
+ uploadConfig={{ url: "https://www.myawsomeserver.com/upload" }}
+ fakeUpload
+ actionButtons={{
+ position: "bottom",
+ uploadButton: { style: { textTransform: "uppercase" } },
+ abortButton: {},
+ cleanButton: {},
+ deleteButton: {},
+ }}
+ >
+ {files.length > 0 &&
+ files.map((file) => (
+ <FileMosaic key={file.id} {...file} onDelete={removeFile} info />
+ ))}
+ </Dropzone>
+ );
+};`;
+
+const completeCodeTS = `import * as React from "react";
+import { Dropzone, FileMosaic, ExtFile } from "@files-ui/react";
+
+export default function App() {
+ const [files, setFiles] = React.useState<ExtFile[]>([]);
+ const updateFiles = (incommingFiles:ExtFile[]) => {
+ //do something with the files
+ setFiles(incommingFiles);
+ //even your own upload implementation
+ };
+ const removeFile = (id: string | number | undefined) => {
+ setFiles(files.filter((x: ExtFile) => x.id !== id));
+ };
+ return (
+ <Dropzone
+ onChange={updateFiles}
+ value={files}
+ autoClean
+ uploadConfig={{ url: "https://www.myawsomeserver.com/upload" }}
+ fakeUpload
+ actionButtons={{
+ position: "bottom",
+ uploadButton: { style: { textTransform: "uppercase" } },
+ abortButton: {},
+ cleanButton: {},
+ deleteButton: {},
+ }}
+ >
+ {files.length > 0 &&
+ files.map((file:ExtFile) => (
+ <FileMosaic key={file.id} {...file} onDelete={removeFile} info />
+ ))}
+ </Dropzone>
+ );
+}`;
diff --git a/src/components/demo-components/dropzone-demo/DemoDropzoneActionButtons.jsx b/src/components/demo-components/dropzone-demo/DemoDropzoneActionButtons.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..955d11b99a07be54c33ab668b0aa1ea5c085e9b9
--- /dev/null
+++ b/src/components/demo-components/dropzone-demo/DemoDropzoneActionButtons.jsx
@@ -0,0 +1,36 @@
+import * as React from "react";
+import { Dropzone, FileMosaic } from "../../../files-ui";
+
+const DemoDropzoneActionButtons = (props) => {
+ const [files, setFiles] = React.useState([]);
+ const updateFiles = (incommingFiles) => {
+ //do something with the files
+ setFiles(incommingFiles);
+ //even your own upload implementation
+ };
+ const removeFile = (id) => {
+ setFiles(files.filter((x) => x.id !== id));
+ };
+ return (
+ <Dropzone
+ onChange={updateFiles}
+ value={files}
+ autoClean
+ uploadConfig={{ url: "https://www.myawsomeserver.com/upload" }}
+ fakeUpload
+ actionButtons={{
+ position: "bottom",
+ uploadButton: { style: { textTransform: "uppercase" } },
+ abortButton: {},
+ cleanButton: {},
+ deleteButton: {},
+ }}
+ >
+ {files.length > 0 &&
+ files.map((file) => (
+ <FileMosaic key={file.id} {...file} onDelete={removeFile} info />
+ ))}
+ </Dropzone>
+ );
+};
+export default DemoDropzoneActionButtons;
diff --git a/src/pages/demo/DropzoneDemoPage.jsx b/src/pages/demo/DropzoneDemoPage.jsx
index a8815fcec1a95332cc7a848221290bca6eaad71b..f10f006a1836d7c1e74334d31fec3569e3323edb 100644
--- a/src/pages/demo/DropzoneDemoPage.jsx
+++ b/src/pages/demo/DropzoneDemoPage.jsx
@@ -4,9 +4,11 @@ import CodeHighlight from "../../components/codeHighlight/CodeHighlight";
import DescParagraph from "../../components/demo-components/desc-paragraph/DescParagraph";
import BasicDropzoneCodeJS from "../../components/demo-components/dropzone-demo/BasicDropzoneCodeJS";
import BasicDemoDropzone from "../../components/demo-components/dropzone-demo/BasicDropzoneDemo";
+import CodeDemoDropzoneActionButtons from "../../components/demo-components/dropzone-demo/CodeDemoDropzoneActionButtons";
import CodeDemoDropzoneCustomValidation from "../../components/demo-components/dropzone-demo/CodeDemoDropzoneCustomValidation";
import CodeDemoDropzoneUploading from "../../components/demo-components/dropzone-demo/CodeDemoDropzoneUploading";
import CodeDemoDropzoneValidation from "../../components/demo-components/dropzone-demo/CodeDemoDropzoneValidation";
+import DemoDropzoneActionButtons from "../../components/demo-components/dropzone-demo/DemoDropzoneActionButtons";
import DemoDropzoneCustomValidation from "../../components/demo-components/dropzone-demo/DemoDropzoneCustomValidation";
import DemoDropzoneUploading from "../../components/demo-components/dropzone-demo/DemoDropzoneUploading";
import DemoDropzoneValidation from "../../components/demo-components/dropzone-demo/DemoDropzoneValidation";
@@ -225,31 +227,55 @@ const DropzoneDemoPage = (props) => {
</Alert>
</section>
- <section id="dropzone-events">
- <SubTitle content="Dropzone events" />
+ <section id="action-buttons">
+ <SubTitle content="Dropzone with action buttons" />
<DescParagraph>
- You can handle the following events:
+ 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 <code className="code">onDelete</code> prop
- defined can delete all the files associated with the{" "}
- <code className="code">value</code> prop.
+ 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 <code className="code">onDelete</code> prop
- defined can delete all the files associated with the{" "}
- <code className="code">value</code> prop..
+ Dropzone with the{" "}
+ <TypeHighlight>actionButtons.deleteButton</TypeHighlight> prop
+ defined will display a button which deletes all files. 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>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>
- <li>Accept an specific size (in bytes) of files.</li>
</ul>
</DescParagraph>
<Paper variant="outlined" style={{ padding: "25px" }}>
- <BasicDemoDropzone />
+ <DemoDropzoneActionButtons />
</Paper>
- <BasicDropzoneCodeJS />
+ <CodeDemoDropzoneActionButtons />
</section>
<section id="api">
<SubTitle content="API" />