Fix/upload

mobile/app/(app)/report-issue.tsx

@@ -19,16 +19,17 @@ import { Typography } from "../../components/Typography";
 import { useAddQuickReport } from "../../services/mutations/quick-report/add-quick-report.mutation";
 import * as Crypto from "expo-crypto";
 import { FileMetadata, useCamera } from "../../hooks/useCamera";
-import { addAttachmentQuickReportMutation } from "../../services/mutations/quick-report/add-attachment-quick-report.mutation";
 import { QuickReportLocationType } from "../../services/api/quick-report/post-quick-report.api";
 import * as DocumentPicker from "expo-document-picker";
 import { onlineManager, useMutationState, useQueryClient } from "@tanstack/react-query";
 import Card from "../../components/Card";
 import { QuickReportKeys } from "../../services/queries/quick-reports.query";
 import * as Sentry from "@sentry/react-native";
-import { AddAttachmentQuickReportAPIPayload } from "../../services/api/quick-report/add-attachment-quick-report.api";
 import { useTranslation } from "react-i18next";
 import i18n from "../../common/config/i18n";
+import { AddAttachmentQuickReportStartAPIPayload } from "../../services/api/quick-report/add-attachment-quick-report.api";
+import { useUploadAttachmentQuickReportMutation } from "../../services/mutations/quick-report/add-attachment-quick-report.mutation";
+import { MULTIPART_FILE_UPLOAD_SIZE } from "../../common/constants";
 import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
 
 const mapVisitsToSelectPollingStations = (visits: PollingStationVisitVM[] = []) => {
@@ -71,7 +72,7 @@ const ReportIssue = () => {
   const [optionsSheetOpen, setOptionsSheetOpen] = useState(false);
   const { t } = useTranslation("report_new_issue");
 
-  const [attachments, setAttachments] = useState<Array<{ fileMetadata: FileMetadata; id: string }>>(
+  const [attachments, setAttachments] = useState<Array<{ fileMetadata: FileMetadata; id: string, }>>(
     [],
   );
 
@@ -80,7 +81,8 @@ const ReportIssue = () => {
     isPending: isPendingAddQuickReport,
     isPaused: isPausedAddQuickReport,
   } = useAddQuickReport();
-  const { mutateAsync: addAttachmentQReport } = addAttachmentQuickReportMutation();
+
+  const { mutateAsync: addAttachmentQReport } = useUploadAttachmentQuickReportMutation(`Quick_Report_${activeElectionRound?.id}}`);
 
   const addAttachmentsMutationState = useMutationState({
     filters: { mutationKey: QuickReportKeys.addAttachment() },
@@ -171,14 +173,17 @@ const ReportIssue = () => {
     const uuid = Crypto.randomUUID();
 
     // Use the attachments to optimistically update the UI
-    const optimisticAttachments: AddAttachmentQuickReportAPIPayload[] = [];
+    const optimisticAttachments: AddAttachmentQuickReportStartAPIPayload[] = [];
 
     if (attachments.length > 0) {
       const attachmentsMutations = attachments.map(
         ({ fileMetadata, id }: { fileMetadata: FileMetadata; id: string }) => {
-          const payload: AddAttachmentQuickReportAPIPayload = {
+          const payload: AddAttachmentQuickReportStartAPIPayload = {
             id,
-            fileMetadata,
+            fileName: fileMetadata.name,
+            filePath: fileMetadata.uri,
+            contentType: fileMetadata.type,
+            numberOfUploadParts: Math.ceil(fileMetadata.size! / MULTIPART_FILE_UPLOAD_SIZE), // DRAGOS CHECK AGAIN
             electionRoundId: activeElectionRound.id,
             quickReportId: uuid,
           };

mobile/assets/locales/en/translations.json

@@ -257,6 +257,13 @@
     "attachments": {
       "heading": "Uploaded media",
       "loading": "Adding attachment... ",
+      "upload": {
+        "preparing": "Preparing attachment...",
+        "starting": "Starting the upload...",
+        "progress": "Upload progress:",
+        "completed": "Upload completed.",
+        "aborted": "Upload aborted."
+      },
       "add": "Add notes and media",
       "menu": {
         "add_note": "Add note",

mobile/common/constants.ts

@@ -9,3 +9,5 @@ export const SECURE_STORAGE_KEYS = {
 };
 
 export const I18N_LANGUAGE = "i18n-language";
+
+export const MULTIPART_FILE_UPLOAD_SIZE = 10 * 1024 * 1024; // 10MB.

mobile/contexts/persist-query/PersistQueryContext.provider.tsx

@@ -5,18 +5,15 @@ import AsyncStorage from "@react-native-async-storage/async-storage";
 import { notesKeys, pollingStationsKeys } from "../../services/queries.service";
 import * as API from "../../services/definitions.api";
 import { PersistGate } from "../../components/PersistGate";
-import { AddAttachmentAPIPayload, addAttachment } from "../../services/api/add-attachment.api";
+import { AddAttachmentStartAPIPayload, addAttachmentMultipartStart } from "../../services/api/add-attachment.api";
 import { deleteAttachment } from "../../services/api/delete-attachment.api";
 import { Note } from "../../common/models/note";
 import { QuickReportKeys } from "../../services/queries/quick-reports.query";
 import {
   AddQuickReportAPIPayload,
   addQuickReport,
 } from "../../services/api/quick-report/post-quick-report.api";
-import {
-  AddAttachmentQuickReportAPIPayload,
-  addAttachmentQuickReport,
-} from "../../services/api/quick-report/add-attachment-quick-report.api";
+import { AddAttachmentQuickReportStartAPIPayload, addAttachmentQuickReportMultipartStart } from "../../services/api/quick-report/add-attachment-quick-report.api";
 import { AttachmentApiResponse } from "../../services/api/get-attachments.api";
 import { AttachmentsKeys } from "../../services/queries/attachments.query";
 import { ASYNC_STORAGE_KEYS } from "../../common/constants";
@@ -27,7 +24,7 @@ const queryClient = new QueryClient({
   mutationCache: new MutationCache({
     // There is also QueryCache
     onSuccess: (data: unknown) => {
-      console.log("MutationCache ", data);
+      // console.log("MutationCache ", data);
     },
     onError: (error: Error, _vars, _context, mutation) => {
       console.log("MutationCache error ", error);
@@ -104,14 +101,14 @@ const PersistQueryContextProvider = ({ children }: React.PropsWithChildren) => {
   });
 
   queryClient.setMutationDefaults(AttachmentsKeys.addAttachmentMutation(), {
-    mutationFn: async (payload: AddAttachmentAPIPayload) => {
-      return addAttachment(payload);
+    mutationFn: async (payload: AddAttachmentStartAPIPayload) => {
+      return addAttachmentMultipartStart(payload);
     },
   });
 
   queryClient.setMutationDefaults(AttachmentsKeys.deleteAttachment(), {
     mutationFn: async (payload: AttachmentApiResponse) => {
-      return payload.isNotSynched ? () => {} : deleteAttachment(payload);
+      return payload.isNotSynched ? () => { } : deleteAttachment(payload);
     },
   });
 
@@ -129,22 +126,22 @@ const PersistQueryContextProvider = ({ children }: React.PropsWithChildren) => {
 
   queryClient.setMutationDefaults(notesKeys.deleteNote(), {
     mutationFn: async (payload: Note) => {
-      return payload.isNotSynched ? () => {} : API.deleteNote(payload);
+      return payload.isNotSynched ? () => { } : API.deleteNote(payload);
     },
   });
 
   queryClient.setMutationDefaults(QuickReportKeys.add(), {
     mutationFn: async ({
       attachments: _,
       ...payload
-    }: AddQuickReportAPIPayload & { attachments: AddAttachmentQuickReportAPIPayload[] }) => {
+    }: AddQuickReportAPIPayload & { attachments: AddAttachmentQuickReportStartAPIPayload[] }) => {
       return addQuickReport(payload);
     },
   });
 
   queryClient.setMutationDefaults(QuickReportKeys.addAttachment(), {
-    mutationFn: async (payload: AddAttachmentQuickReportAPIPayload) => {
-      return addAttachmentQuickReport(payload);
+    mutationFn: async (payload: AddAttachmentQuickReportStartAPIPayload) => {
+      return addAttachmentQuickReportMultipartStart(payload);
     },
   });
 

mobile/hooks/useCamera.tsx

@@ -1,6 +1,6 @@
 import * as ImagePicker from "expo-image-picker";
 import Toast from "react-native-toast-message";
-import { Video, Image } from "react-native-compressor";
+import { Video, Image, getVideoMetaData } from "react-native-compressor";
 import * as Sentry from "@sentry/react-native";
 
 /**
@@ -41,6 +41,7 @@ export type FileMetadata = {
   uri: string;
   name: string;
   type: string;
+  size?: number;
 };
 
 export const useCamera = () => {
@@ -105,11 +106,13 @@ export const useCamera = () => {
       }
 
       const filename = resultCompression.split("/").pop() || "";
+      const metaData = await getVideoMetaData(resultCompression);
 
       const toReturn = {
         uri: resultCompression,
         name: filename,
         type: file.mimeType || "",
+        size: metaData.size,
       };
       return toReturn;
     }

mobile/package.json

@@ -36,6 +36,7 @@
     "@tanstack/react-query": "^5.36.0",
     "@tanstack/react-query-persist-client": "^5.36.0",
     "axios": "^1.6.8",
+    "buffer": "^6.0.3",
     "expo": "~50.0.17",
     "expo-application": "~5.8.4",
     "expo-build-properties": "~0.11.1",