1.3.6-2 Test Build - Individual file uploads & cloudariny fixes.

app.json

@@ -4,19 +4,19 @@
     "slug": "imexmobile",
     "version": "1.3.6",
     "extra": {
-      "expover": "1"
+      "expover": "2"
     },
     "orientation": "default",
     "icon": "./assets/logo192noa.png",
     "ios": {
       "supportsTablet": true,
       "bundleIdentifier": "com.imex.imexmobile",
-      "buildNumber": "1",
+      "buildNumber": "2",
       "googleServicesFile": "./GoogleService-Info.plist"
     },
     "android": {
       "package": "com.imex.imexmobile",
-      "versionCode": 1100006,
+      "versionCode": 1100007,
       "googleServicesFile": "./google-services.json"
     },
     "splash": {

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

@@ -70,7 +70,8 @@ export function UploadProgress({
     Toast.show({
       type: "success",
       text1: `${duration} - Upload completed for ${asset.filename}.`,
-      text2: duration,
+      //
+      //   text2: duration,
     });
 
     logImEXEvent("imexmobile_successful_upload");
@@ -82,6 +83,7 @@ export function UploadProgress({
         ...progress.files,
         [id]: {
           ...progress.files[id],
+          percent: 1,
           action: t("mediabrowser.labels.converting"),
         },
       },
@@ -92,7 +94,7 @@ export function UploadProgress({
   function handleOnProgress(uri, percent, loaded) {
     setProgress((progress) => ({
       ...progress,
-      speed: loaded - progress.files[uri].loaded,
+      // speed: loaded - progress.files[uri].loaded,
       action:
         percent === 1
           ? t("mediabrowser.labels.converting")
@@ -102,6 +104,7 @@ export function UploadProgress({
         [uri]: {
           ...progress.files[uri],
           percent,
+          speed: loaded - progress.files[uri].loaded,
           action:
             percent === 1
               ? t("mediabrowser.labels.converting")
@@ -117,6 +120,7 @@ export function UploadProgress({
       type: "error",
       text1: "Unable to upload documents.",
       text2: (error && error.message) || JSON.stringify(error),
+      autoHide: false,
     });
     setProgress((progress) => ({
       ...progress,
@@ -236,18 +240,11 @@ export function UploadProgress({
       visible={progress.uploadInProgress}
       animationType="slide"
       transparent={true}
-      onRequestClose={() => {
+      onRequestClose={() => {}}
-        Alert.alert("Modal has been closed.");
-      }}
     >
       <View style={styles.modal}>
         {progress.loading && <ActivityIndicator />}
-        {progress.action && (
+
-          <Text>{`${progress.action} ${
-            (progress.speed !== 0 || !progress.speed) &&
-            `- ${formatBytes(progress.speed)}/sec`
-          }`}</Text>
-        )}
         <ScrollView contentContainerStyle={styles.centeredView}>
           {Object.keys(progress.files).map((key) => (
             <View key={progress.files[key].id} style={styles.progressItem}>
@@ -260,6 +257,11 @@ export function UploadProgress({
                   style={styles.progress}
                   color={progress.files[key].percent === 1 ? "green" : "blue"}
                 />
+                {progress.files[key].speed !== 0 &&
+                progress.files[key].speed &&
+                !isNaN(progress.files[key].speed) ? (
+                  <Text>{`${formatBytes(progress.files[key].speed)}/sec`}</Text>
+                ) : null}
               </View>
             </View>
           ))}
@@ -271,7 +273,7 @@ export function UploadProgress({
 const styles = StyleSheet.create({
   modal: {
     flex: 1,
-    marginTop: 50,
+    marginTop: 80,
     marginBottom: 60,
     marginLeft: 20,
     marginRight: 20,

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

@@ -75,6 +75,7 @@ export function UploadProgress({
         ...progress.files,
         [id]: {
           ...progress.files[id],
+          percent: 1,
           action: t("mediabrowser.labels.converting"),
         },
       },
@@ -95,6 +96,7 @@ export function UploadProgress({
         [uri]: {
           ...progress.files[uri],
           percent,
+          speed: loaded - progress.files[uri].loaded,
           action:
             percent === 1
               ? t("mediabrowser.labels.converting")
@@ -248,12 +250,7 @@ export function UploadProgress({
     >
       <View style={styles.modal}>
         {progress.loading && <ActivityIndicator />}
-        {progress.action && (
+
-          <Text>{`${progress.action} ${
-            (progress.speed !== 0 || !progress.speed) &&
-            `- ${formatBytes(progress.speed)}/sec`
-          }`}</Text>
-        )}
         <ScrollView contentContainerStyle={styles.centeredView}>
           {Object.keys(progress.files).map((key) => (
             <View key={progress.files[key].id} style={styles.progressItem}>
@@ -266,6 +263,11 @@ export function UploadProgress({
                   style={styles.progress}
                   color={progress.files[key].percent === 1 ? "green" : "blue"}
                 />
+                {progress.files[key].speed !== 0 &&
+                progress.files[key].speed &&
+                !isNaN(progress.files[key].speed) ? (
+                  <Text>{`${formatBytes(progress.files[key].speed)}/sec`}</Text>
+                ) : null}
               </View>
             </View>
           ))}

util/document-upload.utility.js

@@ -5,6 +5,7 @@ import { INSERT_NEW_DOCUMENT } from "../graphql/documents.queries";
 import { axiosAuthInterceptorId } from "./CleanAxios";
 import * as MediaLibrary from "expo-media-library";
 import { gql } from "@apollo/client";
+import mime from "mime";
 
 //Context: currentUserEmail, bodyshop, jobid, invoiceid
 
@@ -17,9 +18,9 @@ export const handleUpload = async (ev, context) => {
   const { bodyshop, jobId } = context;
 
   const imageData = await MediaLibrary.getAssetInfoAsync(mediaId);
-  const newFile = await (await fetch(imageData.localUri)).blob();
+  // const newFile = await (await fetch(imageData.localUri)).blob();
-  let extension = imageData.localUri.split(".").pop();
+  let extension = imageData.filename.split(".").pop();
-  let key = `${bodyshop.id}/${jobId}/${(filename || newFile.data.name).replace(
+  let key = `${bodyshop.id}/${jobId}/${filename.replace(
     /\.[^/.]+$/,
     ""
   )}-${new Date().getTime()}`;
@@ -29,8 +30,8 @@ export const handleUpload = async (ev, context) => {
     mediaId,
     imageData,
     extension,
-    newFile.type,
+    mime.getType(imageData.uri),
-    newFile,
+    //newFile,
     onError,
     onSuccess,
     onProgress,
@@ -45,7 +46,7 @@ export const uploadToCloudinary = async (
   imageData,
   extension,
   fileType,
-  file,
+  //file,
   onError,
   onSuccess,
   onProgress,
@@ -93,7 +94,10 @@ export const uploadToCloudinary = async (
 
   var signature = signedURLResponse.data;
   var options = {
-    headers: { "X-Requested-With": "XMLHttpRequest" },
+    headers: {
+      "X-Requested-With": "XMLHttpRequest",
+      "Content-Type": "multipart/form-data",
+    },
     onUploadProgress: (e) => {
       if (onProgress)
         onProgress({ percent: e.loaded / e.total, loaded: e.loaded });
@@ -104,7 +108,7 @@ export const uploadToCloudinary = async (
   formData.append("file", {
     uri: imageData.localUri,
     type: fileType,
-    name: file.data.name,
+    name: imageData.filename,
   });
   formData.append("upload_preset", upload_preset);
   formData.append("api_key", env.REACT_APP_CLOUDINARY_API_KEY);
@@ -178,7 +182,7 @@ export const uploadToCloudinary = async (
           type: fileType,
           extension: extension,
           bodyshopid: bodyshop.id,
-          size: cloudinaryUploadResponse.data.bytes || file.size,
+          size: cloudinaryUploadResponse.data.bytes, //|| file.size,
           ...(imageData.creationTime
             ? { takenat: new Date(imageData.creationTime) }
             : {}),

util/local-document-upload.utility.js

@@ -1,8 +1,8 @@
 import axios from "axios";
-import { store } from "../redux/store";
-import mime from "mime";
-import * as MediaLibrary from "expo-media-library";
 import * as ImageManipulator from "expo-image-manipulator";
+import * as MediaLibrary from "expo-media-library";
+import mime from "mime";
+import { store } from "../redux/store";
 
 axios.interceptors.request.use(
   function (config) {
@@ -40,7 +40,8 @@ export const handleLocalUpload = async ({ ev, context }) => {
         ims_token: bodyshop.localmediatoken,
       },
       onUploadProgress: (e) => {
-        if (onProgress) onProgress({ percent: (e.loaded / e.total) * 100 });
+        if (onProgress)
+          onProgress({ percent: (e.loaded / e.total) * 100, loaded: e.loaded });
       },
     };
 
@@ -54,39 +55,38 @@ export const handleLocalUpload = async ({ ev, context }) => {
     const imageData = await MediaLibrary.getAssetInfoAsync(mediaId);
     const mimeType = mime.getType(imageData.uri);
 
-    let thumb;
+    //let thumb;
     let fileData = {
       uri: null,
       type: null,
       name: null,
     };
-    if (mimeType === "image/heic") {
+    // if (mimeType === "image/heic") {
-      try {
+    //   try {
-        thumb = await ImageManipulator.manipulateAsync(imageData.uri, [], {
+    //     thumb = await ImageManipulator.manipulateAsync(imageData.uri, [], {
-          format: "jpeg",
+    //       format: "jpeg",
-          base64: true,
+    //       base64: true,
-          compress: 0.75,
+    //       compress: 0.75,
-        });
+    //     });
-        const name = imageData.filename.split(".");
+    //     const name = imageData.filename.split(".");
-        name.pop();
+    //     name.pop();
-        fileData = {
+    //     fileData = {
-          uri: thumb.uri,
+    //       uri: thumb.uri,
-          type: "image/jpeg",
+    //       type: "image/jpeg",
-          name: name.join("") + ".jpeg",
+    //       name: name.join("") + ".jpeg",
-        };
+    //     };
-      } catch (error) {
+    //   } catch (error) {
-        console.log(error);
+    //     console.log(error);
-        onError && onError(error.message);
+    //     onError && onError(error.message);
-      }
+    //   }
-    } else {
+    // } else {
-      fileData = {
+    fileData = {
-        uri: imageData.localUri || imageData.uri,
+      uri: imageData.localUri || imageData.uri,
-        type: mimeType,
+      type: mimeType,
-        name: filename,
+      name: filename,
-      };
+    };
-    }
+    //}
 
-    console.log("Got past reading the media.", formData);
     formData.append("file", fileData);
     formData.append("skip_thumbnail", true);
 
@@ -101,14 +101,8 @@ export const handleLocalUpload = async ({ ev, context }) => {
         }
       );
 
-      console.log(
-        "Response Time ",
-        imexMediaServerResponse.headers["x-response-time"]
-      );
-
       if (imexMediaServerResponse.status !== 200) {
         if (onError) {
-          console.log(imexMediaServerResponse);
           onError(
             imexMediaServerResponse.data || imexMediaServerResponse.statusText
           );
@@ -118,7 +112,6 @@ export const handleLocalUpload = async ({ ev, context }) => {
           onSuccess({
             duration: imexMediaServerResponse.headers["x-response-time"],
           });
-        console.log("Succesful upload", imageData.filename);
       }
 
       if (callbackAfterUpload) {