Major improvements to upload progress.

components/upload-progress/upload-progress.jsx

@@ -1,10 +1,17 @@
 import { useTheme } from "@/hooks";
-import { clearUploadError } from "@/redux/photos/photos.actions";
+import { cancelUploads, clearUploadError } from "@/redux/photos/photos.actions";
 import { formatBytes } from "@/util/uploadUtils";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { ScrollView, StyleSheet, View } from "react-native";
-import { Divider, Modal, Portal, ProgressBar, Text } from "react-native-paper";
+import {
+  Button,
+  Divider,
+  Modal,
+  Portal,
+  ProgressBar,
+  Text,
+} from "react-native-paper";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import {
@@ -20,6 +27,7 @@ const mapStateToProps = createStructuredSelector({
 });
 const mapDispatchToProps = (dispatch) => ({
   clearError: () => dispatch(clearUploadError()),
+  cancelUploads: () => dispatch(cancelUploads()),
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(UploadProgress);
@@ -29,6 +37,7 @@ export function UploadProgress({
   photoUploadProgress,
   uploadError,
   clearError,
+  cancelUploads,
 }) {
   const { t } = useTranslation();
   const theme = useTheme();
@@ -42,6 +51,10 @@ export function UploadProgress({
     return completed / total;
   }, [photoUploadProgress]);
 
+  const handleCancelUploads = () => {
+    cancelUploads();
+  };
+
   return (
     <Portal>
       <Modal
@@ -78,10 +91,10 @@ export function UploadProgress({
               </Text>
               <View style={styles.progressBarContainer}>
                 <ProgressBar
-                  progress={(photoUploadProgress[key].progress || 0) / 100}
+                  progress={photoUploadProgress[key].progress || 0}
                   style={styles.progress}
                   color={
-                    photoUploadProgress[key].progress === 100 ? "green" : "blue"
+                    photoUploadProgress[key].progress === 1 ? "green" : "blue"
                   }
                 />
                 <View style={styles.speedRow}>
@@ -95,6 +108,9 @@ export function UploadProgress({
               </View>
             </View>
           ))}
+          <Button onPress={handleCancelUploads}>
+            {t("general.actions.cancel")}
+          </Button>
         </ScrollView>
       </Modal>
     </Portal>