| 7386 |
stevensc |
1 |
import React, { useState, useCallback, useEffect } from "react";
|
|
|
2 |
import { useDropzone } from "react-dropzone";
|
|
|
3 |
import { baseStyle, imgStyle, thumbsContainerStyle } from "../../assets/styles/js-styles/Dropzone";
|
|
|
4 |
import FilePreview from "./FilePreview";
|
|
|
5 |
|
|
|
6 |
const DropzoneComponent = React.memo(({
|
|
|
7 |
modalType,
|
|
|
8 |
onUploaded,
|
|
|
9 |
settedFile,
|
|
|
10 |
recomendationText
|
|
|
11 |
}) => {
|
|
|
12 |
|
|
|
13 |
const [errors, setErrors] = useState([]);
|
|
|
14 |
const [files, setFiles] = useState([]);
|
|
|
15 |
|
|
|
16 |
const onDropRejected = useCallback((rejectedFiles) => {
|
|
|
17 |
rejectedFiles.map((fileRejection) => {
|
|
|
18 |
switch (fileRejection.errors[0].code) {
|
|
|
19 |
case "too-many-files":
|
|
|
20 |
setErrors([...errors, "solo puedes agregar 1 archivo"]);
|
|
|
21 |
break;
|
|
|
22 |
case "file-invalid-type":
|
|
|
23 |
setErrors([...errors, "por favor seleccione un archivo valido"]);
|
|
|
24 |
break;
|
|
|
25 |
default:
|
|
|
26 |
setErrors(errors);
|
|
|
27 |
break;
|
|
|
28 |
}
|
|
|
29 |
});
|
|
|
30 |
}, []);
|
|
|
31 |
|
|
|
32 |
useEffect(() => {
|
|
|
33 |
if (settedFile) setFiles([settedFile]);
|
|
|
34 |
}, [settedFile]);
|
|
|
35 |
|
|
|
36 |
const acceptedMimeTypes = {
|
|
|
37 |
IMAGE: "image/jpeg, image/png, image/jpg",
|
|
|
38 |
FILE: "application/pdf",
|
|
|
39 |
VIDEO: "video/mp4, video/mpeg, video/webm",
|
|
|
40 |
CHAT: "video/mp4, video/mpeg, video/webm, application/pdf, image/jpeg, image/png, image/jpg"
|
|
|
41 |
}
|
|
|
42 |
|
|
|
43 |
const {
|
|
|
44 |
getRootProps,
|
|
|
45 |
getInputProps
|
|
|
46 |
} = useDropzone({
|
|
|
47 |
accept: acceptedMimeTypes,
|
|
|
48 |
multiple: false,
|
|
|
49 |
onDrop: (acceptedFiles) => {
|
|
|
50 |
onUploaded(acceptedFiles[0]);
|
|
|
51 |
setFiles(acceptedFiles.map((file) => file));
|
|
|
52 |
},
|
|
|
53 |
onDropRejected,
|
|
|
54 |
onDropAccepted: () => {
|
|
|
55 |
setErrors([]);
|
|
|
56 |
},
|
|
|
57 |
maxFiles: 1,
|
|
|
58 |
});
|
|
|
59 |
|
|
|
60 |
const onDeleteFileHandler = (index) => {
|
|
|
61 |
onUploaded('');
|
|
|
62 |
setFiles((prev) => prev.splice(index, 1));
|
|
|
63 |
};
|
|
|
64 |
|
|
|
65 |
const filePreviewOptions = (modalType, file) => {
|
|
|
66 |
const options = {
|
|
|
67 |
IMAGE: <img src={URL.createObjectURL(file)} style={imgStyle} />,
|
|
|
68 |
FILE: <object data={URL.createObjectURL(file)} type="application/pdf" width="400" height="200" />,
|
|
|
69 |
VIDEO: <video src={URL.createObjectURL(file)} width="400" height="300" controls autoPlay muted />
|
|
|
70 |
}
|
|
|
71 |
|
|
|
72 |
return options[modalType]
|
|
|
73 |
}
|
|
|
74 |
|
|
|
75 |
return (
|
|
|
76 |
<div>
|
|
|
77 |
{
|
|
|
78 |
!files.length
|
|
|
79 |
&&
|
|
|
80 |
<div {...getRootProps({ className: "dropzone", style: baseStyle })}>
|
|
|
81 |
<input {...getInputProps()} />
|
|
|
82 |
<p>Arrastra el archivo aqui, o haga click para seleccionar</p>
|
|
|
83 |
{recomendationText}
|
|
|
84 |
</div>
|
|
|
85 |
}
|
|
|
86 |
<aside>
|
|
|
87 |
<div style={thumbsContainerStyle}>
|
|
|
88 |
{
|
|
|
89 |
files.map((file, index) =>
|
|
|
90 |
<FilePreview
|
|
|
91 |
onDeleteFileHandler={() => onDeleteFileHandler(index)}
|
|
|
92 |
>
|
|
|
93 |
{filePreviewOptions(modalType, file)}
|
|
|
94 |
</FilePreview>
|
|
|
95 |
)
|
|
|
96 |
}
|
|
|
97 |
</div>
|
|
|
98 |
</aside>
|
|
|
99 |
</div>
|
|
|
100 |
);
|
|
|
101 |
});
|
|
|
102 |
|
|
|
103 |
export default DropzoneComponent;
|