datasync-blob 1.1.22 → 1.1.23

package/dist/components/DsBlob.js

@@ -17,9 +17,10 @@ class DsBlob extends _react.Component {
   }
 
   //-----------------------------------------------------------------------------------------------------------------------------------------
-  reduceBinaryImage = e => {
+  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,
@@ -150,21 +151,28 @@ class DsBlob extends _react.Component {
 
     //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(blob => {
+    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);
 
-        // Convert blob to ArrayBuffer for binary data
+        // 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
-          console.log("Binary data ArrayBuffer:", binaryData);
+          const binaryData = reader.result; // ArrayBuffer - genuine binary data
+          console.log("Fallback: Using binary data, size:", binaryData.byteLength);
 
-          // Pass binary data directly to uploadPicture
+          // Store both display URL and binary data
           this.props.uploadPicture({
-            data: binaryData,
-            item_id: this.props.item_id
+            data: blobUrl,
+            // For display in img tag
+            binaryData: binaryData,
+            // Genuine JPEG binary stream
+            item_id: this.props.item_id,
+            isBlobUrl: true // Flag to track blob URLs for cleanup
           });
         };
         reader.readAsArrayBuffer(blob);
@@ -177,9 +185,9 @@ class DsBlob extends _react.Component {
   //-----------------------------------------------------------------------------------------------------------------------------------------
   storeBase64ImageToImg = e => {
     var image = document.createElement('img');
-    image.onload = this.reduceBinaryImage;
-    console.log("storeImageToImg:e.currentTarget.result = ", e.currentTarget.result);
-    alert("storeImageToImg !");
+    image.onload = this.reduceBase64Image;
+    console.log("storeBase64ImageToImg:e.currentTarget.result = ", e.currentTarget.result);
+    alert("storeBase64ImageToImg !");
     image.src = e.currentTarget.result;
   };
 
@@ -231,12 +239,29 @@ class DsBlob extends _react.Component {
 
   //-----------------------------------------------------------------------------------------------------------------------------------------
   resetUpload = () => {
+    // Clean up any blob URLs before resetting
+    this.cleanupBlobUrl();
     this.props.uploadPicture({
       data: "",
       item_id: this.props.item_id
     });
   };
 
+  //-----------------------------------------------------------------------------------------------------------------------------------------
+  cleanupBlobUrl = () => {
+    // Revoke blob URL if it exists to prevent memory leaks
+    if (this.props.data && this.props.data.startsWith && this.props.data.startsWith('blob:')) {
+      URL.revokeObjectURL(this.props.data);
+      console.log("Blob URL cleaned up:", this.props.data);
+    }
+  };
+
+  //-----------------------------------------------------------------------------------------------------------------------------------------
+  componentWillUnmount() {
+    // Cleanup blob URLs when component unmounts
+    this.cleanupBlobUrl();
+  }
+
   //-----------------------------------------------------------------------------------------------------------------------------------------
   onInputChange = e => {
     const errs = [];
@@ -276,6 +301,41 @@ class DsBlob extends _react.Component {
       return errs.forEach(err => alert(err));
     }
   };
+
+  //-----------------------------------------------------------------------------------------------------------------------------------------
+  getImageSrc = () => {
+    if (!this.props.data) return "";
+
+    // Check if it's already a complete URL (cloud storage URL or blob URL)
+    if (this.props.data.startsWith('http://') || this.props.data.startsWith('https://') || this.props.data.startsWith('blob:')) {
+      return this.props.data;
+    }
+
+    // Check if it's already a data URL (base64)
+    if (this.props.data.startsWith('data:')) {
+      return this.props.data;
+    }
+
+    // Otherwise, treat as base64 and add appropriate prefix
+    const prefix = this.props.removebase64 ? "data:image/png;base64," : "";
+    return prefix + this.props.data;
+  };
+
+  //-----------------------------------------------------------------------------------------------------------------------------------------
+  getBinaryData = () => {
+    // Return the genuine JPEG binary stream (ArrayBuffer)
+    // This can be used by parent components for uploading or processing
+    return this.props.binaryData || null;
+  };
+
+  //-----------------------------------------------------------------------------------------------------------------------------------------
+  getImageType = () => {
+    // Return the type of image data being used
+    if (this.props.isCloudUrl) return 'cloud';
+    if (this.props.isBlobUrl) return 'blob';
+    if (this.props.data && this.props.data.startsWith('data:')) return 'base64';
+    return 'unknown';
+  };
   render() {
     const upload_picture_label = {
       cursor: "pointer"
@@ -337,7 +397,7 @@ class DsBlob extends _react.Component {
       }
     }, /*#__PURE__*/_react.default.createElement("img", {
       style: this.state.hover_image ? div_show_image_hover : div_show_image,
-      src: this.props.removebase64 ? "data:image/png;base64" : "" + this.props.data,
+      src: this.getImageSrc(),
       className: this.props.pictureStyle
     }), !this.props.readOnly && /*#__PURE__*/_react.default.createElement("input", {
       style: this.state.hover_input ? div_show_image_hover_input : div_show_image_input,

package/package.json

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