Proyectos de Subversion LeadersLinked - Backend

Rev

Ir a la última revisión | | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
11347 nelberth 1 
import React, { useEffect, useState } from "react";
2 
 
3 
import styles from "./fileModal.module.scss";
4 
 
5 
const FileModal = (props) => {
6 
  // props destructuring
7 
  const { file, onCancel, onSend } = props;
8 
 
9 
  const [fileUrl, setFileUrl] = useState("");
10 
 
11 
  useEffect(() => {
12 
    const reader = new FileReader();
13 
    reader.onloadend = () => {
14 
      setFileUrl(reader.result);
15 
    };
16 
    reader.readAsDataURL(file);
17 
     (file.type);
18 
  }, []);
19 
 
20 
  // "video/mp4, video/mpeg, video/webm, application/pdf, image/jpeg, image/png, image/jpg";
21 
  const filePreview = () => {
22 
    switch (file.type) {
23 
      case "video/mp4":
24 
      case "video/mpeg":
25 
      case "video/webm":
26 
        return (
27 
          <video
28 
            className={styles.file}
29 
            src={fileUrl}
30 
            muted
31 
            autoPlay
32 
            controls
33 
          ></video>
34 
        );
35 
      case "image/png":
36 
      case "image/jpeg":
37 
      case "image/jpg":
38 
        return (
39 
          <img className={styles.file} src={fileUrl} alt="uploaded-image" />
40 
        );
41 
      case "application/pdf":
42 
        return (
43 
          <object
44 
            className={styles.file}
45 
            data={fileUrl}
46 
            type="application/pdf"
47 
          ></object>
48 
        );
49 
      default:
50 
        break;
51 
    }
52 
  };
53 
 
54 
  return (
55 
    <div className={styles.fileModal}>
56 
      {fileUrl && filePreview()}
57 
      <div className={styles.buttonsContainer}>
58 
        <button className={styles.button} onClick={onCancel}>
59 
          Cancelar
60 
        </button>
61 
        <button className={styles.button} onClick={onSend}>
62 
          Enviar
63 
        </button>
64 
      </div>
65 
    </div>
66 
  );
67 
};
68 
 
69 
export default FileModal;