Proyectos de Subversion LeadersLinked - Backend

Rev

Rev 7426 | Rev 15267 | 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 
 
7419 stevensc 43 
    const { getRootProps, getInputProps, acceptedFiles } = useDropzone({
7422 stevensc 44 
        accept: acceptedMimeTypes[modalType],
7386 stevensc 45 
        multiple: false,
7419 stevensc 46 
        onDrop: (accepted) => {
7426 stevensc 47 
            onUploaded(accepted[0]);
48 
            setFiles(accepted[0]);
7386 stevensc 49 
        },
50 
        onDropRejected,
51 
        onDropAccepted: () => {
52 
            setErrors([]);
53 
        },
54 
        maxFiles: 1,
7419 stevensc 55 
    })
7386 stevensc 56 
 
7419 stevensc 57 
 
7427 stevensc 58 
    const onDeleteFileHandler = (id) => {
7386 stevensc 59 
        onUploaded('');
7427 stevensc 60 
        setFiles(files.filter(file => file !== id));
7386 stevensc 61 
    };
62 
 
63 
    const filePreviewOptions = (modalType, file) => {
64 
        const options = {
65 
            IMAGE: <img src={URL.createObjectURL(file)} style={imgStyle} />,
66 
            FILE: <object data={URL.createObjectURL(file)} type="application/pdf" width="400" height="200" />,
67 
            VIDEO: <video src={URL.createObjectURL(file)} width="400" height="300" controls autoPlay muted />
68 
        }
69 
 
70 
        return options[modalType]
71 
    }
72 
 
73 
    return (
74 
        <div>
75 
            {
76 
                !files.length
77 
                &&
78 
                <div {...getRootProps({ className: "dropzone", style: baseStyle })}>
79 
                    <input {...getInputProps()} />
80 
                    <p>Arrastra el archivo aqui, o haga click para seleccionar</p>
81 
                    {recomendationText}
82 
                </div>
83 
            }
84 
            <aside>
85 
                <div style={thumbsContainerStyle}>
86 
                    {
87 
                        files.map((file, index) =>
88 
                            <FilePreview
7427 stevensc 89 
                                onDeleteFileHandler={() => onDeleteFileHandler(file)}
90 
                                key={index}
7386 stevensc 91 
                            >
92 
                                {filePreviewOptions(modalType, file)}
93 
                            </FilePreview>
94 
                        )
95 
                    }
96 
                </div>
97 
            </aside>
98 
        </div>
99 
    );
100 
});
101 
 
102 
export default DropzoneComponent;