upd: project

Deskripsi:
- tambah file
- hapus file
- upload file pada tambah data
- download file blm selesai

No Issues

app/(application)/project/[id]/add-file.tsx

@@ -58,8 +58,8 @@ export default function ProjectAddFile() {
 
          fd.append("file", {
             uri: val.uri,
-            type: val.mimeType,
+            type: 'application/octet-stream',
-            name: val.fileName,
+            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,
+               type: 'application/octet-stream',
-               name: fileForm[i].fileName,
+               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) {
+         if (response.success) {
-         //    ToastAndroid.show('Berhasil menambahkan file', ToastAndroid.SHORT)
+            ToastAndroid.show('Berhasil menambahkan file', ToastAndroid.SHORT)
-         //    dispatch(setUpdateProject({ ...update, file: !update.file }))
+            dispatch(setUpdateProject({ ...update, file: !update.file }))
-         //    router.back()
+            router.back()
-         // } else {
+         } else {
-         //    ToastAndroid.show(response.message, ToastAndroid.SHORT)
+            ToastAndroid.show(response.message, ToastAndroid.SHORT)
-         // }
+         }
       } catch (error) {
          console.error(error);
          ToastAndroid.show('Terjadi kesalahan', ToastAndroid.SHORT)

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}

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 { Alert, Platform, Text, ToastAndroid, View } from "react-native";
-import { useSelector } from "react-redux";
+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)
+                                 handleDelete()
-                                 ToastAndroid.show('Berhasil menghapus data', ToastAndroid.SHORT)
                               }
                            })
 

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

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",