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;