upd: project

Deskripsi: - tambah file - hapus file - upload file pada tambah data - download file blm selesai No Issues
2025-05-20 14:37:53 +08:00
parent 3199d31d57
commit 3ed9681912
6 changed files with 179 additions and 25 deletions
--- a/app/(application)/project/[id]/add-file.tsx
+++ b/app/(application)/project/[id]/add-file.tsx
@@ -58,8 +58,8 @@ export default function ProjectAddFile() {

         fd.append("file", {
            uri: val.uri,
-            type: val.mimeType,
-            name: val.fileName,
+            type: 'application/octet-stream',
+            name: val.name,
         } as any);

         fd.append(
@@ -88,8 +88,8 @@ export default function ProjectAddFile() {
         for (let i = 0; i < fileForm.length; i++) {
            fd.append(`file${i}`, {
               uri: fileForm[i].uri,
-               type: fileForm[i].mimeType,
-               name: fileForm[i].fileName,
+               type: 'application/octet-stream',
+               name: fileForm[i].name,
            } as any);
         }

@@ -100,16 +100,15 @@ export default function ProjectAddFile() {
            })
         );

-         console.log(fd)

         const response = await apiAddFileProject({ data: fd, id: id })
-         // if (response.success) {
-         //    ToastAndroid.show('Berhasil menambahkan file', ToastAndroid.SHORT)
-         //    dispatch(setUpdateProject({ ...update, file: !update.file }))
-         //    router.back()
-         // } else {
-         //    ToastAndroid.show(response.message, ToastAndroid.SHORT)
-         // }
+         if (response.success) {
+            ToastAndroid.show('Berhasil menambahkan file', ToastAndroid.SHORT)
+            dispatch(setUpdateProject({ ...update, file: !update.file }))
+            router.back()
+         } else {
+            ToastAndroid.show(response.message, ToastAndroid.SHORT)
+         }
      } catch (error) {
         console.error(error);
         ToastAndroid.show('Terjadi kesalahan', ToastAndroid.SHORT)
--- a/app/(application)/project/create.tsx
+++ b/app/(application)/project/create.tsx
@@ -2,8 +2,10 @@ import BorderBottomItem from "@/components/borderBottomItem";
 import ButtonBackHeader from "@/components/buttonBackHeader";
 import ButtonSaveHeader from "@/components/buttonSaveHeader";
 import ButtonSelect from "@/components/buttonSelect";
+import DrawerBottom from "@/components/drawerBottom";
 import ImageUser from "@/components/imageNew";
 import { InputForm } from "@/components/inputForm";
+import MenuItemRow from "@/components/menuItemRow";
 import ModalSelect from "@/components/modalSelect";
 import SectionListAddTask from "@/components/project/sectionListAddTask";
 import SelectForm from "@/components/selectForm";
@@ -13,6 +15,8 @@ import { setMemberChoose } from "@/lib/memberChoose";
 import { setUpdateProject } from "@/lib/projectUpdate";
 import { setTaskCreate } from "@/lib/taskCreate";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
+import * as DocumentPicker from "expo-document-picker";
 import { router, Stack } from "expo-router";
 import { useEffect, useState } from "react";
 import {
@@ -34,8 +38,10 @@ export default function CreateProject() {
   const entitiesMember = useSelector((state: any) => state.memberChoose);
   const taskCreate = useSelector((state: any) => state.taskCreate);
   const update = useSelector((state: any) => state.projectUpdate)
-   const [fileForm, setFileForm] = useState([])
+   const [fileForm, setFileForm] = useState<any[]>([])
+   const [indexDelFile, setIndexDelFile] = useState<number>(0)
   const [disableBtn, setDisableBtn] = useState(true)
+   const [isModal, setModal] = useState(false)
   const [dataForm, setDataForm] = useState({
      idGroup: "",
      title: "",
@@ -96,12 +102,19 @@ export default function CreateProject() {
      try {
         const hasil = await decryptToken(String(token?.current))
         const fd = new FormData()
+
         for (let i = 0; i < fileForm.length; i++) {
-            fd.append(`file${i}`, fileForm[i]);
+            fd.append(`file${i}`, {
+               uri: fileForm[i].uri,
+               type: 'application/octet-stream',
+               name: fileForm[i].name,
+            } as any);
         }
+
         fd.append("data", JSON.stringify(
            { user: hasil, task: taskCreate, member: entitiesMember, ...dataForm }
         ))
+         
         const response = await apiCreateProject(fd)
         if (response.success) {
            dispatch(setUpdateProject({ ...update, data: !update.data }))
@@ -128,6 +141,23 @@ export default function CreateProject() {
      checkForm()
   }, [error, dataForm, entitiesMember, taskCreate])

+   const pickDocumentAsync = async () => {
+      let result = await DocumentPicker.getDocumentAsync({
+         type: ["*/*"],
+         multiple: false
+      });
+      if (!result.canceled) {
+         if (result.assets[0].uri) {
+            setFileForm([...fileForm, result.assets[0]])
+         }
+      }
+   };
+
+   function deleteFile(index: number) {
+      setFileForm([...fileForm.filter((val, i) => i !== index)])
+      setModal(false)
+   }
+

   return (
      <SafeAreaView>
@@ -143,7 +173,7 @@ export default function CreateProject() {
               headerTitle: "Tambah Kegiatan",
               headerTitleAlign: "center",
               headerRight: () => (
-                  <ButtonSaveHeader 
+                  <ButtonSaveHeader
                     disable={disableBtn}
                     category="create"
                     onPress={() => {
@@ -188,7 +218,7 @@ export default function CreateProject() {
                  error={error.task}
                  errorText="Tanggal & Tugas tidak boleh kosong"
               />
-               <ButtonSelect value="Upload File" />
+               <ButtonSelect value="Upload File" onPress={pickDocumentAsync} />
               <ButtonSelect
                  value="Pilih Anggota"
                  onPress={() => {
@@ -206,6 +236,27 @@ export default function CreateProject() {
                  errorText="Anggota tidak boleh kosong"
               />
               <SectionListAddTask />
+               {
+                  fileForm.length > 0 && (
+                     <View style={[Styles.mb15]}>
+                        <Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>File</Text>
+                        <View style={[Styles.wrapPaper]}>
+                           {
+                              fileForm.map((item, index) => (
+                                 <BorderBottomItem
+                                    key={index}
+                                    borderType="all"
+                                    icon={<MaterialCommunityIcons name="file-outline" size={25} color="black" />}
+                                    title={item.name}
+                                    titleWeight="normal"
+                                    onPress={() => { setIndexDelFile(index); setModal(true) }}
+                                 />
+                              ))
+                           }
+                        </View>
+                     </View>
+                  )
+               }
               {entitiesMember.length > 0 && (
                  <View>
                     <View style={[Styles.rowSpaceBetween, Styles.mv05]}>
@@ -236,6 +287,15 @@ export default function CreateProject() {
               )}
            </View>
         </ScrollView>
+         <DrawerBottom animation="slide" isVisible={isModal} setVisible={setModal} title="Menu">
+            <View style={Styles.rowItemsCenter}>
+               <MenuItemRow
+                  icon={<Ionicons name="trash" color="black" size={25} />}
+                  title="Hapus"
+                  onPress={() => { deleteFile(indexDelFile) }}
+               />
+            </View>
+         </DrawerBottom>

         <ModalSelect
            category={valSelect}
--- a/bun.lockb
+++ b/bun.lockb
--- a/components/project/sectionFile.tsx
+++ b/components/project/sectionFile.tsx
@@ -1,16 +1,21 @@
 import Styles from "@/constants/Styles";
-import { apiGetProjectOne } from "@/lib/api";
+import { apiDeleteFileProject, apiGetProjectOne } from "@/lib/api";
+import { setUpdateProject } from "@/lib/projectUpdate";
 import { useAuthSession } from "@/providers/AuthProvider";
 import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
+import * as FileSystem from 'expo-file-system';
+import { Directory, File, Paths } from 'expo-file-system/next';
+import * as MediaLibrary from 'expo-media-library';
 import { useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
-import { Text, ToastAndroid, View } from "react-native";
-import { useSelector } from "react-redux";
+import { Alert, Platform, Text, ToastAndroid, View } from "react-native";
+import { useDispatch, useSelector } from "react-redux";
 import AlertKonfirmasi from "../alertKonfirmasi";
 import BorderBottomItem from "../borderBottomItem";
 import DrawerBottom from "../drawerBottom";
 import MenuItemRow from "../menuItemRow";

+
 type Props = {
   id: string
   name: string
@@ -25,6 +30,8 @@ export default function SectionFile({ status, member }: { status: number | undef
   const { id } = useLocalSearchParams<{ id: string }>();
   const [data, setData] = useState<Props[]>([]);
   const update = useSelector((state: any) => state.projectUpdate)
+   const [idSelect, setIdSelect] = useState('')
+   const dispatch = useDispatch()

   async function handleLoad() {
      try {
@@ -44,6 +51,90 @@ export default function SectionFile({ status, member }: { status: number | undef
      handleLoad();
   }, [update.file]);

+   async function handleDelete() {
+      try {
+         const hasil = await decryptToken(String(token?.current));
+         const response = await apiDeleteFileProject({ user: hasil }, idSelect);
+         if (response.success) {
+            ToastAndroid.show('Berhasil menghapus file', ToastAndroid.SHORT)
+            dispatch(setUpdateProject({ ...update, file: !update.file }))
+         } else {
+            ToastAndroid.show(response.message, ToastAndroid.SHORT)
+         }
+      } catch (error) {
+         console.error(error);
+         ToastAndroid.show('Terjadi kesalahan', ToastAndroid.SHORT)
+      } finally {
+         setModal(false)
+      }
+   }
+
+   const downloadFile = async (fileUrl: string) => {
+      try {
+         // Get file name from URL
+         const fileName = fileUrl.substring(fileUrl.lastIndexOf('/') + 1);
+
+         // Create local file path
+         const fileUri = `${FileSystem.documentDirectory}${fileName}`;
+
+         // Download the file with progress tracking
+         const downloadResumable = FileSystem.createDownloadResumable(
+            fileUrl,
+            fileUri,
+            {},
+            (downloadProgress) => {
+               const progress = downloadProgress.totalBytesWritten / downloadProgress.totalBytesExpectedToWrite;
+            }
+         );
+         const downloadResult = await downloadResumable.downloadAsync();
+
+         if (downloadResult && downloadResult.uri) {
+            const uri = downloadResult.uri;
+
+            if (Platform.OS === 'android') {
+               // For Android, we need to save to media library
+               const { status } = await MediaLibrary.requestPermissionsAsync();
+
+               if (status === 'granted') {
+                  const fileString = await FileSystem.readAsStringAsync(uri, { encoding: FileSystem.EncodingType.Base64 });
+                  const newFile = await FileSystem.StorageAccessFramework.createFileAsync(
+                     uri,
+                     'sample',
+                     downloadResult.headers['content-type']
+                  );
+                  await FileSystem.writeAsStringAsync(newFile, fileString, { encoding: FileSystem.EncodingType.Base64 });
+                  Alert.alert('Success', `File downloaded and saved to Downloads folder`);
+               } else {
+                  Alert.alert('Error', 'Permission to access media library denied');
+               }
+            } else {
+               // For iOS, the file is already saved to the app's document directory
+               Alert.alert('Success', `File downloaded and saved to app's documents folder`);
+            }
+
+            return uri;
+         }
+      } catch (error) {
+         console.error('Error downloading file:', error);
+         Alert.alert('Error', `Failed to download file: ${error}`);
+         return null;
+      }
+   };
+
+
+   async function download() {
+      const url = 'https://pdfobject.com/pdf/sample.pdf';
+      const destination = new Directory(Paths.cache, 'pdfs');
+      try {
+         destination.create();
+         const output = await File.downloadFileAsync(url, destination);
+      } catch (error) {
+         console.error(error);
+      }
+   }
+
+
+
   return (
      <>
         <View style={[Styles.mb15]}>
@@ -59,7 +150,7 @@ export default function SectionFile({ status, member }: { status: number | undef
                              icon={<MaterialCommunityIcons name="file-outline" size={25} color="black" />}
                              title={item.name + '.' + item.extension}
                              titleWeight="normal"
-                              onPress={() => { setModal(true) }}
+                              onPress={() => { setIdSelect(item.id); setModal(true) }}
                           />
                        )
                     })
@@ -82,6 +173,7 @@ export default function SectionFile({ status, member }: { status: number | undef
                  icon={<MaterialCommunityIcons name="download" color="black" size={25} />}
                  title="Download"
                  onPress={() => {
+                     downloadFile('https://pdfobject.com/pdf/sample.pdf')
                     setModal(false)
                  }}
               />
@@ -98,8 +190,7 @@ export default function SectionFile({ status, member }: { status: number | undef
                              title: 'Konfirmasi',
                              desc: 'Apakah Anda yakin ingin menghapus file ini? File yang dihapus tidak dapat dikembalikan',
                              onPress: () => {
-                                 setModal(false)
-                                 ToastAndroid.show('Berhasil menghapus data', ToastAndroid.SHORT)
+                                 handleDelete()
                              }
                           })

--- a/lib/api.ts
+++ b/lib/api.ts
@@ -323,7 +323,6 @@ export const apiDeleteProject = async (data: { user: string }, id: string) => {
 };

 export const apiAddFileProject = async ({ data, id }: { data: FormData, id: string }) => {
-   console.log('apiAddFileProject')
   const response = await api.post(`/mobile/project/file/${id}`, data,
      {
         headers: {
@@ -331,7 +330,6 @@ export const apiAddFileProject = async ({ data, id }: { data: FormData, id: stri
         },
      }
   )
-   console.log(response)
   return response.data;
 };

@@ -344,4 +342,9 @@ export const apiCheckFileProject = async ({ data, id }: { data: FormData, id: st
      }
   )
   return response.data;
+};
+
+export const apiDeleteFileProject = async (data: { user: string }, id: string) => {
+   const response = await api.delete(`/mobile/project/file/${id}`, { data })
+   return response.data;
 };
--- a/package.json
+++ b/package.json
@@ -29,13 +29,14 @@
    "expo-blur": "~14.1.4",
    "expo-constants": "~17.1.6",
    "expo-document-picker": "^13.1.5",
-    "expo-file-system": "~18.1.10",
+    "expo-file-system": "^18.1.10",
    "expo-font": "~13.3.1",
    "expo-haptics": "~14.1.4",
    "expo-image-picker": "~16.1.4",
    "expo-linear-gradient": "~14.1.4",
    "expo-linking": "~7.1.5",
    "expo-media-library": "~17.1.6",
+    "expo-permissions": "^14.4.0",
    "expo-router": "~5.0.7",
    "expo-splash-screen": "~0.30.8",
    "expo-status-bar": "~2.2.3",