Skip to content
Snippets Groups Projects
Commit 5bb608ca authored by Jose Manuel Serrano Amaut's avatar Jose Manuel Serrano Amaut
Browse files

[REF]: Refactor advanced demo and code

parent df0ea490
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
src/components/demo-components/dropzone-demo/AdvancedDropzoneCodeJS.jsx
+ 266
− 73
View file @ 5bb608ca
......@@ -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
// 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: {},
}}
>
{files.map((file) => (
<FileItem
{extFiles.map((file) => (
<FileMosaic
{...file}
key={file.id}
onDelete={onDelete}
onSee={handleSee}
onWatch={handleWatch}
onAbort={handleAbort}
onCancel={handleCancel}
resultOnTooltip
alwaysActive
preview
info
hd
/>
))}
</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);
</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);
setFiles(incommingFiles);
setExtFiles(incommingFiles);
};
const onDelete = (id) => {
setFiles(files.filter((x) => x.id !== id));
setExtFiles(extFiles.filter((x) => x.id !== id));
};
const handleSee = (imageSource) => {
setImageSrc(imageSource);
};
const handleClean = (files) => {
console.log("list cleaned", files);
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
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
// 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: {},
}}
>
{files.map((file) => (
<FileItem
{extFiles.map((file) => (
<FileMosaic
{...file}
key={file.id}
onDelete={onDelete}
onSee={handleSee}
onWatch={handleWatch}
onAbort={handleAbort}
onCancel={handleCancel}
resultOnTooltip
alwaysActive
preview
info
hd
/>
))}
</Dropzone>
<FullScreenPreview
imgSource={imageSrc}
openImage={imageSrc}
onClose={(e) => handleSee(undefined)}
/>
<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;
src/components/demo-components/dropzone-demo/AdvancedDropzoneDemo.jsx → src/components/demo-components/dropzone-demo/AdvancedDropzoneDemo.tsx
+ 115
− 0
View file @ 5bb608ca
import * as React from "react";
import {
Dropzone,
ExtFileInstance,
ExtFile,
FileMosaic,
FileMosaicProps,
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 BASE_URL =
"https://files-ui-express-static-file-storage.vercel.app/39d33dff2d41b522c1ea276c4b82507f96b9699493d2e7b3f5c864ba743d9503";
const arrExtFIleInstances = incommingFiles.map(
(extFile) => new ExtFileInstance(extFile)
export default function AdvancedDropzoneDemo() {
const [extFiles, setExtFiles] = React.useState<ExtFile[]>([]);
const [imageSrc, setImageSrc] = React.useState<File | string | undefined>(
undefined
);
console.log("incomming arrExtFIleInstances", arrExtFIleInstances);
/* const listExtFileObjects = arrExtFIleInstances.map((extFileInstance) =>
extFileInstance.toExtFile()
const [videoSrc, setVideoSrc] = React.useState<File | string | undefined>(
undefined
);
console.log("incomming listExtFileObjects", listExtFileObjects); */
const updateFiles = (incommingFiles: ExtFile[]) => {
console.log("incomming files", incommingFiles);
setExtFiles(incommingFiles);
};
const onDelete = (id) => {
const onDelete = (id: FileMosaicProps["id"]) => {
setExtFiles(extFiles.filter((x) => x.id !== id));
};
const handleSee = (imageSource) => {
const handleSee = (imageSource: File | string | undefined) => {
setImageSrc(imageSource);
};
const handleStart = (res) => {
console.log("advanced demo start upload", res);
const handleWatch = (videoSource: File | string | undefined) => {
setVideoSrc(videoSource);
};
const handleFinish = (res) => {
console.log("advanced demo finish upload", res);
const handleStart = (filesToUpload: ExtFile[]) => {
console.log("advanced demo start upload", filesToUpload);
};
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");
const handleFinish = (uploadedFiles: ExtFile[]) => {
console.log("advanced demo finish upload", uploadedFiles);
};
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);
const handleAbort = (id: FileMosaicProps["id"]) => {
setExtFiles(
extFiles.map((ef) => {
if (ef.id === id) {
......@@ -82,8 +48,7 @@ export default function AdvancedDropzoneDemo() {
})
);
};
const handleCancel = (id) => {
// alert(id);
const handleCancel = (id: FileMosaicProps["id"]) => {
setExtFiles(
extFiles.map((ef) => {
if (ef.id === id) {
......@@ -99,13 +64,12 @@ export default function AdvancedDropzoneDemo() {
minHeight="195px"
value={extFiles}
maxFiles={3}
/*maxFileSize={2998000 * 20} */
// FmaxFileSize={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",
// autoUpload: true
url: BASE_URL + "/file/28048465460",
cleanOnUpload: true,
}}
onUploadStart={handleStart}
......@@ -131,7 +95,6 @@ export default function AdvancedDropzoneDemo() {
alwaysActive
preview
info
hd
/>
))}
</Dropzone>
......@@ -145,7 +108,7 @@ export default function AdvancedDropzoneDemo() {
open={videoSrc !== undefined}
onClose={() => setVideoSrc(undefined)}
>
<VideoPreview videoSrc={videoSrc} autoPlay controls />
<VideoPreview src={videoSrc} autoPlay controls />
</FullScreen>
</>
);
......
src/components/demo-components/main-page/DropzoneMainPage.jsx
+ 16
− 17
View file @ 5bb608ca
......@@ -48,8 +48,7 @@ const DropzoneMainPage = ({ darkMode = false }) => {
behaviour="add"
uploadConfig={{ autoUpload: true, url: "fdbd" }}
>
{files.length > 0 &&
files.map((file) => (
{files.map((file) => (
<FileMosaic
darkMode={darkMode}
{...file}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment