datasync-blob 1.1.22 → 1.1.24

package/dist/components/DsBlob.js

@@ -5,21 +5,26 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.DsBlob = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 class DsBlob extends _react.Component {
   constructor(props) {
     super(props);
     this.state = {
       hover_input: false,
-      hover_image: false
+      hover_image: false,
+      data: props.data || "",
+      binaryData: props.binaryData || null
     };
     this.debugging = false;
   }
 
   //-----------------------------------------------------------------------------------------------------------------------------------------
-  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,
@@ -77,17 +82,17 @@ class DsBlob extends _react.Component {
     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: canvasData ? canvasData.substring("data:image/png;base64".length) : "",
-        item_id: this.props.item_id
+        data: processedData
       });
     } else {
       //Keep base 64 prefix as it is
       this.props.uploadPicture({
-        data: canvasData ? canvasData : "",
-        item_id: this.props.item_id
+        data: processedData
       });
     }
   };
@@ -150,21 +155,30 @@ 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.setData(blobUrl, binaryData);
           this.props.uploadPicture({
-            data: binaryData,
-            item_id: this.props.item_id
+            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);
@@ -177,9 +191,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 +245,51 @@ class DsBlob extends _react.Component {
 
   //-----------------------------------------------------------------------------------------------------------------------------------------
   resetUpload = () => {
+    // Clean up any blob URLs before resetting
+    this.cleanupBlobUrl();
+    this.setData("", null);
     this.props.uploadPicture({
       data: "",
-      item_id: this.props.item_id
+      cloud_url_prefix: this.props.cloud_url_prefix,
+      isBlobUrl: false
     });
+    //this.props.uploadPicture({data:"",cloud_url_prefix:this.props.cloud_url_prefix, isBlobUrl:true});
+  };
+
+  //-----------------------------------------------------------------------------------------------------------------------------------------
+  cleanupBlobUrl = () => {
+    // Only show alert if not in test environment
+    if (typeof jest === 'undefined') {
+      alert("cleanupBlobUrl !");
+    }
+    // Revoke blob URL if it exists to prevent memory leaks
+    if (this.state.data && this.state.data.startsWith('blob:')) {
+      URL.revokeObjectURL(this.state.data);
+      console.log("Blob URL cleaned up:", this.state.data);
+    }
   };
 
+  //-----------------------------------------------------------------------------------------------------------------------------------------
+  componentDidUpdate(prevProps) {
+    // Sync state with prop changes from parent
+    if (prevProps.data !== this.props.data) {
+      this.setState({
+        data: this.props.data || ""
+      });
+    }
+    if (prevProps.binaryData !== this.props.binaryData) {
+      this.setState({
+        binaryData: this.props.binaryData || null
+      });
+    }
+  }
+
+  //-----------------------------------------------------------------------------------------------------------------------------------------
+  componentWillUnmount() {
+    // Cleanup blob URLs when component unmounts
+    this.cleanupBlobUrl();
+  }
+
   //-----------------------------------------------------------------------------------------------------------------------------------------
   onInputChange = e => {
     const errs = [];
@@ -276,6 +329,54 @@ class DsBlob extends _react.Component {
       return errs.forEach(err => alert(err));
     }
   };
+
+  //-----------------------------------------------------------------------------------------------------------------------------------------
+  getImageSrc = () => {
+    if (!this.state.data) return "";
+
+    // Check if it's already a complete URL (cloud storage URL or blob URL)
+    if (this.state.data.startsWith('http://') || this.state.data.startsWith('https://') || this.state.data.startsWith('blob:')) {
+      return this.state.data;
+    }
+
+    // Check if it's already a data URL (base64)
+    if (this.state.data.startsWith('data:')) {
+      return this.state.data;
+    }
+
+    // Otherwise, treat as base64 and add appropriate prefix
+    const prefix = this.props.removebase64 ? "data:image/png;base64," : "";
+    return prefix + this.state.data;
+  };
+
+  //-----------------------------------------------------------------------------------------------------------------------------------------
+  getBinaryData = () => {
+    // Return the genuine JPEG binary stream (ArrayBuffer)
+    // This can be used by parent components for uploading or processing
+    return this.state.binaryData || this.props.binaryData || null;
+  };
+
+  //-----------------------------------------------------------------------------------------------------------------------------------------
+  //-----------------------------------------------------------------------------------------------------------------------------------------
+  // Data getter and setter methods for read-write access
+  getData = () => {
+    return this.state.data;
+  };
+  setData = (data, binaryData = null) => {
+    this.setState({
+      data: data || "",
+      binaryData: binaryData
+    });
+  };
+
+  //-----------------------------------------------------------------------------------------------------------------------------------------
+  getImageType = () => {
+    // Return the type of image data being used
+    if (this.props.isCloudUrl) return 'cloud';
+    if (this.props.isBlobUrl) return 'blob';
+    if (this.state.data && this.state.data.startsWith('data:')) return 'base64';
+    return 'unknown';
+  };
   render() {
     const upload_picture_label = {
       cursor: "pointer"
@@ -305,7 +406,7 @@ class DsBlob extends _react.Component {
       display: "none",
       cursor: "pointer"
     };
-    return /*#__PURE__*/_react.default.createElement("div", null, !this.props.data && /*#__PURE__*/_react.default.createElement("label", {
+    return /*#__PURE__*/_react.default.createElement("div", null, !this.state.data && /*#__PURE__*/_react.default.createElement("label", {
       id: "upload-picture-label",
       className: this.props.buttonStyle,
       style: upload_picture_label
@@ -316,7 +417,7 @@ class DsBlob extends _react.Component {
       accept: "image/*",
       onChange: this.onInputChange,
       multiple: true
-    })), this.props.data && this.props.data.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
+    })), this.state.data && this.state.data.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
       class: "show-image",
       style: div_show_image,
       onMouseOver: () => {
@@ -337,7 +438,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,
@@ -348,4 +449,31 @@ class DsBlob extends _react.Component {
     })));
   }
 }
-exports.DsBlob = DsBlob;
+exports.DsBlob = DsBlob;
+DsBlob.propTypes = {
+  // Image handling props (note: data and binaryData are managed as read-write state internally)
+  data: _propTypes.default.string,
+  binaryData: _propTypes.default.object,
+  // Upload callback
+  uploadPicture: _propTypes.default.func.isRequired,
+  // Image size constraints
+  width: _propTypes.default.number,
+  height: _propTypes.default.number,
+  maxWidth: _propTypes.default.number,
+  maxHeight: _propTypes.default.number,
+  // 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,
+  // UI props
+  Caption: _propTypes.default.string,
+  buttonStyle: _propTypes.default.string,
+  pictureStyle: _propTypes.default.string,
+  readOnly: _propTypes.default.bool,
+  // Status flags
+  isCloudUrl: _propTypes.default.bool,
+  isBlobUrl: _propTypes.default.bool
+};

package/package.json

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