Improve upload progress.

redux/photos/photos.reducer.js

@@ -17,7 +17,7 @@ const photosReducer = (state = INITIAL_STATE, action) => {
         jobid: action.payload.jobid,
         uploadInProgress: true,
         uploadError: null,
-        progress: {}
+        progress: action.payload.progress || {}
       };
     case PhotosActionTypes.MEDIA_UPLOAD_FAILURE:
       return {

redux/photos/photos.sagas.js

@@ -2,13 +2,17 @@ import axios from "axios";
 import Constants from "expo-constants";
 import * as ImagePicker from "expo-image-picker";
 import * as MediaLibrary from "expo-media-library";
+import _ from 'lodash';
 import moment from 'moment';
+import { Alert, Platform } from "react-native";
 import { all, call, delay, put, select, takeEvery, takeLatest } from "redux-saga/effects";
 import env from "../../env";
 import { client } from '../../graphql/client';
-import { GET_DOC_SIZE_TOTALS, INSERT_NEW_DOCUMENT } from "../../graphql/documents.queries";
+import { INSERT_NEW_DOCUMENT } from "../../graphql/documents.queries";
 import { axiosAuthInterceptorId } from "../../util/CleanAxios";
 import { fetchImageFromUri, replaceAccents } from '../../util/uploadUtils';
+import { selectDeleteAfterUpload } from "../app/app.selectors";
+import { store } from "../store";
 import { selectBodyshop, selectCurrentUser } from "../user/user.selectors";
 import {
   deleteMediaSuccess,
@@ -19,12 +23,9 @@ import {
   mediaUploadStart,
   mediaUploadSuccessOne
 } from "./photos.actions";
-
-import i18n from "@/translations/i18n";
-import { Platform } from "react-native";
-import { selectDeleteAfterUpload } from "../app/app.selectors";
 import PhotosActionTypes from "./photos.types";
 
+
 axios.interceptors.request.use(
   function (config) {
     config.metadata = { startTime: new Date() };
@@ -80,7 +81,7 @@ export function* openImagePickerAction({ payload: jobid }) {
       exif: true,
     });
     if (!(result.canceled)) {
-      yield put(mediaUploadStart({ photos: result.assets, jobid }));
+      yield put(mediaUploadStart({ photos: result.assets, jobid, progress: _.keyBy(result.assets, 'assetId') }));
     }
   } catch (error) {
     // console.log("Saga Error: open Picker", error);
@@ -101,14 +102,13 @@ export function* mediaUploadStartAction({ payload: { photos, jobid } }) {
     else {
 
       //Check to see if the job has enough space before uploading. 
+      // const hasEnoughSpace = yield call(checkJobSpace, jobid, photos, bodyshop);
+      // if (!hasEnoughSpace) {
 
-      const hasEnoughSpace = yield call(checkJobSpace, jobid, photos, bodyshop);
-      if (!hasEnoughSpace) {
-
-        alert(i18n.t("mediabrowser.labels.storageexceeded"));
-        yield put(mediaUploadFailure(i18n.t("mediabrowser.labels.storageexceeded")));
-        return;
-      }
+      //   alert(i18n.t("mediabrowser.labels.storageexceeded"));
+      //   yield put(mediaUploadFailure(i18n.t("mediabrowser.labels.storageexceeded")));
+      //   return;
+      // }
 
       // Process photos in batches to avoid overwhelming the system
       const batchSize = 3; // Upload 3 photos concurrently
@@ -137,43 +137,45 @@ export function* mediaUploadStartAction({ payload: { photos, jobid } }) {
   }
 }
 
-function* checkJobSpace(jobid, photos, bodyshop) {
-  try {
-    const totalOfUploads = photos.reduce((acc, val) => {
-      //Get the size of the file based on URI.
-      if (val.fileSize) {
-        return acc + val.fileSize;
-      } else {
-        alert("Asset is missing filesize. Cannot verify job space.");
-        return acc
-      }
-    }, 0);
+// function* checkJobSpace(jobid, photos, bodyshop) {
+//   try {
+//     //TODO - This function has not been validated and saw issues during testing.
+//     //It was not fixed as we will not be enabling it.
+//     const totalOfUploads = photos.reduce((acc, val) => {
+//       //Get the size of the file based on URI.
+//       if (val.fileSize) {
+//         return acc + val.fileSize;
+//       } else {
+//         alert("Asset is missing filesize. Cannot verify job space.");
+//         return acc
+//       }
+//     }, 0);
 
-    if (jobid !== "temp") {
-      const queryData = yield call(client.query, {
-        query: GET_DOC_SIZE_TOTALS,
-        fetchPolicy: "network-only",
-        variables: {
-          jobId: jobid,
-        },
-      });
+//     if (jobid !== "temp") {
+//       const queryData = yield call(client.query, {
+//         query: GET_DOC_SIZE_TOTALS,
+//         fetchPolicy: "network-only",
+//         variables: {
+//           jobId: jobid,
+//         },
+//       });
 
-      if (
-        bodyshop.jobsizelimit -
-        queryData?.data?.documents_aggregate.aggregate.sum.size <=
-        totalOfUploads
-      ) {
-        //No more room... abandon ship.
-        return false;
-      }
-    }
-    return true;
-  }
-  catch (error) {
-    console.log("Error checking job space", error, error.stack);
-    return false;
-  }
-}
+//       if (
+//         bodyshop.jobsizelimit -
+//         queryData?.data?.documents_aggregate.aggregate.sum.size <=
+//         totalOfUploads
+//       ) {
+//         //No more room... abandon ship.
+//         return false;
+//       }
+//     }
+//     return true;
+//   }
+//   catch (error) {
+//     console.log("Error checking job space", error, error.stack);
+//     return false;
+//   }
+// }
 
 function* uploadSinglePhoto(photo, bodyshop, index, jobid) {
   try {
@@ -259,29 +261,31 @@ function* uploadToImageProxy(photo, photoBlob, extension, key, bodyshop, jobid)
     let uploadResult
     try {
       uploadResult = yield new Promise((resolve, reject) => {
+
+        console.log("Starting XHR")
         const xhr = new XMLHttpRequest();
+        xhr.upload.onprogress = (e) => {
+          console.log("Upload Progress:", e.loaded, e.total);
+          store.dispatch({ ...photo, progress: e.loaded / e.total, loaded: e.loaded });
+          put(mediaUploadProgressOne({ ...photo, progress: e.loaded / e.total, loaded: e.loaded }));
+
+        };
         xhr.open("PUT", preSignedUploadUrlToS3);
         xhr.setRequestHeader("Content-Type", photoBlob.type);
-
-        xhr.upload.onprogress = (e) => {
-          if (e.lengthComputable) {
-            put(mediaUploadProgressOne({ ...photo, progress: e.loaded / e.total, loaded: e.loaded }));
-          }
-        };
-
         xhr.onload = () => {
           if (xhr.status === 200) {
+            console.log("XHR Done. Resolve promise.")
             resolve(true);
           } else {
             reject(new Error(`Upload failed: ${xhr.statusText}`));
           }
         };
-
         xhr.onerror = (req, event) => {
           reject(new Error("Network error"));
         };
-
+        console.log("Sending XHR")
         xhr.send(photoBlob);
+
       });
     } catch (error) {
       console.log("Error uploading to S3", error.message, error.stack);
@@ -395,13 +399,22 @@ function* mediaUploadCompletedAction({ payload: photos }) {
   }
 }
 
+// Handle cancellation of uploads
+function* onMediaUploadFailure() {
+  yield takeEvery(PhotosActionTypes.MEDIA_UPLOAD_FAILURE, mediaUploadFailureAction);
+}
+
+function* mediaUploadFailureAction({ payload: errorMessage }) {
+  Alert.alert("Upload Error", `An error occurred during upload: ${errorMessage}`);
+}
 
 
 export function* photosSagas() {
   yield all([
     call(onOpenImagePicker),
     call(onMediaUploadStart),
-    call(onMediaUploadCompleted)
+    call(onMediaUploadCompleted),
+    call(onMediaUploadFailure)
     //call(onCancelUpload)
   ]);
 }

redux/root.reducer.js

@@ -9,7 +9,7 @@ const persistConfig = {
   key: "root",
   storage: AsyncStorage,
   // whitelist: ["photos"],
-  blacklist: ["user",], // Add reducers you do NOT want to persist
+  blacklist: ["user", "photos"], // Add reducers you do NOT want to persist
 };
 
 const rootReducer = combineReducers({