completed file management system dashboard and all functions

gdsclpu · May 29, 2021 · fc977a0 · fc977a0
1 parent 3fa6eea
commit fc977a0
Show file tree

Hide file tree

Showing 2 changed files with 90 additions and 24 deletions.
diff --git a/src/components/Dashboard/FileComponent/index.js b/src/components/Dashboard/FileComponent/index.js
@@ -24,7 +24,7 @@ import FileViewer from "react-file-viewer";
 import "./FileComponent.css";
 import Header from "./Header";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faDownload } from "@fortawesome/free-solid-svg-icons";
+import { faDownload, faEye } from "@fortawesome/free-solid-svg-icons";
 
 const FileComponent = () => {
   const { fileId } = useParams();
@@ -244,29 +244,94 @@ const FileComponent = () => {
                 </div>
               </div>
               <Col md={12} style={{ height: "83%" }}>
-                <FileViewer
-                  fileType={
-                    currentFile.data.name.split(".")[
-                      currentFile.data.name.split(".").length - 1
-                    ]
-                  }
-                  filePath={currentFile.data.url}
-                  errorComponent={
-                    <>
-                      <h1>This file is not viewable</h1>
-                      <a
-                        className="btn btn-primary"
-                        target="_blank"
-                        href={currentFile.data.url}
-                        download
-                      >
-                        <FontAwesomeIcon icon={faDownload} />
-                        &nbsp; Download
-                      </a>
-                    </>
-                  }
-                  style={{ height: "100%", width: "100%" }}
-                />
+                {currentFile.data.name
+                  .split(".")
+                  [currentFile.data.name.split(".").length - 1].includes(
+                    "pdf"
+                  ) ? (
+                  <a
+                    className="btn btn-primary mx-auto mt-5"
+                    target="_blank"
+                    href={currentFile.data.url}
+                  >
+                    <FontAwesomeIcon icon={faEye} />
+                    &nbsp; View{" "}
+                    {
+                      currentFile.data.name.split(".")[
+                        currentFile.data.name.split(".").length - 1
+                      ]
+                    }{" "}
+                    file
+                  </a>
+                ) : currentFile.data.name
+                    .split(".")
+                    [currentFile.data.name.split(".").length - 1].includes(
+                      "csv"
+                    ) ||
+                  currentFile.data.name
+                    .split(".")
+                    [currentFile.data.name.split(".").length - 1].includes(
+                      "xslx"
+                    ) ||
+                  currentFile.data.name
+                    .split(".")
+                    [currentFile.data.name.split(".").length - 1].includes(
+                      "docx"
+                    ) ||
+                  currentFile.data.name
+                    .split(".")
+                    [currentFile.data.name.split(".").length - 1].includes(
+                      "mp4"
+                    ) ||
+                  currentFile.data.name
+                    .split(".")
+                    [currentFile.data.name.split(".").length - 1].includes(
+                      "webm"
+                    ) ||
+                  currentFile.data.name
+                    .split(".")
+                    [currentFile.data.name.split(".").length - 1].includes(
+                      "mp3"
+                    ) ? (
+                  <FileViewer
+                    fileType={
+                      currentFile.data.name.split(".")[
+                        currentFile.data.name.split(".").length - 1
+                      ]
+                    }
+                    filePath={currentFile.data.url}
+                    errorComponent={
+                      <>
+                        <h1>This file is not viewable</h1>
+                        <a
+                          className="btn btn-primary"
+                          target="_blank"
+                          href={currentFile.data.url}
+                          download
+                        >
+                          <FontAwesomeIcon icon={faDownload} />
+                          &nbsp; Download
+                        </a>
+                      </>
+                    }
+                    style={{ height: "100%", width: "100%" }}
+                  />
+                ) : (
+                  <a
+                    className="btn btn-primary mx-auto mt-5"
+                    target="_blank"
+                    href={currentFile.data.url}
+                  >
+                    <FontAwesomeIcon icon={faEye} />
+                    &nbsp; View{" "}
+                    {
+                      currentFile.data.name.split(".")[
+                        currentFile.data.name.split(".").length - 1
+                      ]
+                    }{" "}
+                    file
+                  </a>
+                )}
               </Col>
             </Col>
           </Row>

diff --git a/src/components/UploadFile/index.js b/src/components/UploadFile/index.js
@@ -51,6 +51,7 @@ const UploadFile = ({ currentFolder }) => {
       "mp3",
       "mp4",
       "webm",
+      "pdf",
     ];
 
     if (allowedExtensions.indexOf(fileExtension) === -1) {