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/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}>