Proyectos de Subversion LeadersLinked - SPA

Rev

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