diff --git a/src/components/demo-components/dropzone-demo/AdvancedDropzoneCodeJS.jsx b/src/components/demo-components/dropzone-demo/AdvancedDropzoneCodeJS.jsx
index 9c948779660efd5578aca664e42bce620132ab46..670d538f43ca34f00035fe43a832ee221c869387 100644
--- a/src/components/demo-components/dropzone-demo/AdvancedDropzoneCodeJS.jsx
+++ b/src/components/demo-components/dropzone-demo/AdvancedDropzoneCodeJS.jsx
@@ -16,85 +16,278 @@ const AdvancedDropzoneCodeJS = (props) => {
export default AdvancedDropzoneCodeJS;
const splittedCodeJS = `<Dropzone
- style={{ minWidth: "550px" }}
onChange={updateFiles}
minHeight="195px"
- value={files}
- maxFiles={5}
- maxFileSize={2998000}
+ value={extFiles}
+ maxFiles={3}
+ // FmaxFileSize={2998000 * 20}
label="Drag'n drop files here or click to browse"
- accept=".png, image/*"
- url="https://my-awsome-server/upload-my-file"
- uploadOnDrop
- fakeUploading
->
- {files.map((file) => (
- <FileItem
+ // 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: {},
+ }}
+ >
+ {extFiles.map((file) => (
+ <FileMosaic
{...file}
- key={file.id}
- onDelete={onDelete}
- onSee={handleSee}
- resultOnTooltip
- preview
- info
- hd
+ key={file.id}
+ onDelete={onDelete}
+ onSee={handleSee}
+ onWatch={handleWatch}
+ onAbort={handleAbort}
+ onCancel={handleCancel}
+ resultOnTooltip
+ alwaysActive
+ preview
+ info
/>
))}
-</Dropzone>`;
-const completeCodeJS = `import { Dropzone, FileItem, FullScreenPreview } from "@dropzone-ui/react";
-import { useState } from "react";
-export default function App() {
- const [files, setFiles] = useState([]);
- const [imageSrc, setImageSrc] = useState(undefined);
- const updateFiles = (incommingFiles) => {
- console.log("incomming files", incommingFiles);
- setFiles(incommingFiles);
- };
- const onDelete = (id) => {
- setFiles(files.filter((x) => x.id !== id));
- };
- const handleSee = (imageSource) => {
- setImageSrc(imageSource);
- };
- const handleClean = (files) => {
- console.log("list cleaned", files);
- };
- return (
- <>
- <Dropzone
- style={{ minWidth: "550px" }}
- onChange={updateFiles}
- minHeight="195px"
- value={files}
- maxFiles={5}
- maxFileSize={2998000}
- label="Drag'n drop files here or click to browse"
- accept=".png,image/*"
- url="https://my-awsome-server/upload-my-file"
- uploadOnDrop
- fakeUploading
- >
- {files.map((file) => (
- <FileItem
- {...file}
- key={file.id}
- onDelete={onDelete}
- onSee={handleSee}
- resultOnTooltip
- preview
- info
- hd
- />
- ))}
- </Dropzone>
- <FullScreenPreview
- imgSource={imageSrc}
- openImage={imageSrc}
- onClose={(e) => handleSee(undefined)}
- />
- </>
- );
+</Dropzone>
+<FullScreen
+ open={imageSrc !== undefined}
+ onClose={() => setImageSrc(undefined)}
+ >
+ <ImagePreview src={imageSrc} />
+</FullScreen>
+<FullScreen
+ open={videoSrc !== undefined}
+ onClose={() => setVideoSrc(undefined)}
+ >
+ <VideoPreview src={videoSrc} autoPlay controls />
+</FullScreen>`;
+const completeCodeJS = `import {
+ Dropzone,
+ FileMosaic,
+ FullScreen,
+ ImagePreview,
+ VideoPreview,
+ } from "@files-ui/react";
+
+ const BASE_URL =
+ "https://files-ui-express-static-file-storage.vercel.app/39d33dff2d41b522c1ea276c4b82507f96b9699493d2e7b3f5c864ba743d9503";
+
+export default function AdvancedDropzoneDemo() {
+ const [extFiles, setExtFiles] = React.useState([]);
+ const [imageSrc, setImageSrc] = React.useState(undefined);
+ const [videoSrc, setVideoSrc] = React.useState(undefined);
+
+ const updateFiles = (incommingFiles) => {
+ console.log("incomming files", incommingFiles);
+ setExtFiles(incommingFiles);
+ };
+ const onDelete = (id) => {
+ setExtFiles(extFiles.filter((x) => x.id !== id));
+ };
+ const handleSee = (imageSource) => {
+ setImageSrc(imageSource);
+ };
+ const handleWatch = (videoSource) => {
+ setVideoSrc(videoSource);
+ };
+ const handleStart = (filesToUpload) => {
+ console.log("advanced demo start upload", filesToUpload);
+ };
+ const handleFinish = (uploadedFiles) => {
+ console.log("advanced demo finish upload", uploadedFiles);
+ };
+ const handleAbort = (id) => {
+ setExtFiles(
+ extFiles.map((ef) => {
+ if (ef.id === id) {
+ return { ...ef, uploadStatus: "aborted" };
+ } else return { ...ef };
+ })
+ );
+ };
+ const handleCancel = (id) => {
+ setExtFiles(
+ extFiles.map((ef) => {
+ if (ef.id === id) {
+ return { ...ef, uploadStatus: undefined };
+ } else return { ...ef };
+ })
+ );
+ };
+ 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: {},
+ }}
+ >
+ {extFiles.map((file) => (
+ <FileMosaic
+ {...file}
+ key={file.id}
+ onDelete={onDelete}
+ onSee={handleSee}
+ onWatch={handleWatch}
+ onAbort={handleAbort}
+ onCancel={handleCancel}
+ resultOnTooltip
+ alwaysActive
+ preview
+ info
+ />
+ ))}
+ </Dropzone>
+ <FullScreen
+ open={imageSrc !== undefined}
+ onClose={() => setImageSrc(undefined)}
+ >
+ <ImagePreview src={imageSrc} />
+ </FullScreen>
+ <FullScreen
+ open={videoSrc !== undefined}
+ onClose={() => setVideoSrc(undefined)}
+ >
+ <VideoPreview src={videoSrc} autoPlay controls />
+ </FullScreen>
+ </>
+ );
}`;
-const completeCodeTS = completeCodeJS;
+const completeCodeTS = `import {
+ Dropzone,
+ ExtFile,
+ FileMosaic,
+ FileMosaicProps,
+ FullScreen,
+ ImagePreview,
+ VideoPreview,
+ } from "@files-ui/react";
+
+ const BASE_URL =
+ "https://files-ui-express-static-file-storage.vercel.app/39d33dff2d41b522c1ea276c4b82507f96b9699493d2e7b3f5c864ba743d9503";
+
+export default function AdvancedDropzoneDemo() {
+ const [extFiles, setExtFiles] = React.useState<ExtFile[]>([]);
+ const [imageSrc, setImageSrc] = React.useState<File | string | undefined>(
+ undefined
+ );
+ const [videoSrc, setVideoSrc] = React.useState<File | string | undefined>(
+ undefined
+ );
+ const updateFiles = (incommingFiles: ExtFile[]) => {
+ console.log("incomming files", incommingFiles);
+ setExtFiles(incommingFiles);
+ };
+ const onDelete = (id: FileMosaicProps["id"]) => {
+ setExtFiles(extFiles.filter((x) => x.id !== id));
+ };
+ const handleSee = (imageSource: File | string | undefined) => {
+ setImageSrc(imageSource);
+ };
+ const handleWatch = (videoSource: File | string | undefined) => {
+ setVideoSrc(videoSource);
+ };
+ const handleStart = (filesToUpload: ExtFile[]) => {
+ console.log("advanced demo start upload", filesToUpload);
+ };
+ const handleFinish = (uploadedFiles: ExtFile[]) => {
+ console.log("advanced demo finish upload", uploadedFiles);
+ };
+ const handleAbort = (id: FileMosaicProps["id"]) => {
+ setExtFiles(
+ extFiles.map((ef) => {
+ if (ef.id === id) {
+ return { ...ef, uploadStatus: "aborted" };
+ } else return { ...ef };
+ })
+ );
+ };
+ const handleCancel = (id: FileMosaicProps["id"]) => {
+ setExtFiles(
+ extFiles.map((ef) => {
+ if (ef.id === id) {
+ return { ...ef, uploadStatus: undefined };
+ } else return { ...ef };
+ })
+ );
+ };
+ 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: {},
+ }}
+ >
+ {extFiles.map((file) => (
+ <FileMosaic
+ {...file}
+ key={file.id}
+ onDelete={onDelete}
+ onSee={handleSee}
+ onWatch={handleWatch}
+ onAbort={handleAbort}
+ onCancel={handleCancel}
+ resultOnTooltip
+ alwaysActive
+ preview
+ info
+ />
+ ))}
+ </Dropzone>
+ <FullScreen
+ open={imageSrc !== undefined}
+ onClose={() => setImageSrc(undefined)}
+ >
+ <ImagePreview src={imageSrc} />
+ </FullScreen>
+ <FullScreen
+ open={videoSrc !== undefined}
+ onClose={() => setVideoSrc(undefined)}
+ >
+ <VideoPreview src={videoSrc} autoPlay controls />
+ </FullScreen>
+ </>
+ );
+}`;
const splittedCodeTS = splittedCodeJS;
diff --git a/src/components/demo-components/dropzone-demo/AdvancedDropzoneDemo.jsx b/src/components/demo-components/dropzone-demo/AdvancedDropzoneDemo.jsx
deleted file mode 100644
index 371fd2faa7e1ff12afc5e550c6dec5a5fce9585d..0000000000000000000000000000000000000000
--- a/src/components/demo-components/dropzone-demo/AdvancedDropzoneDemo.jsx
+++ /dev/null
@@ -1,152 +0,0 @@
-import * as React from "react";
-import {
- Dropzone,
- ExtFileInstance,
- FileMosaic,
- FullScreen,
- ImagePreview,
- VideoPreview,
-} from "../../../files-ui";
-import { useEffect, useState } from "react";
-import axios from "axios";
-const REMOTE =
- "https://files-ui-express-static-file-storage.vercel.app/39d33dff2d41b522c1ea276c4b82507f96b9699493d2e7b3f5c864ba743d9503";
-//const LOCAL = "http://localhost/39d33dff2d41b522c1ea276c4b82507f96b9699493d2e7b3f5c864ba743d9503";
-export default function AdvancedDropzoneDemo() {
- const [extFiles, setExtFiles] = useState([]);
-
- const [imageSrc, setImageSrc] = React.useState(undefined);
- const [videoSrc, setVideoSrc] = React.useState(undefined);
-
- const updateFiles = (incommingFiles) => {
- console.log(
- "incomming extFiles outside",
- incommingFiles.map((x) => x.uploadStatus)
- );
-
- const arrExtFIleInstances = incommingFiles.map(
- (extFile) => new ExtFileInstance(extFile)
- );
-
- console.log("incomming arrExtFIleInstances", arrExtFIleInstances);
- /* const listExtFileObjects = arrExtFIleInstances.map((extFileInstance) =>
- extFileInstance.toExtFile()
- );
-
- console.log("incomming listExtFileObjects", listExtFileObjects); */
-
- setExtFiles(incommingFiles);
- };
- const onDelete = (id) => {
- setExtFiles(extFiles.filter((x) => x.id !== id));
- };
- const handleSee = (imageSource) => {
- setImageSrc(imageSource);
- };
-
- const handleStart = (res) => {
- console.log("advanced demo start upload", res);
- };
- const handleFinish = (res) => {
- console.log("advanced demo finish upload", res);
- };
- const handleWatch = (videoSource) => {
- console.log(
- "handleWatch videoSource",
- "https://files-ui-temp-storage.s3.amazonaws.com/2029385a4ed32ff10beeb94c0585e8ac1a8c377c68d22ef25ce5863694a5499e.mp4"
- );
- //setVideoSrc(videoSource);
- //
- setVideoSrc(videoSource);
- // setVideoSrc("https://www.w3schools.com/tags/movie.mp4");
- };
-
- useEffect(() => {
- checkFiles();
- }, []);
- async function checkFiles() {
- try {
- const res = await axios.get(REMOTE + "/file");
- console.log("checkFiles", res);
- } catch (error) {
- console.log("checkFiles error", error);
- }
- }
- const handleAbort = (id) => {
- // alert(id);
- setExtFiles(
- extFiles.map((ef) => {
- if (ef.id === id) {
- return { ...ef, uploadStatus: "aborted" };
- } else return { ...ef };
- })
- );
- };
- const handleCancel = (id) => {
- // alert(id);
- setExtFiles(
- extFiles.map((ef) => {
- if (ef.id === id) {
- return { ...ef, uploadStatus: undefined };
- } else return { ...ef };
- })
- );
- };
- return (
- <>
- <Dropzone
- onChange={updateFiles}
- minHeight="195px"
- value={extFiles}
- maxFiles={3}
- /*maxFileSize={2998000 * 20} */
- label="Drag'n drop files here or click to browse"
- // accept=".png,image/*, video/*"
- uploadConfig={{
- /* autoUpload: true */
- method: "POST",
- url: REMOTE + "/file/28048465460",
- cleanOnUpload: true,
- }}
- onUploadStart={handleStart}
- onUploadFinish={handleFinish}
- //fakeUpload
- actionButtons={{
- position: "after",
- abortButton: {},
- deleteButton: {},
- uploadButton: {},
- }}
- >
- {extFiles.map((file) => (
- <FileMosaic
- {...file}
- key={file.id}
- onDelete={onDelete}
- onSee={handleSee}
- onWatch={handleWatch}
- onAbort={handleAbort}
- onCancel={handleCancel}
- resultOnTooltip
- alwaysActive
- preview
- info
- hd
- />
- ))}
- </Dropzone>
- <FullScreen
- open={imageSrc !== undefined}
- onClose={() => setImageSrc(undefined)}
- >
- <ImagePreview src={imageSrc} />
- </FullScreen>
- <FullScreen
- open={videoSrc !== undefined}
- onClose={() => setVideoSrc(undefined)}
- >
- <VideoPreview videoSrc={videoSrc} autoPlay controls />
- </FullScreen>
- </>
- );
-}
diff --git a/src/components/demo-components/dropzone-demo/AdvancedDropzoneDemo.tsx b/src/components/demo-components/dropzone-demo/AdvancedDropzoneDemo.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..fd943f6049c2c2726f1870a46cca19120ad85a09
--- /dev/null
+++ b/src/components/demo-components/dropzone-demo/AdvancedDropzoneDemo.tsx
@@ -0,0 +1,115 @@
+import * as React from "react";
+import {
+ Dropzone,
+ ExtFile,
+ FileMosaic,
+ FileMosaicProps,
+ FullScreen,
+ ImagePreview,
+ VideoPreview,
+} from "../../../files-ui";
+
+const BASE_URL =
+ "https://files-ui-express-static-file-storage.vercel.app/39d33dff2d41b522c1ea276c4b82507f96b9699493d2e7b3f5c864ba743d9503";
+
+export default function AdvancedDropzoneDemo() {
+ const [extFiles, setExtFiles] = React.useState<ExtFile[]>([]);
+ const [imageSrc, setImageSrc] = React.useState<File | string | undefined>(
+ undefined
+ );
+ const [videoSrc, setVideoSrc] = React.useState<File | string | undefined>(
+ undefined
+ );
+ const updateFiles = (incommingFiles: ExtFile[]) => {
+ console.log("incomming files", incommingFiles);
+ setExtFiles(incommingFiles);
+ };
+ const onDelete = (id: FileMosaicProps["id"]) => {
+ setExtFiles(extFiles.filter((x) => x.id !== id));
+ };
+ const handleSee = (imageSource: File | string | undefined) => {
+ setImageSrc(imageSource);
+ };
+ const handleWatch = (videoSource: File | string | undefined) => {
+ setVideoSrc(videoSource);
+ };
+ const handleStart = (filesToUpload: ExtFile[]) => {
+ console.log("advanced demo start upload", filesToUpload);
+ };
+ const handleFinish = (uploadedFiles: ExtFile[]) => {
+ console.log("advanced demo finish upload", uploadedFiles);
+ };
+ const handleAbort = (id: FileMosaicProps["id"]) => {
+ setExtFiles(
+ extFiles.map((ef) => {
+ if (ef.id === id) {
+ return { ...ef, uploadStatus: "aborted" };
+ } else return { ...ef };
+ })
+ );
+ };
+ const handleCancel = (id: FileMosaicProps["id"]) => {
+ setExtFiles(
+ extFiles.map((ef) => {
+ if (ef.id === id) {
+ return { ...ef, uploadStatus: undefined };
+ } else return { ...ef };
+ })
+ );
+ };
+ 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: {},
+ }}
+ >
+ {extFiles.map((file) => (
+ <FileMosaic
+ {...file}
+ key={file.id}
+ onDelete={onDelete}
+ onSee={handleSee}
+ onWatch={handleWatch}
+ onAbort={handleAbort}
+ onCancel={handleCancel}
+ resultOnTooltip
+ alwaysActive
+ preview
+ info
+ />
+ ))}
+ </Dropzone>
+ <FullScreen
+ open={imageSrc !== undefined}
+ onClose={() => setImageSrc(undefined)}
+ >
+ <ImagePreview src={imageSrc} />
+ </FullScreen>
+ <FullScreen
+ open={videoSrc !== undefined}
+ onClose={() => setVideoSrc(undefined)}
+ >
+ <VideoPreview src={videoSrc} autoPlay controls />
+ </FullScreen>
+ </>
+ );
+}
diff --git a/src/components/demo-components/main-page/DropzoneMainPage.jsx b/src/components/demo-components/main-page/DropzoneMainPage.jsx
index adde2c95212aee8dea73e07d37ce0a4a7f923aeb..0f2bc431e3cf681af46b2e7e8c34807186616f9a 100644
--- a/src/components/demo-components/main-page/DropzoneMainPage.jsx
+++ b/src/components/demo-components/main-page/DropzoneMainPage.jsx
@@ -46,24 +46,23 @@ const DropzoneMainPage = ({ darkMode = false }) => {
accept=".jpg, .png, application/json, video/*, .pdf"
fakeUpload
behaviour="add"
- uploadConfig={{ autoUpload: true , url:"fdbd"}}
+ uploadConfig={{ autoUpload: true, url: "fdbd" }}
>
- {files.length > 0 &&
- files.map((file) => (
- <FileMosaic
- darkMode={darkMode}
- {...file}
- preview
- onDelete={removeFile}
- key={file.id}
- info
- alwaysActive
- hd
- onSee={handleSee}
- resultOnTooltip
- //uploadMessage="llalalal"
- />
- ))}
+ {files.map((file) => (
+ <FileMosaic
+ darkMode={darkMode}
+ {...file}
+ preview
+ onDelete={removeFile}
+ key={file.id}
+ info
+ alwaysActive
+ hd
+ onSee={handleSee}
+ resultOnTooltip
+ //uploadMessage="llalalal"
+ />
+ ))}
</Dropzone>
<DescParagraph margin="10px 0" darkMode={darkMode}>