Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3704 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 3704 Rev 3719
Línea 1... Línea 1...
1 
import React, { useState } from 'react';
 1 
import React, { useState } from 'react';
2 
import { useDropzone } from 'react-dropzone';
 2 
import { useDropzone } from 'react-dropzone';
3 
import { 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 
import { DragAndDropContainer, PreviewContainer, CloseButton } from './FilePicker.styles';
 5 
import { DragAndDropContainer, PreviewContainer, CloseButton } from './FilePicker.styles';
6 
 
 6 
 
7 
const FILE_TYPES = {
 7 
const FILE_TYPES = {
8 
  image: 'image/jpeg, image/png, image/jpg',
 8 
  image: 'image/jpeg, image/png, image/jpg',
9 
  file: 'application/pdf, application/vnd.openxmlformats-officedocument.presentationml.presentation',
 9 
  file: 'application/pdf, application/vnd.openxmlformats-officedocument.presentationml.presentation',
10 
  video: 'video/mp4, video/mpeg, video/webm, video/quicktime',
 10 
  video: 'video/mp4, video/mpeg, video/webm, video/quicktime',
11 
  audio: 'audio/mpeg, audio/mp3, audio/wav, audio/ogg'
 11 
  audio: 'audio/mpeg, audio/mp3, audio/wav, audio/ogg',
- 
 
 12 
  all: 'image/jpeg, image/png, image/jpg, application/pdf, application/vnd.openxmlformats-officedocument.presentationml.presentation, video/mp4, video/mpeg, video/webm, video/quicktime, audio/mpeg, audio/mp3, audio/wav, audio/ogg'
12 
};
 13 
};
13 
 
 14 
 
14 
export function FilePicker({
 15 
export function FilePicker({
15 
  type = 'image',
 16 
  type = 'image',
16 
  multiple = false,
 17 
  multiple = false,
17 
  maxFiles = 1,
 18 
  maxFiles = 1,
18 
  description = 'Arrastra el archivo aqui, o haga click para seleccionar',
 19 
  description = 'Arrastra el archivo aqui, o haga click para seleccionar',
19 
  defaultFiles = null,
 - 
 
20 
  onChange = () => {}
 20 
  onChange = () => {}
21 
}) {
 21 
}) {
22 
  const [errors, setErrors] = useState([]);
 22 
  const [files, setFiles] = useState([]);
23 
  const [previews, setPreviews] = useState([]);
 23 
  const [errors, setErrors] = useState([]);
24 
 
 24 
 
25 
  const handlePreviews = (files) => {
 25 
  const { getRootProps, getInputProps } = useDropzone({
26 
    const previews = files.map((file) => {
 - 
 
27 
      const preview = {
 - 
 
28 
        url: URL.createObjectURL(file),
 26 
    accept: FILE_TYPES[type] ?? FILE_TYPES.image,
29 
        name: file.name,
 - 
 
30 
        type: file.type
 - 
 
31 
      };
 27 
    multiple,
32 
 
 - 
 
33 
      return preview;
 - 
 
34 
    });
 28 
    maxFiles,
35 
 
 - 
 
36 
    setPreviews(previews);
 - 
 
37 
  };
 - 
 
38 
 
 - 
 
39 
  const onDropAccepted = (files) => {
 29 
    onDropAccepted: (files) => {
40 
    handlePreviews(files);
 30 
      setFiles(files);
41 
    onChange(multiple ? files : files[0]);
 31 
      onChange(multiple ? files : files[0]);
42 
  };
 32 
    },
43 
 
 - 
 
44 
  const onDropRejected = (rejections) => {
 33 
    onDropRejected: (rejections) => {
45 
    if (rejections.length === 0) return;
 34 
      if (rejections.length === 0) return;
46 
    const errors = rejections.map((rejection) => rejection.errors[0].message);
 35 
      const errors = rejections.map((rejection) => rejection.errors[0].message);
47 
    setErrors(errors);
 36 
      setErrors(errors);
48 
  };
 37 
    }
49 
 
 - 
 
50 
  const { getRootProps, getInputProps } = useDropzone({
 - 
 
51 
    accept: FILE_TYPES[type] ?? FILE_TYPES.image,
 - 
 
52 
    multiple,
 - 
 
53 
    maxFiles,
 - 
 
54 
    onDropAccepted,
 - 
 
55 
    onDropRejected
 - 
 
56 
  });
 38 
  });
57 
 
 39 
 
58 
  const removeFile = () => {
 40 
  const removeFile = () => {
59 
    setPreviews([]);
 41 
    setFiles([]);
60 
    setErrors([]);
 42 
    setErrors([]);
61 
  };
 43 
  };
62 
 
 44 
 
63 
  const filePreviewTest = (preview) => {
 45 
  const filePreviewTest = (preview) => {
- 
 
 46 
    const src = URL.createObjectURL(preview);
- 
 
 47 
    const fileType = preview.type.split('/')[0];
- 
 
 48 
 
64 
    switch (type) {
 49 
    switch (fileType) {
65 
      case 'image':
 50 
      case 'image':
66 
        return <img src={preview.url} alt={preview.name} />;
 51 
        return <img src={src} alt={preview.name} />;
67 
      case 'video':
 52 
      case 'video':
68 
        return <video src={preview.url} width='400' height='300' controls muted />;
 53 
        return <video src={src} width='400' height='300' controls muted />;
69 
      case 'file':
 54 
      case 'application':
70 
        return <object data={preview.url} type='application/pdf' width='400' height='200' />;
 55 
        return <object data={src} type='application/pdf' width='400' height='200' />;
71 
      case 'audio':
 56 
      case 'audio':
72 
        return <audio src={preview.url} controls muted />;
 57 
        return <audio src={src} controls muted />;
73 
      default:
 58 
      default:
74 
        break;
 59 
        return <img src={src} alt={preview.name} />;
75 
    }
 60 
    }
76 
  };
 61 
  };
77 
 
 62 
 
78 
  if (previews.length > 0) {
 63 
  if (files.length > 0) {
79 
    return (
 64 
    return (
80 
      <PreviewContainer>
 65 
      <PreviewContainer>
81 
        {previews.map((preview) => filePreviewTest(preview))}
 66 
        {files.map((file) => filePreviewTest(file))}
82 
        <CloseButton onClick={removeFile}>
 67 
        <CloseButton onClick={removeFile}>
83 
          <Delete />
 68 
          <Delete />
84 
        </CloseButton>
 69 
        </CloseButton>
85 
      </PreviewContainer>
 70 
      </PreviewContainer>
86 
    );
 71 
    );
87 
  }
 72 
  }
88 
 
 73 
 
89 
  return (
 74 
  return (
90 
    <>
 75 
    <>
91 
      <DragAndDropContainer {...getRootProps()}>
 76 
      <DragAndDropContainer {...getRootProps()}>
92 
        <input {...getInputProps()} />
 77 
        <input {...getInputProps()} />
93 
        <p>{description}</p>
 78 
        <p>{description}</p>
94 
      </DragAndDropContainer>
 79 
      </DragAndDropContainer>
95 
 
 80 
 
96 
      {errors.map((error, index) => (
 81 
      {errors.map((error, index) => (
97 
        <Typography key={index} variant='caption' color='red'>
 82 
        <Typography key={index} variant='caption' color='red'>
98 
          {error}
 83 
          {error}
99 
        </Typography>
 84 
        </Typography>
100 
      ))}
 85 
      ))}
101 
    </>
 86 
    </>
102 
  );
 87 
  );
103 
}
 88 
}