Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3694 | Rev 3698 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 3694 Rev 3697
Línea 1... Línea 1...
1 
import React, { useCallback, useEffect, useState } from 'react';
 1 
import React, { useEffect, useState } from 'react';
2 
import { useDropzone } from 'react-dropzone';
 2 
import { useDropzone } from 'react-dropzone';
3 
import { Box, IconButton, styled, Typography } from '@mui/material';
 3 
import { Typography } from '@mui/material';
4 
import Delete from '@mui/icons-material/Delete';
 4 
import Delete from '@mui/icons-material/Delete';
5 
 
 - 
 
6 
const DragAndDropContainer = styled('div')`
 5 
import { DragAndDropContainer, PreviewContainer, CloseButton } from './FilePicker.styles';
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 
`;
 - 
 
Línea 47... Línea 6...
47 
 
 6 
 
48 
const FILE_TYPES = {
 7 
const FILE_TYPES = {
49 
  image: 'image/jpeg, image/png, image/jpg',
 8 
  image: 'image/jpeg, image/png, image/jpg',
50 
  file: 'application/pdf, application/vnd.openxmlformats-officedocument.presentationml.presentation',
 9 
  file: 'application/pdf, application/vnd.openxmlformats-officedocument.presentationml.presentation',
Línea 61... Línea 20...
61 
  onChange = () => {}
 20 
  onChange = () => {}
62 
}) {
 21 
}) {
63 
  const [errors, setErrors] = useState([]);
 22 
  const [errors, setErrors] = useState([]);
64 
  const [previews, setPreviews] = useState([]);
 23 
  const [previews, setPreviews] = useState([]);
Línea 65... Línea 24...
65 
 
 24 
 
66 
  const onDrop = useCallback((acceptedFiles, fileRejections) => {
 25 
  const handlePreviews = (files) => {
- 
 
 26 
    const previews = files.map((file) => {
67 
    const previews = acceptedFiles.map((file) => URL.createObjectURL(file));
 27 
      const preview = {
- 
 
 28 
        url: URL.createObjectURL(file),
- 
 
 29 
        name: file.name,
- 
 
 30 
        type: file.type
- 
 
 31 
      };
- 
 
 32 
 
- 
 
 33 
      return preview;
- 
 
 34 
    });
68 
    const files = multiple ? acceptedFiles : acceptedFiles[0];
 35 
 
- 
 
 36 
    setPreviews(previews);
- 
 
 37 
  };
- 
 
 38 
 
69 
    setPreviews(previews);
 39 
  const onDropAccepted = (files) => {
- 
 
 40 
    handlePreviews(files);
- 
 
 41 
    onChange(multiple ? files : files[0]);
- 
 
 42 
  };
- 
 
 43 
 
70 
    onChange(files);
 44 
  const onDropRejected = (rejections) => {
71 
    if (fileRejections.length > 0) {
 45 
    if (rejections.length === 0) return;
72 
      setErrors(fileRejections.map((file) => file.errors[0].message));
 - 
 
73 
    } else {
 46 
    const errors = rejections.map((rejection) => rejection.errors[0].message);
74 
      setErrors([]);
 47 
    setErrors(errors);
75 
    }
 - 
 
Línea 76... Línea 48...
76 
  }, []);
 48 
  };
77 
 
 49 
 
78 
  const { getRootProps, getInputProps } = useDropzone({
 50 
  const { getRootProps, getInputProps } = useDropzone({
79 
    accept: FILE_TYPES[type] ?? FILE_TYPES.image,
 51 
    accept: FILE_TYPES[type] ?? FILE_TYPES.image,
- 
 
 52 
    multiple,
80 
    multiple,
 53 
    maxFiles,
81 
    maxFiles,
 54 
    onDropAccepted,
Línea 82... Línea 55...
82 
    onDrop
 55 
    onDropRejected
83 
  });
 56 
  });
84 
 
 57 
 
85 
  const removeFile = () => {
 58 
  const removeFile = () => {
Línea 86... Línea 59...
86 
    setPreviews([]);
 59 
    setPreviews([]);
87 
    setErrors([]);
 60 
    setErrors([]);
88 
  };
 61 
  };
89 
 
 62 
 
90 
  const filePreviewTest = (preview) => {
 63 
  const filePreviewTest = (preview) => {
91 
    switch (type) {
 64 
    switch (type) {
92 
      case 'image':
 65 
      case 'image':
93 
        return <img src={preview} />;
 66 
        return <img src={preview} alt='preview' />;
94 
      case 'video':
 67 
      case 'video':
Línea 100... Línea 73...
100 
      default:
 73 
      default:
101 
        break;
 74 
        break;
102 
    }
 75 
    }
103 
  };
 76 
  };
Línea -... Línea 77...
- 
 
 77 
 
- 
 
 78 
  console.log({ previews });
- 
 
 79 
  console.log({ errors });
- 
 
 80 
  console.log({ defaultFiles });
- 
 
 81 
  console.log({ type });
104 
 
 82 
 
105 
  useEffect(() => {
 83 
  useEffect(() => {
106 
    if (defaultFiles) setPreviews(defaultFiles);
 84 
    if (defaultFiles) setPreviews(defaultFiles);
Línea 107... Línea 85...
107 
  }, [defaultFiles]);
 85 
  }, [defaultFiles]);