Proyectos de Subversion LeadersLinked - SPA

import React, { useState } from 'react';

import { useDropzone } from 'react-dropzone';

import { Typography } from '@mui/material';

import Delete from '@mui/icons-material/Delete';

import { DragAndDropContainer, PreviewContainer, CloseButton } from './FilePicker.styles';

const FILE_TYPES = {

  image: 'image/jpeg, image/png, image/jpg',

  file: 'application/pdf, application/vnd.openxmlformats-officedocument.presentationml.presentation',

  video: 'video/mp4, video/mpeg, video/webm, video/quicktime',

  audio: 'audio/mpeg, audio/mp3, audio/wav, audio/ogg',

  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'

};

export function FilePicker({

  type = 'image',

  description = 'Arrastra el archivo aqui, o haga click para seleccionar',

  onChange = () => {}

}) {

  const [files, setFiles] = useState([]);

  const [errors, setErrors] = useState([]);

  const { getRootProps, getInputProps } = useDropzone({

    accept: FILE_TYPES[type] ?? FILE_TYPES.image,

    multiple: false,

    onDropAccepted: (files) => {

      setFiles(files);

      onChange(files);

    },

    onDropRejected: (rejections) => {

      if (rejections.length === 0) return;

      const errors = rejections.map((rejection) => rejection.errors[0].message);

      setErrors(errors);

    }

  });

  const removeFile = () => {

    setFiles([]);

    setErrors([]);

  };

  const filePreviewTest = (preview) => {

    const src = URL.createObjectURL(preview);

    const fileType = preview.type.split('/')[0];

    switch (fileType) {

      case 'image':

        return <img src={src} alt={preview.name} />;

      case 'video':

        return <video src={src} width='400' height='300' controls muted />;

      case 'application':

        return <object data={src} type='application/pdf' width='400' height='200' />;

      case 'audio':

        return <audio src={src} controls muted />;

      default:

        return <img src={src} alt={preview.name} />;

    }

  };

  if (files.length > 0) {

    return (

      <PreviewContainer>

        {files.map((file) => filePreviewTest(file))}

        <CloseButton onClick={removeFile}>

          <Delete />

        </CloseButton>

      </PreviewContainer>

    );

  }

  return (

    <>

      <DragAndDropContainer {...getRootProps()}>

        <input {...getInputProps()} />

        <p>{description}</p>

      </DragAndDropContainer>

      {errors.map((error, index) => (

        <Typography key={index} variant='caption' color='red'>

          {error}

        </Typography>

      ))}

    </>

  );

}