wibu/sistem-desa-mandiri
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

rev: file upload ekstensi

Browse Source 
Deskripsi:
- tambah type ekstensi file upload pada project, task divisi dan dokumen divisi

No Issues
This commit is contained in:
amel
2025-01-05 17:15:53 +08:00
parent 8bfd85c49a
commit b2801480aa
10 changed files with 219 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/module/document/ui/drawer_menu_document_division.tsx
View File

@@ -149,7 +149,7 @@ export default function DrawerMenuDocumentDivision() {
}}
activateOnClick={false}
maxSize={3 * 1024 ** 2}
accept={['text/csv', 'image/png', 'image/jpeg', 'image/heic', 'application/pdf']}
accept={['image/png', 'image/jpeg', 'image/heic', 'application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet']}
onReject={(files) => {
refresh.set(true)
setOpenModal(false)

76
src/module/document/ui/navbar_document_division.tsx
View File

@@ -34,6 +34,7 @@ export default function NavbarDocumentDivision() {
const [isOpenModalView, setOpenModalView] = useState(false);
const [isExtension, setExtension] = useState("");
const [idStorage, setIdStorage] = useState("");
const [nameFileFull, setNameFileFull] = useState("");
const [name, setName] = useState("");
const [isOpen, setOpen] = useState(false);
const [isDelete, setIsDelete] = useState(false);
@@ -253,9 +254,18 @@ export default function NavbarDocumentDivision() {
setRename(true);
}
const onDownload = async () => {
const onDownload = async (kategori: string, file?: { idFile: string, nameFile: string }) => {
try {
const fileUrl = `https://wibu-storage.wibudev.com/api/files/${selectedFiles[0].idStorage}`;
let idStorageDownload, nameFileDownload = ""
if (kategori == "selected") {
idStorageDownload = selectedFiles[0].idStorage
nameFileDownload = `${selectedFiles[0].name}.${selectedFiles[0].extension}`
} else if (kategori == "klik") {
idStorageDownload = file?.idFile
nameFileDownload = String(file?.nameFile)
}
const fileUrl = `https://wibu-storage.wibudev.com/api/files/${idStorageDownload}`;
const response = await fetch(fileUrl);
const blob = await response.blob();
@@ -263,7 +273,7 @@ export default function NavbarDocumentDivision() {
const link = document.createElement("a");
const url = window.URL.createObjectURL(blob);
link.href = url;
link.download = `${selectedFiles[0].name}.${selectedFiles[0].extension}`; // Nama file yang akan diunduh
link.download = nameFileDownload; // Nama file yang akan diunduh
document.body.appendChild(link);
link.click();
@@ -341,7 +351,7 @@ export default function NavbarDocumentDivision() {
direction={"column"}
onClick={() => {
if (selectedFiles.length > 0 && copyAllowed) {
onDownload();
onDownload("selected");
}
}}
>
@@ -663,9 +673,7 @@ export default function NavbarDocumentDivision() {
</Box>
) : (
dataDocument.map((v, i) => {
const isSelected = selectedFiles.some(
(i: any) => i?.id == v.id
);
const isSelected = selectedFiles.some((i: any) => i?.id == v.id);
return (
<Box key={i}>
<Box mt={10} mb={10}>
@@ -680,20 +688,17 @@ export default function NavbarDocumentDivision() {
xl: 1,
}}
onClick={() => {
if (
v.category == "FOLDER" &&
selectedFiles.length == 0 &&
!dariSelectAll
) {
if (v.category == "FOLDER" && selectedFiles.length == 0 && !dariSelectAll) {
router.push("?path=" + v.id);
} else if (
v.category == "FILE" &&
selectedFiles.length == 0 &&
!dariSelectAll
) {
} else if (v.category == "FILE" && selectedFiles.length == 0 && !dariSelectAll) {
setExtension(v.extension);
setIdStorage(v.idStorage);
setOpenModalView(true);
setNameFileFull(v.name + "." + v.extension)
if (v.extension != "doc" && v.extension != "docx" && v.extension != "xls" && v.extension != "xlsx" && v.extension != "ppt" && v.extension != "pptx") {
setOpenModalView(true);
} else {
onDownload("klik", { idFile: v.idStorage, nameFile: v.name + "." + v.extension })
}
}
}}
>
@@ -712,7 +717,13 @@ export default function NavbarDocumentDivision() {
{v.category == "FOLDER" ? (
<FcFolder size={isMobile ? 40 : 50} />
) : v.extension == "pdf" ||
v.extension == "csv" ? (
v.extension == "csv" ||
v.extension == "doc" ||
v.extension == "docx" ||
v.extension == "xls" ||
v.extension == "xlsx" ||
v.extension == "ppt" ||
v.extension == "pptx" ? (
<FcDocument size={isMobile ? 40 : 50} />
) : (
<FcImageFile size={isMobile ? 40 : 50} />
@@ -723,7 +734,13 @@ export default function NavbarDocumentDivision() {
{v.category == "FOLDER" ? (
<FcFolder size={isMobile ? 40 : 50} />
) : v.extension == "pdf" ||
v.extension == "csv" ? (
v.extension == "csv" ||
v.extension == "doc" ||
v.extension == "docx" ||
v.extension == "xls" ||
v.extension == "xlsx" ||
v.extension == "ppt" ||
v.extension == "pptx" ? (
<FcDocument size={isMobile ? 40 : 50} />
) : (
<FcImageFile size={isMobile ? 40 : 50} />
@@ -747,20 +764,17 @@ export default function NavbarDocumentDivision() {
<Flex
direction={"column"}
onClick={() => {
if (
v.category == "FOLDER" &&
selectedFiles.length == 0 &&
!dariSelectAll
) {
if (v.category == "FOLDER" && selectedFiles.length == 0 && !dariSelectAll) {
router.push("?path=" + v.id);
} else if (
v.category == "FILE" &&
selectedFiles.length == 0 &&
!dariSelectAll
) {
} else if (v.category == "FILE" && selectedFiles.length == 0 && !dariSelectAll) {
setExtension(v.extension);
setIdStorage(v.idStorage);
setOpenModalView(true);
setNameFileFull(v.name + "." + v.extension)
if (v.extension != "doc" && v.extension != "docx" && v.extension != "xls" && v.extension != "xlsx" && v.extension != "ppt" && v.extension != "pptx") {
setOpenModalView(true);
} else {
onDownload("klik", { idFile: v.idStorage, nameFile: v.name + "." + v.extension })
}
}
}}
>

3
src/module/project/ui/add_file_detail_project.tsx
View File

@@ -69,7 +69,6 @@ export default function AddFileDetailProject() {
}
const response = await funAddFileProject(param.id, fd)
console.group(response)
if (response.success) {
setDataRealtime([{
category: "project-detail-file",
@@ -107,7 +106,7 @@ export default function AddFileDetailProject() {
}}
activateOnClick={false}
maxSize={3 * 1024 ** 2}
accept={['image/png', 'image/jpeg', 'image/heic', 'application/pdf']}
accept={['image/png', 'image/jpeg', 'image/heic', 'application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet']}
onReject={(files) => {
return toast.error('File yang diizinkan: .png, .jpg, .heic, .pdf dengan ukuran maksimal 3 MB')
}}

2
src/module/project/ui/create_project.tsx
View File

@@ -413,7 +413,7 @@ export default function CreateProject() {
}}
activateOnClick={false}
maxSize={3 * 1024 ** 2}
accept={['image/png', 'image/jpeg', 'image/heic', 'application/pdf']}
accept={['image/png', 'image/jpeg', 'image/heic', 'application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet']}
onReject={(files) => {
return toast.error('File yang diizinkan: .png, .jpg, .heic, .pdf dengan ukuran maksimal 3 MB')
}}

60
src/module/project/ui/list_file_detail_project.tsx
View File

@@ -7,8 +7,9 @@ import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
import { useParams } from 'next/navigation';
import { useState } from 'react';
import toast from 'react-hot-toast';
import { BsFileTextFill, BsFiletypeCsv, BsFiletypeHeic, BsFiletypeJpg, BsFiletypePdf, BsFiletypePng } from 'react-icons/bs';
import { BsFileTextFill, BsFiletypeCsv, BsFiletypeDocx, BsFiletypeHeic, BsFiletypeJpg, BsFiletypePdf, BsFiletypePng, BsFiletypePptx, BsFiletypeXlsx } from 'react-icons/bs';
import { FaTrash } from 'react-icons/fa6';
import { ImDownload3 } from "react-icons/im";
import { useWibuRealtime } from 'wibu-realtime';
import { funDeleteFileProject, funGetOneProjectById } from '../lib/api_project';
import { IDataFileProject } from '../lib/type_project';
@@ -113,6 +114,28 @@ export default function ListFileDetailProject() {
}
}, [dataRealTime])
const onDownload = async () => {
try {
const fileUrl = `https://wibu-storage.wibudev.com/api/files/${idStorage}`;
const response = await fetch(fileUrl);
const blob = await response.blob();
// Create a link element, use Blob URL
const link = document.createElement("a");
const url = window.URL.createObjectURL(blob);
link.href = url;
link.download = `${nameData}`; // Nama file yang akan diunduh
document.body.appendChild(link);
link.click();
// Cleanup
window.URL.revokeObjectURL(url);
document.body.removeChild(link);
} catch (error) {
alert(error);
}
};
return (
<>
<Box pt={20}>
@@ -167,13 +190,12 @@ export default function ListFileDetailProject() {
}}>
{item.extension == "pdf" && <BsFiletypePdf size={30} />}
{item.extension == "csv" && <BsFiletypeCsv size={30} />}
{item.extension == "png" && <BsFiletypePng size={30} />}
{item.extension == "jpg" && <BsFiletypeJpg size={30} />}
{item.extension == "jpeg" && <BsFiletypeJpg size={30} />}
{item.extension == "PNG" && <BsFiletypePng size={30} />}
{item.extension == "JPG" && <BsFiletypeJpg size={30} />}
{item.extension == "JPEG" && <BsFiletypeJpg size={30} />}
{(item.extension == "png" || item.extension == "PNG") && <BsFiletypePng size={30} />}
{(item.extension == "jpg" || item.extension == "jpeg" || item.extension == "JPG" || item.extension == "JPEG") && <BsFiletypeJpg size={30} />}
{item.extension == "heic" && <BsFiletypeHeic size={30} />}
{(item.extension == "doc" || item.extension == "docx") && <BsFiletypeDocx size={30} />}
{(item.extension == "xls" || item.extension == "xlsx") && <BsFiletypeXlsx size={30} />}
{(item.extension == "ppt" || item.extension == "pptx") && <BsFiletypePptx size={30} />}
</Grid.Col>
<Grid.Col
span={{
@@ -203,15 +225,25 @@ export default function ListFileDetailProject() {
<LayoutDrawer opened={openDrawer} title={<Text truncate="end">{nameData}</Text>} onClose={() => setOpenDrawer(false)}>
<Box>
<Stack pt={10}>
<SimpleGrid
cols={{ base: 3, sm: 3, lg: 3 }}
>
<Flex onClick={() => { setOpenModalView(true) }} justify={'center'} align={'center'} direction={'column'} >
<SimpleGrid cols={{ base: 3, sm: 3, lg: 3 }}>
{
(isExtension != "doc" && isExtension != "docx" && isExtension != "xls" && isExtension != "xlsx" && isExtension != "ppt" && isExtension != "pptx") &&
<Flex onClick={() => { setOpenModalView(true) }} justify={'center'} align={'center'} direction={'column'} >
<Box>
<BsFileTextFill size={30} color={tema.get().utama} />
</Box>
<Box>
<Text c={tema.get().utama}>Lihat file</Text>
</Box>
</Flex>
}
<Flex onClick={() => { onDownload() }} justify={'center'} align={'center'} direction={'column'} >
<Box>
<BsFileTextFill size={30} color={tema.get().utama} />
<ImDownload3 size={30} color={tema.get().utama} />
</Box>
<Box>
<Text c={tema.get().utama}>Lihat file</Text>
<Text c={tema.get().utama}>Download</Text>
</Box>
</Flex>
@@ -227,7 +259,7 @@ export default function ListFileDetailProject() {
<FaTrash size={30} color={reason == null ? tema.get().utama : "gray"} />
</Box>
<Box>
<Text c={reason == null ? tema.get().utama : "gray"}>Hapus file</Text>
<Text c={reason == null ? tema.get().utama : "gray"}>Hapus</Text>
</Box>
</Flex>
}

47
src/module/project/ui/results_file.tsx
View File

@@ -1,10 +1,38 @@
import { Box, Center, Grid, Group, Text } from '@mantine/core';
import React from 'react';
import { BsFiletypeCsv, BsFiletypeHeic, BsFiletypeJpg, BsFiletypePdf, BsFiletypePng } from 'react-icons/bs';
import { useShallowEffect } from '@mantine/hooks';
import { useState } from 'react';
import { BsFiletypeCsv, BsFiletypeDocx, BsFiletypeHeic, BsFiletypeJpg, BsFiletypePdf, BsFiletypePng, BsFiletypePptx, BsFiletypeXlsx } from 'react-icons/bs';
import { IListFileTaskProject } from '../lib/type_project';
export default function ResultsFile({ name, extension }: IListFileTaskProject) {
const [fixed, setFixed] = useState(extension)
function cekExtension() {
let jadi = extension
if (extension == "msword") {
jadi = "doc"
} else if (extension == "vnd.openxmlformats-officedocument.wordprocessingml.document") {
jadi = "docx"
} else if (extension == "vnd.ms-excel") {
jadi = "xls"
} else if (extension == "vnd.openxmlformats-officedocument.spreadsheetml.sheet") {
jadi = "xlsx"
} else if (extension == "vnd.ms-powerpoint") {
jadi = "ppt"
} else if (extension == "vnd.openxmlformats-officedocument.presentationml.presentation") {
jadi = "pptx"
} else {
jadi = extension
}
setFixed(jadi)
}
useShallowEffect(() => {
cekExtension()
}, []);
return (
<Box style={{
borderRadius: 10,
@@ -14,11 +42,14 @@ export default function ResultsFile({ name, extension }: IListFileTaskProject) {
<Grid gutter={"sm"} justify='flex-start' align='flex-start'>
<Grid.Col span={"auto"}>
<Center >
{extension == "pdf" && <BsFiletypePdf size={30} />}
{extension == "csv" && <BsFiletypeCsv size={30} />}
{extension == "png" && <BsFiletypePng size={30} />}
{extension == "jpg" || extension == "jpeg" && <BsFiletypeJpg size={30} />}
{extension == "heic" && <BsFiletypeHeic size={30} />}
{fixed == "pdf" && <BsFiletypePdf size={30} />}
{fixed == "csv" && <BsFiletypeCsv size={30} />}
{fixed == "png" && <BsFiletypePng size={30} />}
{fixed == "jpg" || fixed == "jpeg" && <BsFiletypeJpg size={30} />}
{fixed == "heic" && <BsFiletypeHeic size={30} />}
{fixed == "doc" || fixed == "docx" && <BsFiletypeDocx size={30} />}
{fixed == "xls" || fixed == "xlsx" && <BsFiletypeXlsx size={30} />}
{fixed == "ppt" || fixed == "pptx" && <BsFiletypePptx size={30} />}
</Center>
</Grid.Col>
<Grid.Col span={10}>

2
src/module/task/ui/add_file_detail_task.tsx
View File

@@ -107,7 +107,7 @@ export default function AddFileDetailTask() {
}}
activateOnClick={false}
maxSize={3 * 1024 ** 2}
accept={['image/png', 'image/jpeg', 'image/heic', 'application/pdf']}
accept={['image/png', 'image/jpeg', 'image/heic', 'application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet']}
onReject={(files) => {
return toast.error('File yang diizinkan: .png, .jpg, .heic, .pdf dengan ukuran maksimal 3 MB')
}}

2
src/module/task/ui/create_task.tsx
View File

@@ -336,7 +336,7 @@ export default function CreateTask() {
}}
activateOnClick={false}
maxSize={3 * 1024 ** 2}
accept={['image/png', 'image/jpeg', 'image/heic', 'application/pdf']}
accept={['image/png', 'image/jpeg', 'image/heic', 'application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet']}
onReject={(files) => {
return toast.error('File yang diizinkan: .png, .jpg, .heic, .pdf dengan ukuran maksimal 3 MB')
}}

59
src/module/task/ui/detail_list_file_task.tsx
View File

@@ -1,18 +1,19 @@
'use client'
import { globalRole, keyWibu, LayoutDrawer, LayoutModalViewFile, TEMA } from "@/module/_global";
import LayoutModal from "@/module/_global/layout/layout_modal";
import { globalIsMemberDivision } from "@/module/division_new";
import { useHookstate } from "@hookstate/core";
import { Box, Center, Flex, Grid, Group, SimpleGrid, Skeleton, Stack, Text } from "@mantine/core";
import { useShallowEffect } from "@mantine/hooks";
import { useParams } from "next/navigation";
import { useState } from "react";
import toast from "react-hot-toast";
import { BsFileTextFill, BsFiletypeCsv, BsFiletypeHeic, BsFiletypeJpg, BsFiletypePdf, BsFiletypePng } from "react-icons/bs";
import { BsFileTextFill, BsFiletypeCsv, BsFiletypeDocx, BsFiletypeHeic, BsFiletypeJpg, BsFiletypePdf, BsFiletypePng, BsFiletypePptx, BsFiletypeXlsx } from "react-icons/bs";
import { FaTrash } from "react-icons/fa6";
import { ImDownload3 } from "react-icons/im";
import { useWibuRealtime } from "wibu-realtime";
import { funDeleteFileTask, funGetTaskDivisionById } from "../lib/api_task";
import { IDataFileTaskDivision } from "../lib/type_task";
import { globalIsMemberDivision } from "@/module/division_new";
export default function ListFileDetailTask() {
const roleLogin = useHookstate(globalRole)
@@ -111,6 +112,28 @@ export default function ListFileDetailTask() {
}
}, [dataRealTime])
const onDownload = async () => {
try {
const fileUrl = `https://wibu-storage.wibudev.com/api/files/${idDataStorage}`;
const response = await fetch(fileUrl);
const blob = await response.blob();
// Create a link element, use Blob URL
const link = document.createElement("a");
const url = window.URL.createObjectURL(blob);
link.href = url;
link.download = `${nameData}`; // Nama file yang akan diunduh
document.body.appendChild(link);
link.click();
// Cleanup
window.URL.revokeObjectURL(url);
document.body.removeChild(link);
} catch (error) {
alert(error);
}
};
return (
<Box pt={20}>
<Text fw={'bold'} c={tema.get().utama}>File</Text>
@@ -159,13 +182,12 @@ export default function ListFileDetailTask() {
<Center >
{item.extension == "pdf" && <BsFiletypePdf size={30} />}
{item.extension == "csv" && <BsFiletypeCsv size={30} />}
{item.extension == "png" && <BsFiletypePng size={30} />}
{item.extension == "jpg" && <BsFiletypeJpg size={30} />}
{item.extension == "jpeg" && <BsFiletypeJpg size={30} />}
{item.extension == "PNG" && <BsFiletypePng size={30} />}
{item.extension == "JPG" && <BsFiletypeJpg size={30} />}
{item.extension == "JPEG" && <BsFiletypeJpg size={30} />}
{(item.extension == "png" || item.extension == "PNG") && <BsFiletypePng size={30} />}
{(item.extension == "jpg" || item.extension == "jpeg" || item.extension == "JPG" || item.extension == "JPEG") && <BsFiletypeJpg size={30} />}
{item.extension == "heic" && <BsFiletypeHeic size={30} />}
{(item.extension == "doc" || item.extension == "docx") && <BsFiletypeDocx size={30} />}
{(item.extension == "xls" || item.extension == "xlsx") && <BsFiletypeXlsx size={30} />}
{(item.extension == "ppt" || item.extension == "pptx") && <BsFiletypePptx size={30} />}
</Center>
</Grid.Col>
<Grid.Col span={10}>
@@ -185,15 +207,24 @@ export default function ListFileDetailTask() {
<LayoutDrawer opened={openDrawer} title={<Text truncate={'end'}>{nameData}</Text>} onClose={() => setOpenDrawer(false)}>
<Box>
<Stack pt={10}>
<SimpleGrid
cols={{ base: 3, sm: 3, lg: 3 }}
>
<Flex onClick={() => { setOpenModalView(true) }} justify={'center'} align={'center'} direction={'column'} >
<SimpleGrid cols={{ base: 3, sm: 3, lg: 3 }} >
{
(isExtension != "doc" && isExtension != "docx" && isExtension != "xls" && isExtension != "xlsx" && isExtension != "ppt" && isExtension != "pptx") &&
<Flex onClick={() => { setOpenModalView(true) }} justify={'center'} align={'center'} direction={'column'} >
<Box>
<BsFileTextFill size={30} color={tema.get().utama} />
</Box>
<Box>
<Text c={tema.get().utama}>Lihat file</Text>
</Box>
</Flex>
}
<Flex onClick={() => { onDownload() }} justify={'center'} align={'center'} direction={'column'} >
<Box>
<BsFileTextFill size={30} color={tema.get().utama} />
<ImDownload3 size={30} color={tema.get().utama} />
</Box>
<Box>
<Text c={tema.get().utama}>Lihat file</Text>
<Text c={tema.get().utama}>Download</Text>
</Box>
</Flex>
{

50
src/module/task/ui/results_file.tsx
View File

@@ -1,9 +1,38 @@
import { Box, Center, Grid, Group, Text } from '@mantine/core';
import React from 'react';
import { BsFiletypeCsv, BsFiletypeHeic, BsFiletypeJpg, BsFiletypePdf, BsFiletypePng } from 'react-icons/bs';
import React, { useState } from 'react';
import { BsFiletypeCsv, BsFiletypeDocx, BsFiletypeHeic, BsFiletypeJpg, BsFiletypePdf, BsFiletypePng, BsFiletypePptx, BsFiletypeXlsx } from 'react-icons/bs';
import { IListFileTask } from '../lib/type_task';
import { useShallowEffect } from '@mantine/hooks';
export default function ResultsFile({ name, extension }: IListFileTask) {
const [fixed, setFixed] = useState(extension)
function cekExtension() {
let jadi = extension
if (extension == "msword") {
jadi = "doc"
} else if (extension == "vnd.openxmlformats-officedocument.wordprocessingml.document") {
jadi = "docx"
} else if (extension == "vnd.ms-excel") {
jadi = "xls"
} else if (extension == "vnd.openxmlformats-officedocument.spreadsheetml.sheet") {
jadi = "xlsx"
} else if (extension == "vnd.ms-powerpoint") {
jadi = "ppt"
} else if (extension == "vnd.openxmlformats-officedocument.presentationml.presentation") {
jadi = "pptx"
} else {
jadi = extension
}
setFixed(jadi)
}
useShallowEffect(() => {
cekExtension()
}, []);
return (
<Box style={{
borderRadius: 10,
@@ -13,15 +42,14 @@ export default function ResultsFile({ name, extension }: IListFileTask) {
<Grid gutter={"sm"} justify='flex-start' align='flex-start'>
<Grid.Col span={"auto"}>
<Center>
{extension == "pdf" && <BsFiletypePdf size={30} />}
{extension == "csv" && <BsFiletypeCsv size={30} />}
{extension == "png" && <BsFiletypePng size={30} />}
{extension == "jpg" && <BsFiletypeJpg size={30} />}
{extension == "jpeg" && <BsFiletypeJpg size={30} />}
{extension == "PNG" && <BsFiletypePng size={30} />}
{extension == "JPG" && <BsFiletypeJpg size={30} />}
{extension == "JPEG" && <BsFiletypeJpg size={30} />}
{extension == "heic" && <BsFiletypeHeic size={30} />}
{fixed == "pdf" && <BsFiletypePdf size={30} />}
{fixed == "csv" && <BsFiletypeCsv size={30} />}
{fixed == "png" && <BsFiletypePng size={30} />}
{fixed == "jpg" || fixed == "jpeg" && <BsFiletypeJpg size={30} />}
{fixed == "heic" && <BsFiletypeHeic size={30} />}
{fixed == "doc" || fixed == "docx" && <BsFiletypeDocx size={30} />}
{fixed == "xls" || fixed == "xlsx" && <BsFiletypeXlsx size={30} />}
{fixed == "ppt" || fixed == "pptx" && <BsFiletypePptx size={30} />}
</Center>
</Grid.Col>
<Grid.Col span={10}>