Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3694 | Rev 3698 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

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