IO-750 Resolve overwriting images on iOS Upload

components/screen-media-browser/screen-media-browser.component.jsx

@@ -6,7 +6,6 @@ import { H3 } from "native-base";
 import React, { useCallback, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { StyleSheet, Text, View } from "react-native";
-import { SafeAreaView } from "react-native-safe-area-context";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import {
@@ -21,6 +20,9 @@ import { handleUpload } from "../../util/document-upload.utility";
 import CameraSelectJob from "../camera-select-job/camera-select-job.component";
 import UploadDeleteSwitch from "../upload-delete-switch/upload-delete-switch.component";
 import UploadProgress from "../upload-progress/upload-progress.component";
+import plimit from "p-limit";
+
+const limit = plimit(2);
 
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
@@ -38,6 +40,7 @@ export function ImageBrowserScreen({
 }) {
   const { t } = useTranslation();
   const [uploads, setUploads] = useState({});
+
   function handleOnProgress(uri, percent) {
     setUploads((prevUploads) => ({ ...prevUploads, [uri]: { percent } }));
   }
@@ -47,13 +50,15 @@ export function ImageBrowserScreen({
     setTick((tick) => tick + 1);
   }, []);
   async function handleOnSuccess(uri, id) {
-    console.log("onSucces!", uri);
-
+    console.log("Succesful upload!", uri);
     if (deleteAfterUpload) {
-      const result = await MediaLibrary.deleteAssetsAsync([id]);
-      console.log("result :>> ", result);
+      try {
+        const result = await MediaLibrary.deleteAssetsAsync([id]);
+        console.log("Delete result :>> ", result);
+      } catch (error) {
+        console.log("Unable to delete picture.", error);
+      }
     }
-    console.log("Omitting", uri);
     setUploads((prevUploads) => _.omit(prevUploads, uri));
   }
 
@@ -61,21 +66,32 @@ export function ImageBrowserScreen({
     console.log("Assets :>> ", data);
     const actions = [];
     data.forEach(function (p) {
-      const uri = p.uri.split("/").pop();
+      let filename;
+      //Appears to work for android.
+      //iOS provides the filename, android doe snot.
+      filename = p.filename || p.uri.split("/").pop();
+
+      //File name for ios
+
       actions.push(
-        handleUpload(
-          {
-            uri: p.uri,
-            onError: handleOnError,
-            onProgress: ({ percent }) => handleOnProgress(uri, percent),
-            onSuccess: () => handleOnSuccess(uri, p.id),
-          },
-          {
-            bodyshop: bodyshop,
-            jobId: selectedCameraJobId !== "temp" ? selectedCameraJobId : null,
-            uploaded_by: currentUser.email,
-            photo: p,
-          }
+        limit(
+          handleUpload(
+            {
+              //iOS provides the file name. Android does not.
+              uri: p.uri,
+              filename,
+              onError: handleOnError,
+              onProgress: ({ percent }) => handleOnProgress(filename, percent),
+              onSuccess: () => handleOnSuccess(filename, p.id),
+            },
+            {
+              bodyshop: bodyshop,
+              jobId:
+                selectedCameraJobId !== "temp" ? selectedCameraJobId : null,
+              uploaded_by: currentUser.email,
+              photo: p,
+            }
+          )
         )
       );
     });
@@ -85,93 +101,91 @@ export function ImageBrowserScreen({
   };
 
   return (
-    <SafeAreaView style={[styles.flex, styles.container]}>
-      <View style={[styles.flex, styles.container]}>
-        <CameraSelectJob />
-        <UploadDeleteSwitch />
-        {!selectedCameraJobId && (
-          <View
-            style={{
-              flex: 1,
-              justifyContent: "center",
-              alignItems: "center",
-            }}
-          >
-            <H3>{t("mediabrowser.labels.selectjobassetselector")}</H3>
-          </View>
-        )}
-        {selectedCameraJobId && (
-          <AssetsSelector
-            style={{ flex: 1 }}
-            key={tick}
-            options={{
-              // manipulate: {
-              //   //width: 512,
-              //   compress: 0.7,
-              //   base64: false,
-              //   saveTo: "jpeg",
-              // },
-              assetsType: ["photo", "video"],
-              //maxSelections: 5,
-              margin: 3,
-              portraitCols: 4,
-              landscapeCols: 5,
-              widgetWidth: 100,
-              widgetBgColor: "white",
-              selectedBgColor: "#adadad",
-              spinnerColor: "#c8c8c8",
-              videoIcon: {
-                Component: Ionicons,
-                iconName: "ios-videocam",
-                color: "white",
-                size: 20,
-              },
-              selectedIcon: {
-                Component: Ionicons,
-                iconName: "ios-checkmark-circle-outline",
-                color: "white",
-                bg: "rgba(35,35,35, 0.75)",
-                size: 32,
-              },
-              defaultTopNavigator: {
-                continueText: t("mediabrowser.actions.upload"),
-                goBackText: t("mediabrowser.actions.refresh"),
-                buttonStyle: styles.buttonStyle,
-                textStyle: styles.textStyle,
-                backFunction: () => {
-                  forceRerender();
-                },
-                doneFunction: onDone,
+    <View style={[styles.flex, styles.container]}>
+      <CameraSelectJob />
+      <UploadDeleteSwitch />
+      {!selectedCameraJobId && (
+        <View
+          style={{
+            flex: 1,
+            justifyContent: "center",
+            alignItems: "center",
+          }}
+        >
+          <H3>{t("mediabrowser.labels.selectjobassetselector")}</H3>
+        </View>
+      )}
+      {selectedCameraJobId && (
+        <AssetsSelector
+          style={{ flex: 1 }}
+          key={tick}
+          options={{
+            // manipulate: {
+            //   //width: 512,
+            //   compress: 0.7,
+            //   base64: false,
+            //   saveTo: "jpeg",
+            // },
+            assetsType: ["photo", "video"],
+            //maxSelections: 5,
+            margin: 3,
+            portraitCols: 4,
+            landscapeCols: 5,
+            widgetWidth: 100,
+            widgetBgColor: "white",
+            selectedBgColor: "#adadad",
+            spinnerColor: "#c8c8c8",
+            videoIcon: {
+              Component: Ionicons,
+              iconName: "ios-videocam",
+              color: "white",
+              size: 20,
+            },
+            selectedIcon: {
+              Component: Ionicons,
+              iconName: "ios-checkmark-circle-outline",
+              color: "white",
+              bg: "rgba(35,35,35, 0.75)",
+              size: 32,
+            },
+            defaultTopNavigator: {
+              continueText: t("mediabrowser.actions.upload"),
+              goBackText: t("mediabrowser.actions.refresh"),
+              buttonStyle: styles.buttonStyle,
+              textStyle: styles.textStyle,
+              backFunction: () => {
+                forceRerender();
               },
+              doneFunction: onDone,
+            },
 
-              noAssets: {
-                Component: function NoAsset() {
-                  return (
-                    <View
-                      style={{
-                        display: "flex",
-                        flex: 1,
-                        height: 200,
-                        marginHorizontal: 20,
+            noAssets: {
+              Component: function NoAsset() {
+                return (
+                  <View
+                    style={{
+                      display: "flex",
+                      flex: 1,
+                      height: 200,
+                      marginHorizontal: 20,
 
-                        alignItems: "center",
-                        justifyContent: "center",
-                      }}
-                    >
-                      <Ionicons name="ios-photos" size={72} />
-                      <Text style={{ textAlign: "center", marginTop: 10 }}>
-                        {t("mediabrowser.labels.nomedia")}
-                      </Text>
-                    </View>
-                  );
-                },
+                      alignItems: "center",
+                      justifyContent: "center",
+                    }}
+                  >
+                    <Ionicons name="ios-photos" size={72} />
+                    <Text style={{ textAlign: "center", marginTop: 10 }}>
+                      {t("mediabrowser.labels.nomedia")}
+                    </Text>
+                  </View>
+                );
               },
-            }}
-          />
-        )}
-        <UploadProgress uploads={uploads} />
-      </View>
-    </SafeAreaView>
+            },
+          }}
+        />
+      )}
+      <UploadProgress uploads={uploads} setUploads={setUploads} />
+    </View>
   );
 }
 

components/screen-splash/screen-splash.component.jsx

@@ -27,8 +27,5 @@ const localStyles = StyleSheet.create({
   middleAlign: {
     alignItems: "center",
   },
-  content: {
-    paddingBottom: 150,
-  },
   logo: { width: 100, height: 100, margin: 20 },
 });

components/upload-progress/upload-progress.component.jsx

@@ -1,9 +1,15 @@
+import { Ionicons } from "@expo/vector-icons";
 import React from "react";
-import { ScrollView, StyleSheet, Text, View } from "react-native";
+import {
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from "react-native";
 import * as Progress from "react-native-progress";
-
-export default function UploadProgress({ uploads }) {
-  console.log("uploads :>> ", uploads);
+import _ from "lodash";
+export default function UploadProgress({ uploads, setUploads }) {
   return (
     <View style={styles.container}>
       <ScrollView>
@@ -19,6 +25,13 @@ export default function UploadProgress({ uploads }) {
                 color={uploads[key].percent === 1 ? "green" : "blue"}
               />
             </View>
+            <TouchableOpacity
+              onPress={() =>
+                setUploads((prevUploads) => _.omit(prevUploads, key))
+              }
+            >
+              <Ionicons name="ios-close" size={32} />
+            </TouchableOpacity>
           </View>
         ))}
       </ScrollView>
@@ -35,12 +48,14 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     marginBottom: 12,
+    marginLeft: 12,
+    marginRight: 12,
   },
   progressText: {
     flex: 1,
   },
   progressBarContainer: {
-    flex: 1,
+    flex: 3,
     marginLeft: 12,
     marginRight: 12,
   },