workin upload

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 });
         }

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;
 };