diff --git a/src/components/demo-components/dropzone-demo/CodeDemoDropzoneCustomValidation.jsx b/src/components/demo-components/dropzone-demo/CodeDemoDropzoneCustomValidation.jsx index 9859cafec13e23217de6d94c745bdf3ac0a1a258..4f87e1cd073b6c9af9237f24e355b3ccf10142a6 100644 --- a/src/components/demo-components/dropzone-demo/CodeDemoDropzoneCustomValidation.jsx +++ b/src/components/demo-components/dropzone-demo/CodeDemoDropzoneCustomValidation.jsx @@ -14,34 +14,8 @@ const CodeDemoDropzoneCustomValidation = ({ splittedOnly = false }) => { }; export default CodeDemoDropzoneCustomValidation; -const splittedCodeJS = `<Dropzone - onChange={updateFiles} - value={files} - accept={"image/*"} - maxFileSize={28 * 1024} - maxFiles={2} - cleanFiles - validator={myOwnValidation} - > - {files.length > 0 && - files.map((file) => ( - <FileMosaic key={file.id} {...file} onDelete={removeFile} info /> - ))} -</Dropzone>`; -const splittedCodeTS = `<Dropzone - onChange={updateFiles} - value={files} - accept={"image/*"} - maxFileSize={28 * 1024} - maxFiles={2} - cleanFiles - validator={myOwnValidation} - > - {files.length > 0 && - files.map((file: ExtFile) => ( - <FileMosaic key={file.id} {...file} onDelete={removeFile} info /> - ))} -</Dropzone>`; +const splittedCodeJS = ``; +const splittedCodeTS = ``; const completeCodeJS = `import { Dropzone, FileMosaic } from "@files-ui/react"; import * as React from "react"; //validate files @@ -50,7 +24,7 @@ import * as React from "react"; const myOwnValidation = (file) => { let errorList= []; let validResult = true; - const regExPrefix = /\btest_file\w+/; + const regExPrefix = /\\btest_file\\w+/; if (!file.name.match(regExPrefix)) { validResult = false; errorList.push('Prefix "test_file" was not present in the file name'); diff --git a/src/components/demo-components/dropzone-demo/CodeDemoDropzoneUploading.jsx b/src/components/demo-components/dropzone-demo/CodeDemoDropzoneUploading.jsx new file mode 100644 index 0000000000000000000000000000000000000000..ce53cfa9e72b2220744e097348b8ff6c51c59a9f --- /dev/null +++ b/src/components/demo-components/dropzone-demo/CodeDemoDropzoneUploading.jsx @@ -0,0 +1,141 @@ +import ShowDemoCode from "../../show-demo-code/ShowDemoCode"; +const CodeDemoDropzoneUploading = ({ 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 CodeDemoDropzoneUploading; + +const splittedCodeJS = `<Dropzone + onChange={updateFiles} + value={files} + accept={"image/*"} + maxFileSize={28 * 1024*1024} + maxFiles={2} + actionButtons={{ position: "bottom", uploadButton: {}, abortButton: {} }} + uploadConfig={{ + url: "https://www.myawsomeserver.com/upload", + method: "POST", + headers: { + Authorization: + "bearer HTIBI/IBYG/&GU&/GV%&G/&IC%&V/Ibi76bfh8g67gg68g67i6g7G&58768&/(&/(FR&G/&H%&/", + }, + cleanOnUpload: true, + }} + fakeUpload +> + {files.length > 0 && + files.map((file) => ( + <FileMosaic key={file.id} {...file} onDelete={removeFile} info/> + ))} +</Dropzone>`; +const splittedCodeTS = `<Dropzone + onChange={updateFiles} + value={files} + accept={"image/*"} + maxFileSize={28 * 1024*1024} + maxFiles={2} + actionButtons={{ position: "bottom", uploadButton: {}, abortButton: {} }} + uploadConfig={{ + url: "https://www.myawsomeserver.com/upload", + method: "POST", + headers: { + Authorization: + "bearer HTIBI/IBYG/&GU&/GV%&G/&IC%&V/Ibi76bfh8g67gg68g67i6g7G&58768&/(&/(FR&G/&H%&/", + }, + cleanOnUpload: true, + }} + fakeUpload +> + {files.length > 0 && + files.map((file: ExtFile) => ( + <FileMosaic key={file.id} {...file} onDelete={removeFile} info/> + ))} +</Dropzone>`; +const completeCodeJS = `import { Dropzone,FileMosaic } from "@files-ui/react"; +import * as React from "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} + accept={"image/*"} + maxFileSize={28 * 1024*1024} + maxFiles={2} + actionButtons={{ position: "bottom", uploadButton: {}, abortButton: {} }} + uploadConfig={{ + url: "https://www.myawsomeserver.com/upload", + method: "POST", + headers: { + Authorization: + "bearer HTIBI/IBYG/&GU&/GV%&G/&IC%&V/Ibi76bfh8g67gg68g67i6g7G&58768&/(&/(FR&G/&H%&/", + }, + cleanOnUpload: true, + }} + fakeUpload + > + {files.length > 0 && + files.map((file) => ( + <FileMosaic key={file.id} {...file} onDelete={removeFile} info /> + ))} + </Dropzone> + ); +}`; + +const completeCodeTS = `import { Dropzone, FileMosaic, ExtFile } from "@files-ui/react"; +import * as React from "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} + accept={"image/*"} + maxFileSize={28 * 1024*1024} + maxFiles={2} + actionButtons={{ position: "bottom", uploadButton: {}, abortButton: {} }} + uploadConfig={{ + url: "https://www.myawsomeserver.com/upload", + method: "POST", + headers: { + Authorization: + "bearer HTIBI/IBYG/&GU&/GV%&G/&IC%&V/Ibi76bfh8g67gg68g67i6g7G&58768&/(&/(FR&G/&H%&/", + }, + cleanOnUpload: true, + }} + fakeUpload + > + {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/DemoDropzoneUploading.jsx b/src/components/demo-components/dropzone-demo/DemoDropzoneUploading.jsx new file mode 100644 index 0000000000000000000000000000000000000000..47757694c38db7e4f50d05aa3217d6bafdb69bd0 --- /dev/null +++ b/src/components/demo-components/dropzone-demo/DemoDropzoneUploading.jsx @@ -0,0 +1,40 @@ +import * as React from "react"; +import { Dropzone, FileMosaic } from "../../../files-ui"; + +const DemoDropzoneUploading = (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} + accept={"image/*"} + maxFileSize={28 * 1024*1024} + maxFiles={2} + actionButtons={{ position: "bottom", uploadButton: {}, abortButton: {} }} + uploadConfig={{ + url: "https://www.myawsomeserver.com/upload", + method: "POST", + headers: { + Authorization: + "bearer HTIBI/IBYG/&GU&/GV%&G/&IC%&V/Ibi76bfh8g67gg68g67i6g7G&58768&/(&/(FR&G/&H%&/", + }, + cleanOnUpload: true, + }} + fakeUpload + > + {files.length > 0 && + files.map((file) => ( + <FileMosaic key={file.id} {...file} onDelete={removeFile} info /> + ))} + </Dropzone> + ); +}; +export default DemoDropzoneUploading; diff --git a/src/pages/demo/DropzoneDemoPage.jsx b/src/pages/demo/DropzoneDemoPage.jsx index 6914d4a705d25a9d700cefab8bf9163b0f348559..752f3223f9148bb6a8ab8c7d6b082ec5619f6668 100644 --- a/src/pages/demo/DropzoneDemoPage.jsx +++ b/src/pages/demo/DropzoneDemoPage.jsx @@ -5,8 +5,10 @@ import DescParagraph from "../../components/demo-components/desc-paragraph/DescP import BasicDropzoneCodeJS from "../../components/demo-components/dropzone-demo/BasicDropzoneCodeJS"; import BasicDemoDropzone from "../../components/demo-components/dropzone-demo/BasicDropzoneDemo"; 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 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"; import SubTitle from "../../components/demo-components/sub-title/SubTitle"; import MainContentContainer from "../../components/layout-pages/MainContentContainer"; @@ -192,13 +194,54 @@ const DropzoneDemoPage = (props) => { <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{" "} + <AnchorToTab href="/types#UploadConfig">uploadConfig</AnchorToTab>{" "} + must be given. In this prop you can specify the method, the url, + headers and also extra upload data. The type definition for the prop + mmentioned can be found{" "} + <AnchorToTab href="/types#UploadConfig">here</AnchorToTab>. + </DescParagraph> + + + <Paper variant="outlined" style={{ padding: "25px" }}> + <DemoDropzoneUploading /> + </Paper> + + <CodeDemoDropzoneUploading /> + <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 dislay 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="dropzone-events"> <SubTitle content="Dropzone events" />