IO-750 Resolve overwriting images on iOS Upload

2021-03-09 15:36:35 -08:00
parent 5ef9903a6d
commit b45ed8ad17
6 changed files with 143 additions and 116 deletions
--- a/components/screen-media-browser/screen-media-browser.component.jsx
+++ b/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) {
+      try {
        const result = await MediaLibrary.deleteAssetsAsync([id]);
-      console.log("result :>> ", result);
+        console.log("Delete result :>> ", result);
+      } catch (error) {
+        console.log("Unable to delete picture.", error);
+      }
    }
-    console.log("Omitting", uri);
    setUploads((prevUploads) => _.omit(prevUploads, uri));
  }

@@ -61,22 +66,33 @@ 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(
+        limit(
          handleUpload(
            {
+              //iOS provides the file name. Android does not.
              uri: p.uri,
+              filename,
              onError: handleOnError,
-            onProgress: ({ percent }) => handleOnProgress(uri, percent),
-            onSuccess: () => handleOnSuccess(uri, p.id),
+              onProgress: ({ percent }) => handleOnProgress(filename, percent),
+              onSuccess: () => handleOnSuccess(filename, p.id),
            },
            {
              bodyshop: bodyshop,
-            jobId: selectedCameraJobId !== "temp" ? selectedCameraJobId : null,
+              jobId:
+                selectedCameraJobId !== "temp" ? selectedCameraJobId : null,
              uploaded_by: currentUser.email,
              photo: p,
            }
          )
+        )
      );
    });
    await Promise.all(actions);
@@ -85,7 +101,6 @@ export function ImageBrowserScreen({
  };

  return (
-    <SafeAreaView style={[styles.flex, styles.container]}>
    <View style={[styles.flex, styles.container]}>
      <CameraSelectJob />
      <UploadDeleteSwitch />
@@ -169,9 +184,8 @@ export function ImageBrowserScreen({
          }}
        />
      )}
-        <UploadProgress uploads={uploads} />
+      <UploadProgress uploads={uploads} setUploads={setUploads} />
    </View>
-    </SafeAreaView>
  );
 }

--- a/components/screen-splash/screen-splash.component.jsx
+++ b/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 },
 });
--- a/components/upload-progress/upload-progress.component.jsx
+++ b/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,
  },
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
    "lodash": "^4.17.20",
    "luxon": "^1.25.0",
    "native-base": "^2.13.15",
+    "p-limit": "^3.1.0",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-i18next": "^11.8.2",
--- a/util/document-upload.utility.js
+++ b/util/document-upload.utility.js
@@ -10,13 +10,13 @@ var cleanAxios = axios.create();
 cleanAxios.interceptors.request.eject(axiosAuthInterceptorId);

 export const handleUpload = async (ev, context) => {
-  const { onError, onSuccess, onProgress } = ev;
+  const { uri, filename, onError, onSuccess, onProgress } = ev;
  const { bodyshop, jobId } = context;

-  const newFile = await (await fetch(ev.uri)).blob();
+  const newFile = await (await fetch(uri)).blob();
  let extension = ev.uri.split(".").pop();

-  let key = `${bodyshop.id}/${jobId}/${newFile.data.name.replace(
+  let key = `${bodyshop.id}/${jobId}/${(filename || newFile.data.name).replace(
    /\.[^/.]+$/,
    ""
  )}`;
@@ -123,7 +123,7 @@ export const uploadToCloudinary = async (
    );
    // console.log("Cloudinary Upload Response", cloudinaryUploadResponse.data);
  } catch (error) {
-    console.log("CLOUDINARY error", error, cloudinaryUploadResponse);
+    console.log("CLOUDINARY error", error.response, cloudinaryUploadResponse);
    return { success: false, error: error };
  }

--- a/yarn.lock
+++ b/yarn.lock
@@ -6918,7 +6918,7 @@ p-limit@^2.0.0, p-limit@^2.2.0:
  dependencies:
    p-try "^2.0.0"

-p-limit@^3.0.2:
+p-limit@^3.0.2, p-limit@^3.1.0:
  version "3.1.0"
  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-3.1.0.tgz#e1daccbe78d0d1388ca18c64fea38e3e57e3706b"
  integrity sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==