Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 7419 | Rev 7426 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
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 
 
7422 stevensc 43 
    console.log(acceptedMimeTypes[modalType])
44 
 
7419 stevensc 45 
    const { getRootProps, getInputProps, acceptedFiles } = useDropzone({
7422 stevensc 46 
        accept: acceptedMimeTypes[modalType],
7386 stevensc 47 
        multiple: false,
7419 stevensc 48 
        onDrop: (accepted) => {
7418 stevensc 49 
            console.log(acceptedFiles)
7419 stevensc 50 
            console.log(accepted)
7386 stevensc 51 
        },
52 
        onDropRejected,
53 
        onDropAccepted: () => {
54 
            setErrors([]);
55 
        },
56 
        maxFiles: 1,
7419 stevensc 57 
    })
7386 stevensc 58 
 
7419 stevensc 59 
 
7386 stevensc 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;