Add new Doc FileUpload

components/doc/fileupload/advanceddoc.js

@@ -0,0 +1,72 @@
+import { useRef } from 'react';
+import { FileUpload } from '../../lib/fileupload/FileUpload';
+import { Toast } from '../../lib/toast/Toast';
+import { DocSectionCode } from '../common/docsectioncode';
+import { DocSectionText } from '../common/docsectiontext';
+import getConfig from 'next/config';
+
+export function AdvancedDoc(props) {
+    const toast = useRef(null);
+    const uploadPath = getConfig().publicRuntimeConfig.uploadPath;
+
+    const onUpload = () => {
+        toast.current.show({ severity: 'info', summary: 'Success', detail: 'File Uploaded' });
+    };
+
+    const code = {
+        basic: `
+<Toast ref={toast}></Toast>
+<FileUpload name="demo[]" url="https://primefaces.org/primereact/showcase/upload.php" onUpload={onUpload} multiple accept="image/*" maxFileSize={1000000} emptyTemplate={<p className="m-0">Drag and drop files to here to upload.</p>} />
+        `,
+        javascript: `
+import { useRef } from 'react';
+import { Toast } from 'primereact/toast';
+import { FileUpload } from 'primereact/fileupload';
+
+export default function AdvancedDoc() {
+    const toast = useRef(null);
+
+    const onUpload = () => {
+        toast.current.show({ severity: 'info', summary: 'Success', detail: 'File Uploaded' });
+    };
+
+    return (
+        <Toast ref={toast}></Toast>
+        <FileUpload name="demo[]" url="https://primefaces.org/primereact/showcase/upload.php" onUpload={onUpload} multiple accept="image/*" maxFileSize={1000000} emptyTemplate={<p className="m-0">Drag and drop files to here to upload.</p>} />       
+    )
+}
+        `,
+        typescript: `
+import { useRef } from 'react';
+import { Toast } from 'primereact/toast';
+import { FileUpload } from 'primereact/fileupload';
+
+export default function AdvancedDoc() {
+    const toast = useRef(null);
+
+    const onUpload = () => {
+        toast.current.show({ severity: 'info', summary: 'Success', detail: 'File Uploaded' });
+    };
+    
+    return (
+        <Toast ref={toast}></Toast>
+        <FileUpload name="demo[]" url="https://primefaces.org/primereact/showcase/upload.php" onUpload={onUpload} multiple accept="image/*" maxFileSize={1000000} emptyTemplate={<p className="m-0">Drag and drop files to here to upload.</p>} />
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>FileUpload is an advanced uploader with dragdrop support, multi file uploads, auto uploading, progress tracking and validations.</p>
+            </DocSectionText>
+            <div className="card">
+                <Toast ref={toast}></Toast>
+
+                <FileUpload name="demo[]" url={uploadPath} onUpload={onUpload} multiple accept="image/*" maxFileSize={1000000} emptyTemplate={<p className="m-0">Drag and drop files to here to upload.</p>} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}

components/doc/fileupload/basicdoc.js

@@ -0,0 +1,71 @@
+import { useRef } from 'react';
+import { FileUpload } from '../../lib/fileupload/FileUpload';
+import { Toast } from '../../lib/toast/Toast';
+import { DocSectionCode } from '../common/docsectioncode';
+import { DocSectionText } from '../common/docsectiontext';
+import getConfig from 'next/config';
+
+export function BasicDoc(props) {
+    const toast = useRef(null);
+    const uploadPath = getConfig().publicRuntimeConfig.uploadPath;
+
+    const onBasicUpload = () => {
+        toast.current.show({ severity: 'info', summary: 'Success', detail: 'File Uploaded with Basic Mode' });
+    };
+
+    const code = {
+        basic: `
+<Toast ref={toast}></Toast>
+<FileUpload mode="basic" name="demo[]" url="https://primefaces.org/primereact/showcase/upload.php" accept="image/*" maxFileSize={1000000} onUpload={onBasicUpload} />
+        `,
+        javascript: `
+import { useRef } from 'react';
+import { Toast } from 'primereact/toast';
+import { FileUpload } from 'primereact/fileupload';
+
+export default function BasicDoc() {
+    const toast = useRef(null);
+
+    const onBasicUpload = () => {
+        toast.current.show({ severity: 'info', summary: 'Success', detail: 'File Uploaded with Basic Mode' });
+    };
+        
+    return (
+        <Toast ref={toast}></Toast>
+        <FileUpload mode="basic" name="demo[]" url="https://primefaces.org/primereact/showcase/upload.php" accept="image/*" maxFileSize={1000000} onUpload={onBasicUpload} />     
+    )
+}
+        `,
+        typescript: `
+import { useRef } from 'react';
+import { Toast } from 'primereact/toast';
+import { FileUpload } from 'primereact/fileupload';
+
+export default function BasicDoc() {
+    const toast = useRef(null);
+
+    const onBasicUpload = () => {
+        toast.current.show({ severity: 'info', summary: 'Success', detail: 'File Uploaded with Basic Mode' });
+    };
+
+    return (
+        <Toast ref={toast}></Toast>
+        <FileUpload mode="basic" name="demo[]" url="https://primefaces.org/primereact/showcase/upload.php" accept="image/*" maxFileSize={1000000} onUpload={onBasicUpload} />
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>FileUpload basic mode provides a simpler UI as an alternative to advanced mode.</p>
+            </DocSectionText>
+            <div className="card">
+                <Toast ref={toast}></Toast>
+                <FileUpload mode="basic" name="demo[]" url={uploadPath} accept="image/*" maxFileSize={1000000} onUpload={onBasicUpload} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}

components/doc/fileupload/basicwithautodoc.js

@@ -0,0 +1,72 @@
+import { useRef } from 'react';
+import { FileUpload } from '../../lib/fileupload/FileUpload';
+import { Toast } from '../../lib/toast/Toast';
+import { DocSectionCode } from '../common/docsectioncode';
+import { DocSectionText } from '../common/docsectiontext';
+import getConfig from 'next/config';
+
+export function BasicWithAuto(props) {
+    const toast = useRef(null);
+    const uploadPath = getConfig().publicRuntimeConfig.uploadPath;
+
+    const onBasicUploadAuto = () => {
+        toast.current.show({ severity: 'info', summary: 'Success', detail: 'File Uploaded with Auto Mode' });
+    };
+
+    const code = {
+        basic: `
+<Toast ref={toast}></Toast>
+<FileUpload mode="basic" name="demo[]" url="https://primefaces.org/primereact/showcase/upload.php" accept="image/*" maxFileSize={1000000} onUpload={onBasicUploadAuto} auto chooseLabel="Browse" />
+
+        `,
+        javascript: `
+import { useRef } from 'react';
+import { Toast } from 'primereact/toast';
+import { FileUpload } from 'primereact/fileupload';
+
+export default function BasicWithAuto() {
+    const toast = useRef(null);
+
+    const onBasicUploadAuto = () => {
+        toast.current.show({ severity: 'info', summary: 'Success', detail: 'File Uploaded with Auto Mode' });
+    };
+    
+    return (
+        <Toast ref={toast}></Toast>
+        <FileUpload mode="basic" name="demo[]" url="https://primefaces.org/primereact/showcase/upload.php" accept="image/*" maxFileSize={1000000} onUpload={onBasicUploadAuto} auto chooseLabel="Browse" />
+    )
+}
+        `,
+        typescript: `
+import { useRef } from 'react';
+import { Toast } from 'primereact/toast';
+import { FileUpload } from 'primereact/fileupload';
+
+export default function BasicWithAuto() {
+    const toast = useRef(null);
+
+    const onBasicUploadAuto = () => {
+        toast.current.show({ severity: 'info', summary: 'Success', detail: 'File Uploaded with Auto Mode' });
+    };
+    
+    return (
+        <Toast ref={toast}></Toast>
+        <FileUpload mode="basic" name="demo[]" url="https://primefaces.org/primereact/showcase/upload.php" accept="image/*" maxFileSize={1000000} onUpload={onBasicUploadAuto} auto chooseLabel="Browse" />
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>FileUpload basic mode provides a simpler UI as an alternative to advanced mode.</p>
+            </DocSectionText>
+            <div className="card">
+                <Toast ref={toast}></Toast>
+                <FileUpload mode="basic" name="demo[]" url={uploadPath} accept="image/*" maxFileSize={1000000} onUpload={onBasicUploadAuto} auto chooseLabel="Browse" />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}

components/doc/fileupload/customdoc.js

@@ -0,0 +1,88 @@
+import { FileUpload } from '../../lib/fileupload/FileUpload';
+import { DocSectionCode } from '../common/docsectioncode';
+import { DocSectionText } from '../common/docsectiontext';
+import getConfig from 'next/config';
+
+export function CustomDoc(props) {
+    const uploadPath = getConfig().publicRuntimeConfig.uploadPath;
+
+    const customBase64Uploader = async (event) => {
+        // convert file to base64 encoded
+        const file = event.files[0];
+        const reader = new FileReader();
+        let blob = await fetch(file.objectURL).then((r) => r.blob()); //blob:url
+
+        reader.readAsDataURL(blob);
+
+        reader.onloadend = function () {
+            const base64data = reader.result;
+
+            // eslint-disable-next-line no-console
+            console.log(base64data);
+        };
+    };
+
+    const code = {
+        basic: `
+<FileUpload mode="basic" name="demo[]" url="https://primefaces.org/primereact/showcase/upload.php" accept="image/*" customUpload uploadHandler={customBase64Uploader} />
+        `,
+        javascript: `
+import { FileUpload } from 'primereact/fileupload';
+
+export default function CustomDoc() {
+
+    const customBase64Uploader = async (event) => {
+        // convert file to base64 encoded
+        const file = event.files[0];
+        const reader = new FileReader();
+        let blob = await fetch(file.objectURL).then((r) => r.blob()); //blob:url
+
+        reader.readAsDataURL(blob);
+
+        reader.onloadend = function () {
+            const base64data = reader.result;
+        };
+    };
+
+    return (
+        <FileUpload mode="basic" name="demo[]" url="https://primefaces.org/primereact/showcase/upload.php" accept="image/*" customUpload uploadHandler={customBase64Uploader} />
+    )
+}
+        `,
+        typescript: `
+import { FileUpload } from 'primereact/fileupload';
+
+export default function CustomDoc() {
+
+    const customBase64Uploader = async (event) => {
+        // convert file to base64 encoded
+        const file = event.files[0];
+        const reader = new FileReader();
+        let blob = await fetch(file.objectURL).then((r) => r.blob()); //blob:url
+
+        reader.readAsDataURL(blob);
+
+        reader.onloadend = function () {
+            const base64data = reader.result;
+        };
+    };
+
+    return (
+        <FileUpload mode="basic" name="demo[]" url="https://primefaces.org/primereact/showcase/upload.php" accept="image/*" customUpload uploadHandler={customBase64Uploader} />
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>Uploading implementation can be overriden by enabling customUpload property and defining a custom upload handler event.</p>
+            </DocSectionText>
+            <div className="card">
+                <FileUpload mode="basic" name="demo[]" url={uploadPath} accept="image/*" customUpload uploadHandler={customBase64Uploader} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}

components/doc/fileupload/importdoc.js

@@ -0,0 +1,17 @@
+import { DocSectionText } from '../common/docsectiontext';
+import { DocSectionCode } from '../common/docsectioncode';
+
+export function ImportDoc(props) {
+    const code = {
+        basic: `
+import { FileUpload } from 'primereact/fileupload';
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}></DocSectionText>
+            <DocSectionCode code={code} hideToggleCode hideCodeSandbox />
+        </>
+    );
+}