datasync-blob 1.1.20 → 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,
@@ -148,24 +149,45 @@ class DsBlob extends _react.Component {
     context = canvas.getContext('2d');
     context.drawImage(imageSource, 0, 0, width, height);
 
-    //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;
-    let canvasData = canvas.toDataURL('image/jpg', jpegCompressionRatio); //Jpeg conversion
+    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);
 
-    console.log("canvasData = ", canvasData);
-    if (this.debugging) console.log("jpegCompressionRatio->", jpegCompressionRatio, " canvasData.length = ", canvasData.length);
-    this.props.uploadPicture({
-      data: canvasData ? canvasData : "",
-      item_id: this.props.item_id
-    });
+        // 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.props.uploadPicture({
+            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);
+      } else {
+        console.error("Failed to create blob from canvas");
+      }
+    }, 'image/jpeg', jpegCompressionRatio);
   };
 
   //-----------------------------------------------------------------------------------------------------------------------------------------
   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;
   };
 
@@ -217,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 = [];
@@ -262,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"
@@ -323,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.20",
+  "version": "1.1.23",
   "description": "Datasync Blob component",
   "main": "./dist/components/DsBlob.js",
   "files": [