Uploading file with corruption.

components/jobs-list/jobs-list.jsx

@@ -10,6 +10,7 @@ import { createStructuredSelector } from "reselect";
 import { QUERY_ALL_ACTIVE_JOBS } from "../../graphql/jobs.queries";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 //import ErrorDisplay from "../error-display/error-display.component";
+import UploadProgress from "../upload-progress/upload-progress";
 import JobListItem from "./job-list-item";
 
 const mapStateToProps = createStructuredSelector({
@@ -67,6 +68,7 @@ export function JobListComponent({ bodyshop }) {
 
   return (
     <SafeAreaView style={{ flex: 1 }}>
+      <UploadProgress />
       <FlatList
         refreshControl={
           <RefreshControl refreshing={loading} onRefresh={onRefresh} />

components/upload-progress/upload-progress.jsx

@@ -0,0 +1,120 @@
+import { StyleSheet, Text, View } from "react-native";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { selectPhotos } from "../../redux/photos/photos.selectors";
+
+const mapStateToProps = createStructuredSelector({
+  photos: selectPhotos,
+});
+
+export default connect(mapStateToProps, null)(UploadProgress);
+
+export function UploadProgress({ photos }) {
+  if (photos?.length === 0) return null;
+  return (
+    <View style={styles.modalContainer}>
+      <Text>Upload Progress.</Text>
+      <Text>{JSON.stringify(photos)}</Text>
+      {/* 
+        <View style={styles.modal}>
+          {Object.keys(progress.files).map((key) => (
+            <View key={key} style={styles.progressItem}>
+              <Text style={styles.progressText}>
+                {progress.files[key].filename} 
+              </Text>
+              <View style={styles.progressBarContainer}>
+                <ProgressBar
+                  progress={progress.files[key].percent}
+                  style={styles.progress}
+                  color={progress.files[key].percent === 1 ? "green" : "blue"}
+                />
+                <View
+                  style={{
+                    display: "flex",
+                    flexDirection: "row",
+                    alignItems: "center",
+                  }}
+                >
+                  <Text>{`${formatBytes(
+                    progress.files[key].loaded /
+                      (((progress.files[key].uploadEnd || new Date()) -
+                        progress.files[key].uploadStart) /
+                        1000)
+                  )}/sec`}</Text>
+                  {progress.files[key].percent === 1 && (
+                    <>
+                      <ActivityIndicator style={{ marginLeft: 12 }} />
+                      <Text style={{ marginLeft: 4 }}>Processing...</Text>
+                    </>
+                  )}
+                </View>
+              </View>
+            </View>
+          ))}
+          <View style={styles.centeredView}>
+            {progress.statusText ? (
+              <>
+                <ActivityIndicator style={{ marginLeft: 12 }} />
+                <Text style={{ marginLeft: 4 }}>{progress.statusText}</Text>
+                <Divider />
+              </>
+            ) : (
+              <>
+                <Text>{`${progress.totalFilesCompleted} of ${progress.totalFiles} uploaded.`}</Text>
+                <Text>{`${formatBytes(progress.totalUploaded)} of ${formatBytes(
+                  progress.totalToUpload
+                )} uploaded.`}</Text>
+              </>
+            )} 
+            
+          </View>
+        </View>
+            */}
+    </View>
+  );
+}
+const styles = StyleSheet.create({
+  modalContainer: {
+    display: "flex",
+    flex: 1,
+    justifyContent: "center",
+  },
+  modal: {
+    //flex: 1,
+    display: "flex",
+    marginLeft: 20,
+    marginRight: 20,
+    backgroundColor: "white",
+    borderRadius: 20,
+    padding: 18,
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+    elevation: 5,
+  },
+  centeredView: {
+    justifyContent: "center",
+    alignItems: "center",
+    marginTop: 22,
+  },
+  progressItem: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    marginBottom: 12,
+    marginLeft: 12,
+    marginRight: 12,
+  },
+  progressText: {
+    flex: 1,
+  },
+  progressBarContainer: {
+    flex: 3,
+    marginLeft: 12,
+    marginRight: 12,
+  },
+});