From 9bab7080e60807195024ebf1aa9af4720d08f1b2 Mon Sep 17 00:00:00 2001 From: Patrick Fic Date: Fri, 10 Oct 2025 13:33:26 -0700 Subject: [PATCH] workin upload --- redux/photos/photos.sagas.js | 17 +++++++++-------- util/uploadUtils.js | 5 +++++ 2 files changed, 14 insertions(+), 8 deletions(-) diff --git a/redux/photos/photos.sagas.js b/redux/photos/photos.sagas.js index ed76b57..b9f343e 100644 --- a/redux/photos/photos.sagas.js +++ b/redux/photos/photos.sagas.js @@ -5,7 +5,7 @@ import { END, eventChannel } from 'redux-saga'; import { all, call, delay, fork, put, select, take, takeEvery, takeLatest } from "redux-saga/effects"; import env from "../../env"; import { axiosAuthInterceptorId } from "../../util/CleanAxios"; -import { fetchImageFromUri, replaceAccents } from '../../util/uploadUtils'; +import { fetchArrayBufferFromUri, fetchImageFromUri, replaceAccents } from '../../util/uploadUtils'; import { selectBodyshop } from "../user/user.selectors"; import { mediaUploadComplete, @@ -93,7 +93,8 @@ function* uploadSinglePhoto(photo, bodyshop, index, jobid) { yield put(mediaUploadProgressOne({ ...photo, status: 'starting', progress: 0 })); const photoBlob = yield fetchImageFromUri(photo.uri); //has a name, and type. - console.log("*** ~ uploadSinglePhoto ~ photoBlob.name.:", photoBlob.data.name); + const photoArrayBuffer = yield fetchArrayBufferFromUri(photo.uri); + const extension = photoBlob.data?.name?.split('.').pop(); const key = `${bodyshop.id}/${jobid}/${replaceAccents( @@ -101,9 +102,9 @@ function* uploadSinglePhoto(photo, bodyshop, index, jobid) { ).replace(/[^A-Z0-9]+/gi, "_")}-${new Date().getTime()}.${extension}` if (bodyshop.uselocalmediaserver) { - yield call(uploadToLocalMediaServer, photo, photoBlob, key, bodyshop, jobid); + yield call(uploadToLocalMediaServer, photo, photoBlob, photoArrayBuffer, key, bodyshop, jobid); } else { - yield call(uploadToImageProxy, photo, photoBlob, key, bodyshop, jobid); + yield call(uploadToImageProxy, photo, photoBlob, photoArrayBuffer, key, bodyshop, jobid); } // yield put(mediaUploadSuccess({ photoId, photo })); @@ -151,7 +152,7 @@ function* uploadToLocalMediaServer(photo, key) { } } -function* uploadToImageProxy(photo, photoBlob, key, bodyshop, jobid) { +function* uploadToImageProxy(photo, photoBlob, photoArrayBuffer, key, bodyshop, jobid) { try { yield put(mediaUploadProgressOne({ ...photo, status: 'uploading', })); //Get the signed url allowing us to PUT to S3. @@ -170,13 +171,11 @@ function* uploadToImageProxy(photo, photoBlob, key, bodyshop, jobid) { } const { presignedUrl: preSignedUploadUrlToS3, key: s3Key } = signedURLResponse.data.signedUrls[0]; - console.log("*** ~ uploadToImageProxy ~ s3Key:", s3Key); - console.log("*** ~ uploadToImageProxy ~ presignedUrl:", preSignedUploadUrlToS3); // Create an eventChannel to bridge imperative upload progress events into the saga world const uploadChannel = yield call(createAxiosUploadChannel, { url: preSignedUploadUrlToS3, - data: photoBlob, + data: photoArrayBuffer, method: 'put', headers: { 'Content-Type': photoBlob.type, @@ -192,6 +191,7 @@ function* uploadToImageProxy(photo, photoBlob, key, bodyshop, jobid) { } else if (error) { throw error; } else if (success) { + yield put(mediaUploadProgressOne({ ...photo, progress: 100, status: 'completed' })); break; } } @@ -217,6 +217,7 @@ function createAxiosUploadChannel({ url, data, method = 'put', headers }) { signal: controller.signal, // NOTE: cannot yield here, so we emit events and handle them in saga loop onUploadProgress: (e) => { + console.log("Upload progress event:", e); if (e && e.total) { emitter({ progress: e.loaded / e.total }); } diff --git a/util/uploadUtils.js b/util/uploadUtils.js index 363d0bd..8319acd 100644 --- a/util/uploadUtils.js +++ b/util/uploadUtils.js @@ -48,4 +48,9 @@ export async function fetchImageFromUri(uri) { const response = await fetch(uri); const blob = await response.blob(); return blob; +}; +export async function fetchArrayBufferFromUri(uri) { + const response = await fetch(uri); + const arrayBuffer = await response.arrayBuffer(); + return arrayBuffer; }; \ No newline at end of file