Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3641 | Rev 3658 | Ir a la última revisión | | Comparar con el anterior | 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',
3639 stevensc 51 
  video: 'video/mp4, video/mpeg, video/webm, video/quicktime',
52 
  all: 'image/jpeg, image/png, image/jpg, application/pdf, application/vnd.openxmlformats-officedocument.presentationml.presentation, video/mp4, video/mpeg, video/webm, video/quicktime'
3476 stevensc 53 
};
54 
 
55 
export function FilePicker({
56 
  type = 'image',
57 
  multiple = false,
58 
  maxFiles = 1,
59 
  description = 'Arrastra el archivo aqui, o haga click para seleccionar',
60 
  defaultFiles = null,
61 
  onChange = () => {}
62 
}) {
63 
  const [errors, setErrors] = useState([]);
64 
  const [files, setFiles] = useState([]);
65 
 
66 
  const onDrop = useCallback((acceptedFiles, fileRejections) => {
67 
    onChange(acceptedFiles);
3642 stevensc 68 
    setFiles(acceptedFiles);
3476 stevensc 69 
    if (fileRejections.length > 0) {
70 
      setErrors(fileRejections.map((file) => file.errors[0].message));
71 
    } else {
72 
      setErrors([]);
73 
    }
74 
  }, []);
75 
 
76 
  const { getRootProps, getInputProps } = useDropzone({
77 
    accept: FILE_TYPES[type] ?? FILE_TYPES.image,
78 
    multiple,
79 
    maxFiles,
80 
    onDrop
81 
  });
82 
 
83 
  const removeFile = () => {
84 
    setFiles([]);
85 
    setErrors([]);
86 
  };
87 
 
88 
  const filePreviewTest = (file) => {
3642 stevensc 89 
    const preview = URL.createObjectURL(file);
90 
    const type = file.type.split('/')[0];
3641 stevensc 91 
 
3642 stevensc 92 
    switch (type) {
3476 stevensc 93 
      case 'image':
3642 stevensc 94 
        return <img src={preview} />;
3476 stevensc 95 
      case 'video':
3642 stevensc 96 
        return <video src={preview} width='400' height='300' controls muted />;
3476 stevensc 97 
      case 'file':
3642 stevensc 98 
        return <object data={preview} type={file.type} width='400' height='200' />;
3639 stevensc 99 
      case 'audio':
3642 stevensc 100 
        return <audio src={preview} controls muted />;
3639 stevensc 101 
 
3476 stevensc 102 
      default:
103 
        break;
104 
    }
105 
  };
106 
 
107 
  useEffect(() => {
108 
    if (defaultFiles) setFiles(defaultFiles);
109 
  }, [defaultFiles]);
110 
 
111 
  if (files.length) {
112 
    return (
113 
      <PreviewContainer>
114 
        {files.map((file) => filePreviewTest(file))}
115 
        <CloseButton onClick={removeFile}>
116 
          <Delete />
117 
        </CloseButton>
118 
      </PreviewContainer>
119 
    );
120 
  }
121 
 
122 
  return (
123 
    <>
124 
      <DragAndDropContainer {...getRootProps()}>
125 
        <input {...getInputProps()} />
126 
        <p>{description}</p>
127 
      </DragAndDropContainer>
128 
 
129 
      {errors.map((error, index) => (
130 
        <Typography key={index} variant='caption' color='red'>
131 
          {error}
132 
        </Typography>
133 
      ))}
134 
    </>
135 
  );
136 
}