admin/imexmobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add basic progress & LMS upload.

Browse Source
This commit is contained in:
Patrick Fic
2025-10-14 14:13:30 -07:00
parent 7fe1ea65f2
commit 8d60d9776c
8 changed files with 184 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
components/upload-progress/upload-progress.jsx
View File

@@ -1,75 +1,80 @@
import { StyleSheet, Text, View } from "react-native";
import { formatBytes } from "@/util/uploadUtils";
import { ActivityIndicator, StyleSheet, Text, View } from "react-native";
import { ProgressBar } from "react-native-paper";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
import { selectPhotos } from "../../redux/photos/photos.selectors";
import {
selectPhotos,
selectUploadProgress,
} from "../../redux/photos/photos.selectors";
const mapStateToProps = createStructuredSelector({
photos: selectPhotos,
photoUploadProgress: selectUploadProgress,
});
export default connect(mapStateToProps, null)(UploadProgress);
export function UploadProgress({ photos }) {
export function UploadProgress({ photos, photoUploadProgress }) {
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 style={styles.modal}>
{Object.keys(photoUploadProgress).map((key) => (
<View key={key} style={styles.progressItem}>
<Text style={styles.progressText}>
{photoUploadProgress[key].fileName}
</Text>
<View style={styles.progressBarContainer}>
<ProgressBar
progress={photoUploadProgress[key].progress}
style={styles.progress}
color={
photoUploadProgress[key].progress === 1 ? "green" : "blue"
}
/>
<View
style={{
display: "flex",
flexDirection: "row",
alignItems: "center",
}}
>
<Text>{`${formatBytes(
photoUploadProgress[key].loaded /
(((photoUploadProgress[key].uploadEnd || new Date()) -
photoUploadProgress[key].uploadStart) /
1000)
)}/sec`}</Text>
{photoUploadProgress[key].percent === 1 && (
<>
<ActivityIndicator style={{ marginLeft: 12 }} />
<Text style={{ marginLeft: 4 }}>Processing...</Text>
</>
)}
</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 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>
);
}