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

20
app/jobs/_layout.tsx
View File

@@ -14,16 +14,16 @@ function JobsStack() {
<Stack.Screen
name="index"
options={{
title: "Search",
headerSearchBarOptions: {
placement: "automatic",
placeholder: "Search",
onChangeText: (event) => {
router.setParams({
search: event?.nativeEvent?.text,
});
},
},
headerShown: false,
// headerSearchBarOptions: {
// placement: "automatic",
// placeholder: "Search",
// onChangeText: (event) => {
// router.setParams({
// search: event?.nativeEvent?.text,
// });
// },
// },
}}
/>
<Stack.Screen

15
app/settings.tsx
View File

@@ -1,9 +1,22 @@
import SignOutButton from "@/components-old/sign-out-button/sign-out-button.component";
import { selectBodyshop } from "@/redux/user/user.selectors";
import { StyleSheet, Text, View } from "react-native";
export default function Tab() {
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";
const mapStateToProps = createStructuredSelector({
bodyshop: selectBodyshop,
});
export default connect(mapStateToProps, null)(Tab);
function Tab({ bodyshop }) {
return (
<View style={styles.container}>
<Text>Tab [Home|Settings]</Text>
<Text>
Using Local Media Server? {bodyshop?.uselocalmediaserver ? "Yes" : "No"}
</Text>
<SignOutButton />
</View>
);

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

@@ -1,32 +1,37 @@
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) => (
{Object.keys(photoUploadProgress).map((key) => (
<View key={key} style={styles.progressItem}>
<Text style={styles.progressText}>
{progress.files[key].filename}
{photoUploadProgress[key].fileName}
</Text>
<View style={styles.progressBarContainer}>
<ProgressBar
progress={progress.files[key].percent}
progress={photoUploadProgress[key].progress}
style={styles.progress}
color={progress.files[key].percent === 1 ? "green" : "blue"}
color={
photoUploadProgress[key].progress === 1 ? "green" : "blue"
}
/>
<View
style={{
@@ -36,12 +41,12 @@ export function UploadProgress({ photos }) {
}}
>
<Text>{`${formatBytes(
progress.files[key].loaded /
(((progress.files[key].uploadEnd || new Date()) -
progress.files[key].uploadStart) /
photoUploadProgress[key].loaded /
(((photoUploadProgress[key].uploadEnd || new Date()) -
photoUploadProgress[key].uploadStart) /
1000)
)}/sec`}</Text>
{progress.files[key].percent === 1 && (
{photoUploadProgress[key].percent === 1 && (
<>
<ActivityIndicator style={{ marginLeft: 12 }} />
<Text style={{ marginLeft: 4 }}>Processing...</Text>
@@ -52,24 +57,24 @@ export function UploadProgress({ photos }) {
</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>
</>
)}
{
// 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>
);
}

11
redux/photos/photos.actions.js
View File

@@ -24,3 +24,14 @@ export const mediaUploadSuccessOne = (photo) => ({
type: PhotosActionTypes.MEDIA_UPLOAD_SUCCESS_ONE,
payload: photo,
});
export const mediaUploadProgressBulk = (info) => ({
type: PhotosActionTypes.MEDIA_UPLOAD_PROGRESS_UPDATE_BULK,
payload: info,
});
export const mediaUploadCompleted = (photo) => ({
type: PhotosActionTypes.MEDIA_UPLOAD_COMPLETED
//payload: photo,
});

16
redux/photos/photos.reducer.js
View File

@@ -2,7 +2,7 @@ import PhotosActionTypes from "./photos.types";
const INITIAL_STATE = {
photos: [],
uploadInProgress: false,
uploadInProgress: true,
uploadError: null,
jobid: null,
progress: {}
@@ -35,7 +35,19 @@ const photosReducer = (state = INITIAL_STATE, action) => {
...state,
progress: { ...state.progress, [action.payload.assetId]: { ...state.progress[action.payload.assetId], progress: 100, status: 'completed' } }
};
case PhotosActionTypes.MEDIA_UPLOAD_PROGRESS_UPDATE_BULK:
return {
...state,
progress: { Upload: action.payload }
};
case PhotosActionTypes.MEDIA_UPLOAD_COMPLETED:
return {
...state,
uploadInProgress: false,
uploadError: null,
photos: [],
progress: {}
};
default:
return state;
}

97
redux/photos/photos.sagas.js
View File

@@ -10,7 +10,9 @@ import { axiosAuthInterceptorId } from "../../util/CleanAxios";
import { fetchImageFromUri, replaceAccents } from '../../util/uploadUtils';
import { selectBodyshop, selectCurrentUser } from "../user/user.selectors";
import {
mediaUploadCompleted,
mediaUploadFailure,
mediaUploadProgressBulk,
mediaUploadProgressOne,
mediaUploadStart,
mediaUploadSuccessOne
@@ -67,6 +69,10 @@ export function* mediaUploadStartAction({ payload: { photos, jobid } }) {
const bodyshop = yield select(selectBodyshop);
if (bodyshop.uselocalmediaserver) {
yield call(uploadToLocalMediaServer, photos, bodyshop, jobid);
}
else {
// Process photos in batches to avoid overwhelming the system
const batchSize = 3; // Upload 3 photos concurrently
const batches = [];
@@ -84,7 +90,8 @@ export function* mediaUploadStartAction({ payload: { photos, jobid } }) {
// Small delay between batches to prevent overwhelming the server
yield delay(100);
}
//yield put(mediaUploadSuccess(photo));
}
yield put(mediaUploadCompleted());
} catch (error) {
console.log("Saga Error: upload start", error, error.stack);
@@ -102,12 +109,7 @@ function* uploadSinglePhoto(photo, bodyshop, index, jobid) {
const key = `${bodyshop.id}/${jobid}/${replaceAccents(
photoBlob.data.name
).replace(/[^A-Z0-9]+/gi, "_")}-${new Date().getTime()}.${extension}`
if (bodyshop.uselocalmediaserver) {
yield call(uploadToLocalMediaServer, photo, photoBlob, extension, key, bodyshop, jobid);
} else {
yield call(uploadToImageProxy, photo, photoBlob, extension, key, bodyshop, jobid);
}
yield put(mediaUploadSuccessOne(photo));
@@ -117,40 +119,56 @@ function* uploadSinglePhoto(photo, bodyshop, index, jobid) {
}
}
function* uploadToLocalMediaServer(photo, key) {
function* uploadToLocalMediaServer(photos, bodyshop, jobid) {
try {
// yield put(mediaUploadProgress({ photoId, status: 'uploading', progress: 25 }));
const options = {
headers: {
"Content-Type": "multipart/form-data",
ims_token: bodyshop.localmediatoken,
},
onUploadProgress: (e) => {
put(mediaUploadProgressBulk({ progress: e.loaded / e.total, loaded: e.loaded }));
},
};
// const formData = new FormData();
// formData.append('file', {
// uri: photo.uri,
// type: photo.type || 'image/jpeg',
// name: photo.fileName || `photo_${Date.now()}.jpg`,
const formData = new FormData();
formData.append("jobid", jobid);
for (const file of photos) {
formData.append("file", {
uri: file.uri,
type: file.mimeType,
name: file.fileName,
});
}
formData.append("skip_thumbnail", true);
try {
const imexMediaServerResponse = yield call(axios.post,
`${bodyshop.localmediaserverhttp}/jobs/upload`,
formData,
options
);
if (imexMediaServerResponse.status !== 200) {
console.log("Error uploading documents:", JSON.stringify(imexMediaServerResponse, null, 2));
} else {
// onSuccess({
// duration: imexMediaServerResponse.headers["x-response-time"],
// });
// yield put(mediaUploadProgress({ photoId, status: 'uploading', progress: 50 }));
// const response = yield call(fetch, 'YOUR_LOCAL_MEDIA_SERVER_ENDPOINT', {
// method: 'POST',
// body: formData,
// headers: {
// 'Content-Type': 'multipart/form-data',
// },
// });
// yield put(mediaUploadProgress({ photoId, status: 'uploading', progress: 75 }));
// if (!response.ok) {
// throw new Error(`Upload failed: ${response.status}`);
// }
// const result = yield call([response, 'json']);
// yield put(mediaUploadProgress({ photoId, status: 'completed', progress: 100 }));
// return result;
}
} catch (error) {
throw new Error(`Local media server upload failed: ${error.message}`);
console.log("Error uploading documents:", error.message, JSON.stringify(error, null, 2));
}
} catch (error) {
console.log("Uncaught error", error);
}
}
@@ -182,10 +200,8 @@ function* uploadToImageProxy(photo, photoBlob, extension, key, bodyshop, jobid)
xhr.setRequestHeader("Content-Type", photoBlob.type);
xhr.upload.onprogress = (e) => {
console.log("*** ~ awaitnewPromise ~ event:", e);
if (e.lengthComputable) {
console.log(`Upload progress for ${photo.uri}:`, e.loaded / e.total);
put(mediaUploadProgressOne({ ...photo, progress: e.loaded / e.total }));
put(mediaUploadProgressOne({ ...photo, progress: e.loaded / e.total, loaded: e.loaded }));
}
};
@@ -217,7 +233,7 @@ function* uploadToImageProxy(photo, photoBlob, extension, key, bodyshop, jobid)
const [hours, minutes, seconds] = time ? time.split(':') : [];
const pictureMoment = moment(`${year}-${month}-${day}T${hours}:${minutes}:${seconds}`);
const documentInsert = yield call(client.mutate, ({
yield call(client.mutate, ({
mutation: INSERT_NEW_DOCUMENT,
variables: {
docInput: [
@@ -236,7 +252,6 @@ function* uploadToImageProxy(photo, photoBlob, extension, key, bodyshop, jobid)
],
},
}));
console.log("*** ~ uploadToImageProxy ~ documentInsert:", JSON.stringify(documentInsert, null, 2));
}
} catch (error) {

5
redux/photos/photos.selectors.js
View File

@@ -14,3 +14,8 @@ export const selectUploadError = createSelector(
[selectPhotosState],
(photos) => photos.uploadError
);
export const selectUploadProgress = createSelector(
[selectPhotosState],
(photos) => photos.progress
);

2
redux/photos/photos.types.js
View File

@@ -4,5 +4,7 @@ const PhotosActionTypes = {
MEDIA_UPLOAD_SUCCESS_ONE: "MEDIA_UPLOAD_SUCCESS_ONE",
MEDIA_UPLOAD_FAILURE: "MEDIA_UPLOAD_FAILURE",
MEDIA_UPLOAD_PROGRESS_UPDATE_ONE: "MEDIA_UPLOAD_PROGRESS_UPDATE_ONE",
MEDIA_UPLOAD_PROGRESS_UPDATE_BULK: "MEDIA_UPLOAD_PROGRESS_UPDATE_BULK",
MEDIA_UPLOAD_COMPLETED: "MEDIA_UPLOAD_COMPLETED",
};
export default PhotosActionTypes;