Proyectos de Subversion LeadersLinked - Backend

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

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

const FileModal = (props) => {
  // props destructuring
  const { file, onCancel, onSend } = props;

  const [fileUrl, setFileUrl] = useState("");

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

  // "video/mp4, video/mpeg, video/webm, application/pdf, image/jpeg, image/png, image/jpg";
  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.fileModal}>
      {fileUrl && filePreview()}
      <div className={styles.buttonsContainer}>
        <button className={styles.button} onClick={onCancel}>
          Cancelar
        </button>
        <button className={styles.button} onClick={onSend}>
          Enviar
        </button>
      </div>
    </div>
  );
};

export default FileModal;