Skip to content

Commit 5bb608c

Browse files
JinSSJ3JinSSJ3
committed
[REF]: Refactor advanced demo and code
1 parent df0ea49 commit 5bb608c

File tree

4 files changed

+397
-242
lines changed

4 files changed

+397
-242
lines changed

‎src/components/demo-components/dropzone-demo/AdvancedDropzoneCodeJS.jsx‎

Lines changed: 266 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -16,85 +16,278 @@ const AdvancedDropzoneCodeJS = (props) => {
1616
export default AdvancedDropzoneCodeJS;
1717

1818
const splittedCodeJS = `<Dropzone
19-
style={{ minWidth: "550px" }}
2019
onChange={updateFiles}
2120
minHeight="195px"
22-
value={files}
23-
maxFiles={5}
24-
maxFileSize={2998000}
21+
value={extFiles}
22+
maxFiles={3}
23+
// FmaxFileSize={2998000 * 20}
2524
label="Drag'n drop files here or click to browse"
26-
accept=".png, image/*"
27-
url="https://my-awsome-server/upload-my-file"
28-
uploadOnDrop
29-
fakeUploading
30-
>
31-
{files.map((file) => (
32-
<FileItem
25+
// accept=".png,image/*, video/*"
26+
uploadConfig={{
27+
// autoUpload: true
28+
url: BASE_URL + "/file/28048465460",
29+
cleanOnUpload: true,
30+
}}
31+
onUploadStart={handleStart}
32+
onUploadFinish={handleFinish}
33+
//fakeUpload
34+
actionButtons={{
35+
position: "after",
36+
abortButton: {},
37+
deleteButton: {},
38+
uploadButton: {},
39+
}}
40+
>
41+
{extFiles.map((file) => (
42+
<FileMosaic
3343
{...file}
34-
key={file.id}
35-
onDelete={onDelete}
36-
onSee={handleSee}
37-
resultOnTooltip
38-
preview
39-
info
40-
hd
44+
key={file.id}
45+
onDelete={onDelete}
46+
onSee={handleSee}
47+
onWatch={handleWatch}
48+
onAbort={handleAbort}
49+
onCancel={handleCancel}
50+
resultOnTooltip
51+
alwaysActive
52+
preview
53+
info
4154
/>
4255
))}
43-
</Dropzone>`;
44-
const completeCodeJS = `import { Dropzone, FileItem, FullScreenPreview } from "@dropzone-ui/react";
45-
import { useState } from "react";
46-
export default function App() {
47-
const [files, setFiles] = useState([]);
48-
const [imageSrc, setImageSrc] = useState(undefined);
49-
const updateFiles = (incommingFiles) => {
50-
console.log("incomming files", incommingFiles);
51-
setFiles(incommingFiles);
52-
};
53-
const onDelete = (id) => {
54-
setFiles(files.filter((x) => x.id !== id));
55-
};
56-
const handleSee = (imageSource) => {
57-
setImageSrc(imageSource);
58-
};
59-
const handleClean = (files) => {
60-
console.log("list cleaned", files);
61-
};
62-
return (
63-
<>
64-
<Dropzone
65-
style={{ minWidth: "550px" }}
66-
onChange={updateFiles}
67-
minHeight="195px"
68-
value={files}
69-
maxFiles={5}
70-
maxFileSize={2998000}
71-
label="Drag'n drop files here or click to browse"
72-
accept=".png,image/*"
73-
url="https://my-awsome-server/upload-my-file"
74-
uploadOnDrop
75-
fakeUploading
76-
>
77-
{files.map((file) => (
78-
<FileItem
79-
{...file}
80-
key={file.id}
81-
onDelete={onDelete}
82-
onSee={handleSee}
83-
resultOnTooltip
84-
preview
85-
info
86-
hd
87-
/>
88-
))}
89-
</Dropzone>
90-
<FullScreenPreview
91-
imgSource={imageSrc}
92-
openImage={imageSrc}
93-
onClose={(e) => handleSee(undefined)}
94-
/>
95-
</>
96-
);
56+
</Dropzone>
57+
<FullScreen
58+
open={imageSrc !== undefined}
59+
onClose={() => setImageSrc(undefined)}
60+
>
61+
<ImagePreview src={imageSrc} />
62+
</FullScreen>
63+
<FullScreen
64+
open={videoSrc !== undefined}
65+
onClose={() => setVideoSrc(undefined)}
66+
>
67+
<VideoPreview src={videoSrc} autoPlay controls />
68+
</FullScreen>`;
69+
const completeCodeJS = `import {
70+
Dropzone,
71+
FileMosaic,
72+
FullScreen,
73+
ImagePreview,
74+
VideoPreview,
75+
} from "@files-ui/react";
76+
77+
const BASE_URL =
78+
"https://files-ui-express-static-file-storage.vercel.app/39d33dff2d41b522c1ea276c4b82507f96b9699493d2e7b3f5c864ba743d9503";
79+
80+
export default function AdvancedDropzoneDemo() {
81+
const [extFiles, setExtFiles] = React.useState([]);
82+
const [imageSrc, setImageSrc] = React.useState(undefined);
83+
const [videoSrc, setVideoSrc] = React.useState(undefined);
84+
85+
const updateFiles = (incommingFiles) => {
86+
console.log("incomming files", incommingFiles);
87+
setExtFiles(incommingFiles);
88+
};
89+
const onDelete = (id) => {
90+
setExtFiles(extFiles.filter((x) => x.id !== id));
91+
};
92+
const handleSee = (imageSource) => {
93+
setImageSrc(imageSource);
94+
};
95+
const handleWatch = (videoSource) => {
96+
setVideoSrc(videoSource);
97+
};
98+
const handleStart = (filesToUpload) => {
99+
console.log("advanced demo start upload", filesToUpload);
100+
};
101+
const handleFinish = (uploadedFiles) => {
102+
console.log("advanced demo finish upload", uploadedFiles);
103+
};
104+
const handleAbort = (id) => {
105+
setExtFiles(
106+
extFiles.map((ef) => {
107+
if (ef.id === id) {
108+
return { ...ef, uploadStatus: "aborted" };
109+
} else return { ...ef };
110+
})
111+
);
112+
};
113+
const handleCancel = (id) => {
114+
setExtFiles(
115+
extFiles.map((ef) => {
116+
if (ef.id === id) {
117+
return { ...ef, uploadStatus: undefined };
118+
} else return { ...ef };
119+
})
120+
);
121+
};
122+
return (
123+
<>
124+
<Dropzone
125+
onChange={updateFiles}
126+
minHeight="195px"
127+
value={extFiles}
128+
maxFiles={3}
129+
// FmaxFileSize={2998000 * 20}
130+
label="Drag'n drop files here or click to browse"
131+
// accept=".png,image/*, video/*"
132+
uploadConfig={{
133+
// autoUpload: true
134+
url: BASE_URL + "/file/28048465460",
135+
cleanOnUpload: true,
136+
}}
137+
onUploadStart={handleStart}
138+
onUploadFinish={handleFinish}
139+
//fakeUpload
140+
actionButtons={{
141+
position: "after",
142+
abortButton: {},
143+
deleteButton: {},
144+
uploadButton: {},
145+
}}
146+
>
147+
{extFiles.map((file) => (
148+
<FileMosaic
149+
{...file}
150+
key={file.id}
151+
onDelete={onDelete}
152+
onSee={handleSee}
153+
onWatch={handleWatch}
154+
onAbort={handleAbort}
155+
onCancel={handleCancel}
156+
resultOnTooltip
157+
alwaysActive
158+
preview
159+
info
160+
/>
161+
))}
162+
</Dropzone>
163+
<FullScreen
164+
open={imageSrc !== undefined}
165+
onClose={() => setImageSrc(undefined)}
166+
>
167+
<ImagePreview src={imageSrc} />
168+
</FullScreen>
169+
<FullScreen
170+
open={videoSrc !== undefined}
171+
onClose={() => setVideoSrc(undefined)}
172+
>
173+
<VideoPreview src={videoSrc} autoPlay controls />
174+
</FullScreen>
175+
</>
176+
);
97177
}`;
98178

99-
const completeCodeTS = completeCodeJS;
179+
const completeCodeTS = `import {
180+
Dropzone,
181+
ExtFile,
182+
FileMosaic,
183+
FileMosaicProps,
184+
FullScreen,
185+
ImagePreview,
186+
VideoPreview,
187+
} from "@files-ui/react";
188+
189+
const BASE_URL =
190+
"https://files-ui-express-static-file-storage.vercel.app/39d33dff2d41b522c1ea276c4b82507f96b9699493d2e7b3f5c864ba743d9503";
191+
192+
export default function AdvancedDropzoneDemo() {
193+
const [extFiles, setExtFiles] = React.useState<ExtFile[]>([]);
194+
const [imageSrc, setImageSrc] = React.useState<File | string | undefined>(
195+
undefined
196+
);
197+
const [videoSrc, setVideoSrc] = React.useState<File | string | undefined>(
198+
undefined
199+
);
200+
const updateFiles = (incommingFiles: ExtFile[]) => {
201+
console.log("incomming files", incommingFiles);
202+
setExtFiles(incommingFiles);
203+
};
204+
const onDelete = (id: FileMosaicProps["id"]) => {
205+
setExtFiles(extFiles.filter((x) => x.id !== id));
206+
};
207+
const handleSee = (imageSource: File | string | undefined) => {
208+
setImageSrc(imageSource);
209+
};
210+
const handleWatch = (videoSource: File | string | undefined) => {
211+
setVideoSrc(videoSource);
212+
};
213+
const handleStart = (filesToUpload: ExtFile[]) => {
214+
console.log("advanced demo start upload", filesToUpload);
215+
};
216+
const handleFinish = (uploadedFiles: ExtFile[]) => {
217+
console.log("advanced demo finish upload", uploadedFiles);
218+
};
219+
const handleAbort = (id: FileMosaicProps["id"]) => {
220+
setExtFiles(
221+
extFiles.map((ef) => {
222+
if (ef.id === id) {
223+
return { ...ef, uploadStatus: "aborted" };
224+
} else return { ...ef };
225+
})
226+
);
227+
};
228+
const handleCancel = (id: FileMosaicProps["id"]) => {
229+
setExtFiles(
230+
extFiles.map((ef) => {
231+
if (ef.id === id) {
232+
return { ...ef, uploadStatus: undefined };
233+
} else return { ...ef };
234+
})
235+
);
236+
};
237+
return (
238+
<>
239+
<Dropzone
240+
onChange={updateFiles}
241+
minHeight="195px"
242+
value={extFiles}
243+
maxFiles={3}
244+
// FmaxFileSize={2998000 * 20}
245+
label="Drag'n drop files here or click to browse"
246+
// accept=".png,image/*, video/*"
247+
uploadConfig={{
248+
// autoUpload: true
249+
url: BASE_URL + "/file/28048465460",
250+
cleanOnUpload: true,
251+
}}
252+
onUploadStart={handleStart}
253+
onUploadFinish={handleFinish}
254+
//fakeUpload
255+
actionButtons={{
256+
position: "after",
257+
abortButton: {},
258+
deleteButton: {},
259+
uploadButton: {},
260+
}}
261+
>
262+
{extFiles.map((file) => (
263+
<FileMosaic
264+
{...file}
265+
key={file.id}
266+
onDelete={onDelete}
267+
onSee={handleSee}
268+
onWatch={handleWatch}
269+
onAbort={handleAbort}
270+
onCancel={handleCancel}
271+
resultOnTooltip
272+
alwaysActive
273+
preview
274+
info
275+
/>
276+
))}
277+
</Dropzone>
278+
<FullScreen
279+
open={imageSrc !== undefined}
280+
onClose={() => setImageSrc(undefined)}
281+
>
282+
<ImagePreview src={imageSrc} />
283+
</FullScreen>
284+
<FullScreen
285+
open={videoSrc !== undefined}
286+
onClose={() => setVideoSrc(undefined)}
287+
>
288+
<VideoPreview src={videoSrc} autoPlay controls />
289+
</FullScreen>
290+
</>
291+
);
292+
}`;
100293
const splittedCodeTS = splittedCodeJS;

0 commit comments

Comments
 (0)