datasync-blob 1.1.23 → 1.1.24

package/dist/components/DsBlob.js

@@ -5,13 +5,17 @@ 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;
   }
@@ -78,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
       });
     }
   };
@@ -166,12 +170,14 @@ class DsBlob extends _react.Component {
           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
-            item_id: this.props.item_id,
+            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
           });
         };
@@ -241,21 +247,43 @@ 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.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);
+    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
@@ -304,28 +332,41 @@ class DsBlob extends _react.Component {
 
   //-----------------------------------------------------------------------------------------------------------------------------------------
   getImageSrc = () => {
-    if (!this.props.data) return "";
+    if (!this.state.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;
+    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.props.data.startsWith('data:')) {
-      return this.props.data;
+    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.props.data;
+    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.props.binaryData || null;
+    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
+    });
   };
 
   //-----------------------------------------------------------------------------------------------------------------------------------------
@@ -333,7 +374,7 @@ class DsBlob extends _react.Component {
     // 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';
+    if (this.state.data && this.state.data.startsWith('data:')) return 'base64';
     return 'unknown';
   };
   render() {
@@ -365,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
@@ -376,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: () => {
@@ -408,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.23",
+  "version": "1.1.24",
   "description": "Datasync Blob component",
   "main": "./dist/components/DsBlob.js",
   "files": [