Proyectos de Subversion LeadersLinked - Backend

import React, { useEffect, useState } from "react";

import styles from "./fileModal.module.scss";

const FileModal = ({ file, onCancel, onSend }) => {
  const [fileUrl, setFileUrl] = useState("");

  useEffect(() => {
    const reader = new FileReader();
    reader.onloadend = () => setFileUrl(reader.result);
    reader.readAsDataURL(file);
  }, []);

  const filePreview = () => {
    switch (file.type) {
      case "video/mp4":
      case "video/mpeg":
      case "video/webm":
        return (
          <video
            className={styles.file}
            src={fileUrl}
            muted
            autoPlay
            controls
          ></video>
        );
      case "image/png":
      case "image/jpeg":
      case "image/jpg":
        return (
          <img className={styles.file} src={fileUrl} alt="uploaded-image" />
        );
      case "application/pdf":
        return (
          <object
            className={styles.file}
            data={fileUrl}
            type="application/pdf"
          ></object>
        );
      default:
        break;
    }
  };

  return (
    <div className={styles.file_modal}>
      {fileUrl && filePreview()}
      <div className={styles.buttons_container}>
        <button className="btn btn-primary" onClick={onSend}>
          Enviar
        </button>
        <button className="btn btn-secondary" onClick={onCancel}>
          Cancelar
        </button>
      </div>
    </div>
  );
};

export default FileModal;