Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3639 | Ir a la última revisión | | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
3476 stevensc 1 
import React, { useCallback, useEffect, useState } from 'react';
2 
import { useDropzone } from 'react-dropzone';
3 
import { IconButton, styled, Typography } from '@mui/material';
4 
import { Delete } from '@mui/icons-material';
5 
 
6 
const DragAndDropContainer = styled('div')`
7 
  display: flex;
8 
  flex-direction: column;
9 
  align-items: center;
10 
  padding: 2rem 0;
11 
  border: 2px dashed #eee;
12 
  border-radius: 2;
13 
  background-color: #fafafa;
14 
  color: #bdbdbd;
15 
  outline: none;
16 
  transition: border 0.24s ease-in-out;
17 
  text-align: center;
18 
  cursor: pointer;
19 
`;
20 
 
21 
const PreviewContainer = styled('div')`
22 
  display: flex;
23 
  position: relative;
24 
  justify-content: center;
25 
 
26 
  img,
27 
  video,
28 
  object {
29 
    width: 80%;
30 
    max-height: 200px;
31 
    max-width: 350px;
32 
    object-fit: contain;
33 
    display: block;
34 
    margin: 0 auto;
35 
  }
36 
`;
37 
 
38 
const CloseButton = styled(IconButton)`
39 
  position: absolute;
40 
  background-color: #000;
41 
  color: #fff;
42 
  right: 1rem;
43 
  svg {
44 
    font-size: 1rem;
45 
  }
46 
`;
47 
 
48 
const FILE_TYPES = {
49 
  image: 'image/jpeg, image/png, image/jpg',
50 
  file: 'application/pdf, application/vnd.openxmlformats-officedocument.presentationml.presentation',
51 
  video: 'video/mp4, video/mpeg, video/webm, video/quicktime'
52 
};
53 
 
54 
export function FilePicker({
55 
  type = 'image',
56 
  multiple = false,
57 
  maxFiles = 1,
58 
  description = 'Arrastra el archivo aqui, o haga click para seleccionar',
59 
  defaultFiles = null,
60 
  onChange = () => {}
61 
}) {
62 
  const [errors, setErrors] = useState([]);
63 
  const [files, setFiles] = useState([]);
64 
 
65 
  const onDrop = useCallback((acceptedFiles, fileRejections) => {
66 
    onChange(acceptedFiles);
67 
    setFiles(
68 
      acceptedFiles.map((file) => Object.assign(file, { preview: URL.createObjectURL(file) }))
69 
    );
70 
    if (fileRejections.length > 0) {
71 
      setErrors(fileRejections.map((file) => file.errors[0].message));
72 
    } else {
73 
      setErrors([]);
74 
    }
75 
  }, []);
76 
 
77 
  const { getRootProps, getInputProps } = useDropzone({
78 
    accept: FILE_TYPES[type] ?? FILE_TYPES.image,
79 
    multiple,
80 
    maxFiles,
81 
    onDrop
82 
  });
83 
 
84 
  const removeFile = () => {
85 
    setFiles([]);
86 
    setErrors([]);
87 
  };
88 
 
89 
  const filePreviewTest = (file) => {
90 
    switch (type) {
91 
      case 'image':
92 
        return <img src={file.preview} />;
93 
      case 'video':
94 
        return <video src={file.preview} width='400' height='300' controls muted />;
95 
      case 'file':
96 
        switch (file.type) {
97 
          case 'application/pdf':
98 
            return <object data={file.preview} type='application/pdf' width='400' height='200' />;
99 
          default:
100 
            break;
101 
        }
102 
        break;
103 
      default:
104 
        break;
105 
    }
106 
  };
107 
 
108 
  useEffect(() => {
109 
    if (defaultFiles) setFiles(defaultFiles);
110 
  }, [defaultFiles]);
111 
 
112 
  if (files.length) {
113 
    return (
114 
      <PreviewContainer>
115 
        {files.map((file) => filePreviewTest(file))}
116 
        <CloseButton onClick={removeFile}>
117 
          <Delete />
118 
        </CloseButton>
119 
      </PreviewContainer>
120 
    );
121 
  }
122 
 
123 
  return (
124 
    <>
125 
      <DragAndDropContainer {...getRootProps()}>
126 
        <input {...getInputProps()} />
127 
        <p>{description}</p>
128 
      </DragAndDropContainer>
129 
 
130 
      {errors.map((error, index) => (
131 
        <Typography key={index} variant='caption' color='red'>
132 
          {error}
133 
        </Typography>
134 
      ))}
135 
    </>
136 
  );
137 
}