Fix/upload

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

@@ -1,35 +1,37 @@
-import React, { useMemo, useState } from "react";
-import { XStack, YStack } from "tamagui";
-import { Screen } from "../../components/Screen";
-import { Icon } from "../../components/Icon";
+import { useMemo, useState } from "react";
 import { router } from "expo-router";
-import Header from "../../components/Header";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import Button from "../../components/Button";
-import FormInput from "../../components/FormInputs/FormInput";
-import Select from "../../components/Select";
 import { useUserData } from "../../contexts/user/UserContext.provider";
 import { Controller, useForm } from "react-hook-form";
 import { PollingStationVisitVM } from "../../common/models/polling-station.model";
-import FormElement from "../../components/FormInputs/FormElement";
-import AddAttachment from "../../components/AddAttachment";
-import { Keyboard } from "react-native";
-import OptionsSheet from "../../components/OptionsSheet";
-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, addAttachmentQuickReportMultipartAbort, addAttachmentQuickReportMultipartComplete } 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";
+import { addAttachmentMultipartAbort, addAttachmentMultipartComplete, uploadS3Chunk } from "../../services/api/add-attachment.api";
+import * as FileSystem from 'expo-file-system';
+import { Buffer } from 'buffer';
+import { Keyboard } from "react-native";
+import { YStack, Card, XStack, Spinner } from "tamagui";
+import AddAttachment from "../../components/AddAttachment";
+import FormElement from "../../components/FormInputs/FormElement";
+import FormInput from "../../components/FormInputs/FormInput";
+import { Icon } from "../../components/Icon";
+import OptionsSheet from "../../components/OptionsSheet";
+import { Typography } from "../../components/Typography";
+import Header from "../../components/Header";
+import { Screen } from "../../components/Screen";
+import Select from "../../components/Select";
+import Button from "../../components/Button";
 
 const mapVisitsToSelectPollingStations = (visits: PollingStationVisitVM[] = []) => {
  const pollingStationsForSelect = visits.map((visit) => {
@@ -70,8 +72,11 @@
  const pollingStations = useMemo(() => mapVisitsToSelectPollingStations(visits), [visits]);
  const [optionsSheetOpen, setOptionsSheetOpen] = useState(false);
  const { t } = useTranslation("report_new_issue");
+ const [isLoadingAttachment, setIsLoadingAttachment] = useState(false);
+ const [isPreparingFile, setIsPreparingFile] = useState(false);
+ const [uploadProgress, setUploadProgress] = useState('');
 
- const [attachments, setAttachments] = useState<Array<{ fileMetadata: FileMetadata; id: string }>>(
+ const [attachments, setAttachments] = useState<Array<{ fileMetadata: FileMetadata; id: string, }>>(
  [],
  );
 
@@ -80,7 +85,8 @@
  isPending: isPendingAddQuickReport,
  isPaused: isPausedAddQuickReport,
  } = useAddQuickReport();
- const { mutateAsync: addAttachmentQReport } = addAttachmentQuickReportMutation();
+
+ const { mutateAsync: addAttachmentQReport, isPaused: isPausedStartAddAttachment, } = useUploadAttachmentQuickReportMutation(`Quick_Report_${activeElectionRound?.id}}`);
 
  const addAttachmentsMutationState = useMutationState({
  filters: { mutationKey: QuickReportKeys.addAttachment() },
@@ -115,6 +121,9 @@
  const { uploadCameraOrMedia } = useCamera();
 
  const handleCameraUpload = async (type: "library" | "cameraPhoto" | "cameraVideo") => {
+ setIsPreparingFile(true);
+ setUploadProgress(t("upload.preparing"))
+
  const cameraResult = await uploadCameraOrMedia(type);
 
  if (!cameraResult || !activeElectionRound) {
@@ -126,9 +135,12 @@
  ...attachments,
  { fileMetadata: cameraResult, id: Crypto.randomUUID() },
  ]);
+ setIsPreparingFile(false);
  };
 
  const handleUploadAudio = async () => {
+ setIsPreparingFile(true);
+ setUploadProgress(t("upload.preparing"))
  const doc = await DocumentPicker.getDocumentAsync({
  type: "audio/*",
  multiple: false,
@@ -145,16 +157,50 @@
 
  setOptionsSheetOpen(false);
  setAttachments((attachments) => [...attachments, { fileMetadata, id: Crypto.randomUUID() }]);
+ setIsPreparingFile(false);
  } else {
  // Cancelled
  }
  };
 
+ const handleChunkUpload = async (filePath: string, uploadUrls: Record<string, string>, uploadId: string, attachmentId: string, quickReportId: string) => {
+ try {
+
+ let etags: Record<number, string> = {};
+ const urls = Object.values(uploadUrls);
+ for (const [index, url] of urls.entries()) {
+ const chunk = await FileSystem.readAsStringAsync(filePath, { length: MULTIPART_FILE_UPLOAD_SIZE, position: index * MULTIPART_FILE_UPLOAD_SIZE, encoding: FileSystem.EncodingType.Base64 });
+ const buffer = Buffer.from(chunk, 'base64');
+ const data = await uploadS3Chunk(url, buffer)
+ etags = { ...etags, [index + 1]: data.ETag }
+ };
+
+
+ if (activeElectionRound?.id) {
+ await addAttachmentQuickReportMultipartComplete({ uploadId, etags, electionRoundId: activeElectionRound?.id, id: attachmentId, quickReportId, })
+ }
+ } catch (err) {
+ // If error try to abort the upload
+ if (activeElectionRound?.id) {
+ setUploadProgress(t("upload.aborted"));
+ await addAttachmentQuickReportMultipartAbort({ id: attachmentId, uploadId, electionRoundId: activeElectionRound.id, quickReportId })
+ }
+ } finally {
+ if (activeElectionRound?.id) {
+ queryClient.invalidateQueries({
+ queryKey: QuickReportKeys.byElectionRound(activeElectionRound.id),
+ });
+ }
+ }
+ }
+
  const onSubmit = async (formData: ReportIssueFormType) => {
  if (!visits || !activeElectionRound) {
  return;
  }
 
+
+
  let quickReportLocationType = QuickReportLocationType.VisitedPollingStation;
  let pollingStationId: string | null = formData.polling_station_id;
 
@@ -171,30 +217,35 @@
  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 = {
- id,
- fileMetadata,
+ setOptionsSheetOpen(true);
+ setIsLoadingAttachment(true);
+ try {
+ // Upload each attachment
+ setUploadProgress(`${t("upload.starting")}`)
+ for (const [index, attachment] of attachments.entries()) {
+ const payload: AddAttachmentQuickReportStartAPIPayload = {
+ id: attachment.id,
+ fileName: attachment.fileMetadata.name,
+ filePath: attachment.fileMetadata.uri,
+ contentType: attachment.fileMetadata.type,
+ numberOfUploadParts: Math.ceil(attachment.fileMetadata.size! / MULTIPART_FILE_UPLOAD_SIZE),
  electionRoundId: activeElectionRound.id,
  quickReportId: uuid,
  };
+ const data = await addAttachmentQReport(payload);
+ await handleChunkUpload(attachment.fileMetadata.uri, data.uploadUrls, data.uploadId, attachment.id, uuid);
+ setUploadProgress(`${t("upload.progress")} ${Math.round(((index + 1) / attachments.length) * 100 * 10) / 10} %`);
  optimisticAttachments.push(payload);
- return addAttachmentQReport(payload);
- },
- );
- try {
- Promise.all(attachmentsMutations).then(() => {
- queryClient.invalidateQueries({
- queryKey: QuickReportKeys.byElectionRound(activeElectionRound.id),
- });
- });
+ }
+ setUploadProgress(t("upload.completed"));
  } catch (err) {
- Sentry.captureMessage("Failed to upload some attachments");
- Sentry.captureException(err);
+ console.log(err);
+ } finally {
+ setIsLoadingAttachment(false);
+ setOptionsSheetOpen(false);
  }
  }
  mutate(
@@ -404,32 +455,35 @@
  </KeyboardAwareScrollView>
 
  <OptionsSheet open={optionsSheetOpen} setOpen={setOptionsSheetOpen}>
- <YStack paddingHorizontal="$sm">
- <Typography
- onPress={handleCameraUpload.bind(null, "library")}
- preset="body1"
- paddingVertical="$md"
- pressStyle={{ color: "$purple5" }}
- >
- {t("media.menu.load")}
- </Typography>
- <Typography
- onPress={handleCameraUpload.bind(null, "cameraPhoto")}
- preset="body1"
- paddingVertical="$md"
- pressStyle={{ color: "$purple5" }}
- >
- {t("media.menu.take_picture")}
- </Typography>
- <Typography
- onPress={handleUploadAudio.bind(null)}
- preset="body1"
- paddingVertical="$md"
- pressStyle={{ color: "$purple5" }}
- >
- {t("media.menu.upload_audio")}
- </Typography>
- </YStack>
+ {(isLoadingAttachment && !isPausedStartAddAttachment) || isPreparingFile ? (
+ <MediaLoading progress={uploadProgress} />) :
+
+ <YStack paddingHorizontal="$sm">
+ <Typography
+ onPress={handleCameraUpload.bind(null, "library")}
+ preset="body1"
+ paddingVertical="$md"
+ pressStyle={{ color: "$purple5" }}
+ >
+ {t("media.menu.load")}
+ </Typography>
+ <Typography
+ onPress={handleCameraUpload.bind(null, "cameraPhoto")}
+ preset="body1"
+ paddingVertical="$md"
+ pressStyle={{ color: "$purple5" }}
+ >
+ {t("media.menu.take_picture")}
+ </Typography>
+ <Typography
+ onPress={handleUploadAudio.bind(null)}
+ preset="body1"
+ paddingVertical="$md"
+ pressStyle={{ color: "$purple5" }}
+ >
+ {t("media.menu.upload_audio")}
+ </Typography>
+ </YStack>}
  </OptionsSheet>
  </Screen>
 
@@ -461,4 +515,16 @@
  );
 };
 
+const MediaLoading = ({ progress }: { progress?: string }) => {
+ const { t } = useTranslation("polling_station_form_wizard");
+ return (
+ <YStack alignItems="center" gap="$lg" paddingHorizontal="$lg">
+ <Spinner size="large" color="$purple5" />
+ <Typography preset="subheading" fontWeight="500" color="$purple5">
+ {progress ? progress : t("attachments.loading")}
+ </Typography>
+ </YStack>
+ );
+};
+
 export default ReportIssue;

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",
@@ -318,6 +325,13 @@
  },
  "report_new_issue": {
  "title": "Report new issue",
+ "upload": {
+ "preparing": "Preparing attachment...",
+ "starting": "Starting the upload...",
+ "progress": "Upload progress:",
+ "completed": "Upload completed.",
+ "aborted": "Upload aborted."
+ },
  "media": {
  "heading": "Uploaded media",
  "add": "Add media",

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