Proyectos de Subversion LeadersLinked - Backend

Rev

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