blob: 5c882be20c6e89d8f9f4688249829e1512e0018c (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
|
'use client';
import Dropzone from 'react-dropzone';
import UploadIcon from '@icons/upload.svg';
import { Button } from '@/components/ui';
import { useEffect, useState } from 'react';
export function FileDropzone() {
const [file, setFile] = useState<File | null>(null);
const [preview, setPreview] = useState<string | null>(null);
useEffect(() => {
return () => {
if (preview) URL.revokeObjectURL(preview);
};
}, [preview]);
return (
<Dropzone
multiple={false}
accept={{ 'image/*': [] }}
onDrop={(acceptedFiles) => {
const f = acceptedFiles[0];
if (!f) return;
const url = URL.createObjectURL(f);
setFile(f);
setPreview(url);
}}
>
{({ getRootProps, getInputProps }) => (
<div
{...getRootProps({
className:
'w-[900px] h-[508px] flex flex-col gap-[20px]',
})}
>
<input {...getInputProps()} />
<div
className={`
w-full
flex-1
relative
overflow-hidden
rounded-[10px]
border border-violet
${preview ? 'bg-violet/30' : 'bg-background'}
`}
>
{!preview ? (
<div className="w-full h-full flex flex-col justify-center items-center gap-[60px] p-[30px]">
<UploadIcon />
<span className="text-center">
Выбери файлы на компьютере или перетащи
сюда. JPG, PNG до 20MB.
</span>
</div>
) : (
<img
src={preview}
alt="preview"
className="w-full h-full object-contain"
/>
)}
</div>
<Button size="lg">
{preview ? 'Заменить' : 'Выбрать'}
</Button>
</div>
)}
</Dropzone>
);
}
|
