datasync-blob 1.1.24 → 1.1.26

package/dist/components/DsBlob.js

@@ -20,87 +20,131 @@ class DsBlob extends _react.Component {
     this.debugging = false;
   }
 
-  //-----------------------------------------------------------------------------------------------------------------------------------------
-  reduceBase64Image = e => {
-    let imageSource = e.path && e.path[0] || e.srcElement; //Safari compliancy
-
-    alert("reduceBase64Image !");
-    if (this.debugging) console.log("imageSource = ", imageSource);
-    var canvas = document.createElement('canvas'),
-      context,
-      width = imageSource.width,
-      height = imageSource.height;
-
-    //Exact size props are set
-    if (this.props.width && this.props.height) {
-      //Check image size
-      if (width > this.props.width || height > this.props.height) {
-        alert("L'image est trop grande, le format requis est " + this.props.width + "x" + this.props.height);
-        return;
+  //-----------------------------------------
+  /**
+   * PROTOTYPE : uploadToDatasyncCloud
+   * Purpose : Upload binary data to My Custom Cloud server using Datasync SncPushCloud endpoint and return the accessible URL for the uploaded file.
+   * @param base64Data 
+   * @param fileName 
+   */
+  uploadToDatasyncCloud = async pictureBlob => {
+    try {
+      const formData = new FormData();
+      let cloud_filename = pictureBlob.cloud_url_prefix.split('/').pop(); // Extract filename from cloud_url_prefix
+
+      console.log("Uploading to Datasync Cloud with filename:", cloud_filename);
+      formData.append('action', "syncPushCloud");
+      //formData.append('filename', `${CGUID()}.jpg`);
+      formData.append('filename', cloud_filename); // Extract filename from cloud_url_prefix
+
+      // Convert blob URL to actual binary data
+      let binaryString;
+      if (pictureBlob.isBlobUrl && pictureBlob.data.startsWith('blob:')) {
+        // Fetch the blob URL to get actual file content
+        console.log('Fetching blob URL:', pictureBlob.data);
+        const blobResponse = await fetch(pictureBlob.data);
+        const blob = await blobResponse.blob();
+
+        // Convert blob to ArrayBuffer then to Uint8Array
+        const arrayBuffer = await blob.arrayBuffer(); // Raw binary JPEG data
+        const uint8Array = new Uint8Array(arrayBuffer); // ← THIS CONTAINS THE GENUINE JPEG FILE BINARY DATA
+
+        // Convert to base64 string for transmission (chunked to avoid stack overflow)
+        let binaryStr = '';
+        const chunkSize = 8192; // Process in 8KB chunks to avoid stack overflow
+        for (let i = 0; i < uint8Array.length; i += chunkSize) {
+          const chunk = uint8Array.slice(i, i + chunkSize);
+          binaryStr += String.fromCharCode(...chunk);
+        }
+        binaryString = btoa(binaryStr); // ← THIS CONTAINS THE GENUINE JPEG FILE AS BASE64 STRING
+
+        console.log('Converted blob URL to binary data, size:', uint8Array.length);
+      } else if (Array.isArray(pictureBlob.binaryData)) {
+        // Convert Uint8Array or regular array to base64 string
+        const uint8Array = new Uint8Array(pictureBlob.binaryData);
+        let binaryStr = '';
+        const chunkSize = 8192;
+        for (let i = 0; i < uint8Array.length; i += chunkSize) {
+          const chunk = uint8Array.slice(i, i + chunkSize);
+          binaryStr += String.fromCharCode(...chunk);
+        }
+        binaryString = btoa(binaryStr);
+      } else if (pictureBlob.binaryData instanceof Uint8Array) {
+        // Already a Uint8Array, convert to base64
+        let binaryStr = '';
+        const chunkSize = 8192;
+        for (let i = 0; i < pictureBlob.binaryData.length; i += chunkSize) {
+          const chunk = pictureBlob.binaryData.slice(i, i + chunkSize);
+          binaryStr += String.fromCharCode(...chunk);
+        }
+        binaryString = btoa(binaryStr);
+      } else {
+        // Assume it's already a string
+        binaryString = pictureBlob.binaryData || "";
       }
+      formData.append('binary', binaryString);
+      console.log("binaryString ->", binaryString.substring(0, 100) + '...'); // Log the beginning of the base64 string for debugging 
 
-      //Check image size
-      if (width < this.props.width || height < this.props.height) {
-        alert("L'image est trop petite, le format requis est " + this.props.width + "x" + this.props.height);
-        return;
+      const results = await fetch('http://localhost:8888/datasync-service/Sync.php', {
+        method: 'POST',
+        body: formData
+      });
+      if (!results.ok) {
+        throw new Error(`HTTP error! status: ${response.statusText}`);
+      }
+      let sync_push_cloud_response = await results.json();
+
+      // Try to parse as JSON
+      try {
+        if (!sync_push_cloud_response.state) throw new Error(`syncPushCloud returned error: ${sync_push_cloud_response.message}`);else console.log('syncPushCloud upload response:', sync_push_cloud_response.message);
+        return true; // Return true on successful upload
+      } catch (parseError) {
+        console.error('syncPushCloud : JSON parse error:', parseError);
+        throw new Error(`syncPushCloud raised error: ${parseError}`);
       }
+    } catch (error) {
+      if (true) {
+        console.error('syncPushCloud upload error details:', error);
+      }
+      throw error;
     }
+  };
 
-    //Max size props are set
-    if (this.props.maxWidth && this.props.maxHeight) {
-      if (width > height) {
-        //Check resize is enabled
-        if (!this.props.reduceImage) {
-          alert("L'image est trop large ! la largeur maximale est de " + this.props.maxWidth);
-          return;
-        }
-        if (width > this.props.maxWidth) {
-          height *= this.props.maxWidth / width;
-          width = this.props.maxWidth;
-        }
-      } else {
-        if (height > this.props.maxHeight) {
-          //Check resize is enabled
-          if (!this.props.reduceImage) {
-            alert("L'image est trop haute, la hauteur maximale est de " + this.props.maxHeight);
-            return;
+  //-----------------------------------------
+  convert_blob_picture_into_cloud_file = async pictureBlob => {
+    try {
+      console.log("Received pictureBlob in uploadPicture:cloud_url_prefix -> ", pictureBlob.cloud_url_prefix);
+      if (!pictureBlob || !pictureBlob.data) {
+        //Reset picture
+        this.setPicture("");
+        return;
+      }
+      if (pictureBlob.isBlobUrl && pictureBlob.data.startsWith('blob:') && pictureBlob.cloud_url_prefix) {
+        let updloadSucces = await this.uploadToDatasyncCloud(pictureBlob); // Upload the image to custom Datasync cloud
+        if (updloadSucces) {
+          //Clear the data URL to free memory since the image is now uploaded and accessible via cloud URL
+          if (pictureBlob.data && pictureBlob.data.startsWith('blob:')) {
+            URL.revokeObjectURL(pictureBlob.data);
           }
-          width *= this.props.maxHeight / height;
-          height = this.props.maxHeight;
+          this.setData(pictureBlob.cloud_url_prefix);
+          //inform parent component of the new cloud URL for the uploaded image
+          this.props.uploadPicture({
+            data: pictureBlob.cloud_url_prefix
+          });
+        } else {
+          console.error("Upload to Datasync cloud failed - no success response received");
+          throw new Error("Upload to Datasync cloud failed - no success response received");
         }
       }
-    }
-
-    //Build 2d picture
-    canvas.width = width;
-    canvas.height = height;
-    context = canvas.getContext('2d');
-    context.drawImage(imageSource, 0, 0, width, height);
-
-    //Jpeg conversion
-    let jpegCompressionRatio = this.props.jpegQuality && this.props.jpegQuality > 0 && this.props.jpegQuality < 1 ? this.props.jpegQuality : 1;
-    let canvasData = canvas.toDataURL('image/jpg', jpegCompressionRatio); //Jpeg conversion
-
-    if (this.debugging) console.log("jpegCompressionRatio->", jpegCompressionRatio, " canvasData.length = ", canvasData.length);
-    const processedData = this.props.removebase64 ? canvasData ? canvasData.substring("data:image/png;base64".length) : "" : canvasData ? canvasData : "";
-    this.setData(processedData);
-    if (this.props.removebase64) {
-      //remove base64 prefix if property is set
-      this.props.uploadPicture({
-        data: processedData
-      });
-    } else {
-      //Keep base 64 prefix as it is
-      this.props.uploadPicture({
-        data: processedData
-      });
+    } catch (error) {
+      console.error("Upload error:", error);
     }
   };
+
   //-----------------------------------------------------------------------------------------------------------------------------------------
-  reduceBinaryImage = e => {
+  reduceBase64Image = e => {
     let imageSource = e.path && e.path[0] || e.srcElement; //Safari compliancy
 
-    alert("reduceBinaryImage !");
     if (this.debugging) console.log("imageSource = ", imageSource);
     var canvas = document.createElement('canvas'),
       context,
@@ -147,102 +191,77 @@ class DsBlob extends _react.Component {
       }
     }
 
+    //Compute jpeg compression ratio
+    let jpegCompressionRatio = this.props.jpegQuality && this.props.jpegQuality > 0 && this.props.jpegQuality < 1 ? this.props.jpegQuality : 1;
+
     //Build 2d picture
     canvas.width = width;
     canvas.height = height;
     context = canvas.getContext('2d');
     context.drawImage(imageSource, 0, 0, width, height);
+    if (this.props.cloud_storage) {
+      canvas.toBlob(async blob => {
+        if (blob) {
+          console.log("Binary blob created, size:", blob.size);
+          if (this.debugging) console.log("jpegCompressionRatio->", jpegCompressionRatio, " blob.size = ", blob.size);
+
+          // Fallback: use blob URL for display but keep binary data
+          const blobUrl = URL.createObjectURL(blob);
+
+          // Convert blob to ArrayBuffer to maintain genuine binary data
+          const reader = new FileReader();
+          reader.onload = () => {
+            const binaryData = reader.result; // ArrayBuffer - genuine binary data
+            console.log("Fallback: Using binary data, size:", binaryData.byteLength);
+
+            //Call the upload callback with both blob URL for display and binary data for upload
+            this.convert_blob_picture_into_cloud_file({
+              data: blobUrl,
+              // For display in img tag
+              binaryData: binaryData,
+              // Genuine JPEG binary stream
+              cloud_url_prefix: this.props.cloud_url_prefix,
+              // Pass cloud URL prefix if needed for parent component
+              isBlobUrl: true // Flag to track blob URLs for cleanup
+            });
+          };
+          reader.readAsArrayBuffer(blob);
+        } else {
+          console.error("Failed to create blob from canvas");
+        }
+      }, 'image/jpeg', jpegCompressionRatio);
+    } else {
+      //Jpeg conversion
 
-    //Binary conversion using toBlob to maintain binary output
-    let jpegCompressionRatio = this.props.jpegQuality && this.props.jpegQuality > 0 && this.props.jpegQuality < 1 ? this.props.jpegQuality : 1;
-    canvas.toBlob(async blob => {
-      if (blob) {
-        console.log("Binary blob created, size:", blob.size);
-        if (this.debugging) console.log("jpegCompressionRatio->", jpegCompressionRatio, " blob.size = ", blob.size);
-
-        // Fallback: use blob URL for display but keep binary data
-        const blobUrl = URL.createObjectURL(blob);
-
-        // Convert blob to ArrayBuffer to maintain genuine binary data
-        const reader = new FileReader();
-        reader.onload = () => {
-          const binaryData = reader.result; // ArrayBuffer - genuine binary data
-          console.log("Fallback: Using binary data, size:", binaryData.byteLength);
-
-          // Store both display URL and binary data
-          this.setData(blobUrl, binaryData);
-          this.props.uploadPicture({
-            data: blobUrl,
-            // For display in img tag
-            binaryData: binaryData,
-            // Genuine JPEG binary stream
-            cloud_url_prefix: this.props.cloud_url_prefix,
-            // Pass cloud URL prefix if needed for parent component
-            isBlobUrl: true // Flag to track blob URLs for cleanup
-          });
-        };
-        reader.readAsArrayBuffer(blob);
-      } else {
-        console.error("Failed to create blob from canvas");
-      }
-    }, 'image/jpeg', jpegCompressionRatio);
+      let canvasData = canvas.toDataURL('image/jpg', jpegCompressionRatio); //Jpeg conversion
+
+      if (this.debugging) console.log("jpegCompressionRatio->", jpegCompressionRatio, " canvasData.length = ", canvasData.length);
+      const processedData = canvasData ? canvasData : "";
+      this.setData(processedData);
+
+      //Keep base 64 prefix as it is
+      this.props.uploadPicture({
+        data: processedData
+      });
+    }
   };
 
   //-----------------------------------------------------------------------------------------------------------------------------------------
   storeBase64ImageToImg = e => {
-    var image = document.createElement('img');
-    image.onload = this.reduceBase64Image;
+    var DOM_image = document.createElement('img');
+    DOM_image.onload = this.reduceBase64Image;
     console.log("storeBase64ImageToImg:e.currentTarget.result = ", e.currentTarget.result);
-    alert("storeBase64ImageToImg !");
-    image.src = e.currentTarget.result;
-  };
-
-  //-----------------------------------------------------------------------------------------------------------------------------------------
-  storeBinaryImageToImg = e => {
-    var image = document.createElement('img');
-    //2Do DEBUG image.onload = this.reduceImage;
-    console.log("storeBinaryImageToImg:e.currentTarget.result = ", e.currentTarget.result);
-    alert("storeBinaryImageToImg !");
-    // Convert ArrayBuffer to Blob URL since image.src cannot accept ArrayBuffer directly
-    // Use the detected image type from the original file
-    const imageType = this.currentImageType || 'image/jpeg'; // fallback to jpeg
-    const blob = new Blob([e.currentTarget.result], {
-      type: imageType
-    });
-    const blobUrl = URL.createObjectURL(blob);
-    image.src = blobUrl;
-
-    // Clean up blob URL after image loads to prevent memory leaks
-    image.onload = loadEvent => {
-      this.reduceBinaryImage(loadEvent);
-      URL.revokeObjectURL(blobUrl);
-      // Clear the stored image type
-      this.currentImageType = null;
-    };
+    DOM_image.src = e.currentTarget.result;
   };
 
   //-----------------------------------------------------------------------------------------------------------------------------------------
   readImageAsBase64 = async aPictureFile => {
     let _reader = new FileReader();
     console.log("readImageAsBase64:aPictureFile = ", aPictureFile);
-    alert("readImageAsBase64 !");
     _reader.onload = this.storeBase64ImageToImg;
     _reader.readAsDataURL(aPictureFile); //The readAsDataURL() method of the FileReader interface is used to read the contents of the specified file's data as a base64 encoded string.
   };
 
-  //-----------------------------------------------------------------------------------------------------------------------------------------
-  readImageAsBinary = async aPictureFile => {
-    let _reader = new FileReader();
-    console.log("readImageAsBinary:aPictureFile = ", aPictureFile);
-    alert("readImageAsBinary !");
-
-    // Store the image type for use in storeBinaryImageToImg
-    this.currentImageType = aPictureFile.type;
-    console.log("Detected image type:", this.currentImageType);
-    _reader.onload = this.storeBinaryImageToImg;
-    _reader.readAsArrayBuffer(aPictureFile); //The readAsArrayBuffer() method reads the file as genuine binary content without base64 conversion.
-  };
-
   //-----------------------------------------------------------------------------------------------------------------------------------------
   resetUpload = () => {
     // Clean up any blob URLs before resetting
@@ -260,7 +279,7 @@ class DsBlob extends _react.Component {
   cleanupBlobUrl = () => {
     // Only show alert if not in test environment
     if (typeof jest === 'undefined') {
-      alert("cleanupBlobUrl !");
+      console.log("cleanupBlobUrl !");
     }
     // Revoke blob URL if it exists to prevent memory leaks
     if (this.state.data && this.state.data.startsWith('blob:')) {
@@ -318,11 +337,7 @@ class DsBlob extends _react.Component {
       if (errCount == errs.length) {
         //None new error occurs
         if (this.debugging) console.log("readImageAsBase64::", file.name);
-        if (this.props.cloud_storage) {
-          this.readImageAsBinary(file);
-        } else {
-          this.readImageAsBase64(file);
-        }
+        this.readImageAsBase64(file);
       }
     });
     if (errs.length) {
@@ -345,8 +360,7 @@ class DsBlob extends _react.Component {
     }
 
     // Otherwise, treat as base64 and add appropriate prefix
-    const prefix = this.props.removebase64 ? "data:image/png;base64," : "";
-    return prefix + this.state.data;
+    return this.state.data;
   };
 
   //-----------------------------------------------------------------------------------------------------------------------------------------
@@ -356,7 +370,6 @@ class DsBlob extends _react.Component {
     return this.state.binaryData || this.props.binaryData || null;
   };
 
-  //-----------------------------------------------------------------------------------------------------------------------------------------
   //-----------------------------------------------------------------------------------------------------------------------------------------
   // Data getter and setter methods for read-write access
   getData = () => {
@@ -464,7 +477,6 @@ DsBlob.propTypes = {
   // Image processing options
   reduceImage: _propTypes.default.bool,
   jpegQuality: _propTypes.default.number,
-  removebase64: _propTypes.default.bool,
   // Cloud storage options
   cloud_storage: _propTypes.default.bool,
   cloud_url_prefix: _propTypes.default.string,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datasync-blob",
-  "version": "1.1.24",
+  "version": "1.1.26",
   "description": "Datasync Blob component",
   "main": "./dist/components/DsBlob.js",
   "files": [