Proyectos de Subversion LeadersLinked - SPA

Rev

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