Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3639 | Rev 3641 | 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) => {
3640 stevensc 67 
    console.log(acceptedFiles);
3476 stevensc 68 
    onChange(acceptedFiles);
69 
    setFiles(
3639 stevensc 70 
      acceptedFiles.map((file) =>
71 
        Object.assign(file, {
72 
          preview: URL.createObjectURL(file),
73 
          type: file.type.split('/')[0]
74 
        })
75 
      )
3476 stevensc 76 
    );
77 
    if (fileRejections.length > 0) {
78 
      setErrors(fileRejections.map((file) => file.errors[0].message));
79 
    } else {
80 
      setErrors([]);
81 
    }
82 
  }, []);
83 
 
84 
  const { getRootProps, getInputProps } = useDropzone({
85 
    accept: FILE_TYPES[type] ?? FILE_TYPES.image,
86 
    multiple,
87 
    maxFiles,
88 
    onDrop
89 
  });
90 
 
91 
  const removeFile = () => {
92 
    setFiles([]);
93 
    setErrors([]);
94 
  };
95 
 
96 
  const filePreviewTest = (file) => {
3639 stevensc 97 
    switch (file.type) {
3476 stevensc 98 
      case 'image':
99 
        return <img src={file.preview} />;
100 
      case 'video':
101 
        return <video src={file.preview} width='400' height='300' controls muted />;
102 
      case 'file':
3639 stevensc 103 
        return <object data={file.preview} type={file.type} width='400' height='200' />;
104 
      case 'audio':
105 
        return <audio src={file.preview} controls muted />;
106 
 
3476 stevensc 107 
      default:
108 
        break;
109 
    }
110 
  };
111 
 
112 
  useEffect(() => {
113 
    if (defaultFiles) setFiles(defaultFiles);
114 
  }, [defaultFiles]);
115 
 
116 
  if (files.length) {
117 
    return (
118 
      <PreviewContainer>
119 
        {files.map((file) => filePreviewTest(file))}
120 
        <CloseButton onClick={removeFile}>
121 
          <Delete />
122 
        </CloseButton>
123 
      </PreviewContainer>
124 
    );
125 
  }
126 
 
127 
  return (
128 
    <>
129 
      <DragAndDropContainer {...getRootProps()}>
130 
        <input {...getInputProps()} />
131 
        <p>{description}</p>
132 
      </DragAndDropContainer>
133 
 
134 
      {errors.map((error, index) => (
135 
        <Typography key={index} variant='caption' color='red'>
136 
          {error}
137 
        </Typography>
138 
      ))}
139 
    </>
140 
  );
141 
}