datasync-blob 1.1.29 → 1.1.30

package/dist/components/DsBlob.js

@@ -0,0 +1,510 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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,
+      data: props.data || "",
+      binaryData: props.binaryData || null
+    };
+    this.debugging = true;
+  }
+
+  //-----------------------------------------
+  /**
+   * 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 
+
+      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;
+    }
+  };
+
+  //-----------------------------------------
+  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);
+          }
+          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");
+        }
+      }
+    } catch (error) {
+      console.error("Upload error:", error);
+    }
+  };
+
+  //-----------------------------------------------------------------------------------------------------------------------------------------
+  reduceBase64Image = e => {
+    let imageSource = e.path && e.path[0] || e.srcElement; //Safari compliancy
+
+    if (true || this.debugging) {
+      alert(`Debugging : pixel is ${width} x ${height}`);
+      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) {
+        let msg = `L'image est trop grande, le format requis est ${this.props.width} x ${this.props.height}`;
+        alert(msg);
+        console.error(msg);
+        return;
+      }
+
+      //Check image size
+      if (width < this.props.width || height < this.props.height) {
+        let msg = `L'image est trop petite, le format requis est ${this.props.width} x ${this.props.height}`;
+        alert(msg);
+        console.error(msg);
+        return;
+      }
+    }
+
+    //Max size props are set
+    if (this.props.maxWidth && this.props.maxHeight) {
+      if (width > height) {
+        //This is a landscape picture orientation
+        //Check width overflow
+        if (width > this.props.maxWidth) {
+          //Check wether resize is enabled
+          if (this.props.reduceImage) {
+            //resize picture
+            height *= this.props.maxWidth / width;
+            width = this.props.maxWidth;
+          } else {
+            let msg = `L'image est trop large ! la largeur maximale est de ${this.props.maxWidth} pixels !`;
+            alert(msg);
+            console.error(msg);
+            return;
+          }
+        }
+      } else {
+        //This is a portrait picture orientation
+        //Check height overflow
+        if (height > this.props.maxHeight) {
+          //Check resize is enabled
+          if (this.props.reduceImage) {
+            //resize picture
+            width *= this.props.maxHeight / height;
+            height = this.props.maxHeight;
+          } else {
+            let msg = `L'image est trop haute, la hauteur maximale est de ${this.props.maxHeight} pixels`;
+            alert(msg);
+            console.error(msg);
+            return;
+          }
+        }
+      }
+    }
+
+    //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
+
+      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 DOM_image = document.createElement('img');
+    DOM_image.onload = this.reduceBase64Image;
+    console.log("storeBase64ImageToImg:e.currentTarget.result = ", e.currentTarget.result);
+    DOM_image.src = e.currentTarget.result;
+  };
+
+  //-----------------------------------------------------------------------------------------------------------------------------------------
+  readImageAsBase64 = async aPictureFile => {
+    let _reader = new FileReader();
+    console.log("readImageAsBase64:aPictureFile = ", aPictureFile);
+    _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.
+  };
+
+  //-----------------------------------------------------------------------------------------------------------------------------------------
+  resetUpload = () => {
+    // Clean up any blob URLs before resetting
+    this.cleanupBlobUrl();
+    this.setData("", null);
+    this.props.uploadPicture({
+      data: "",
+      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') {
+      console.log("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 = [];
+    const files = Array.from(e.target.files);
+    const types = ['image/png', 'image/jpeg', 'image/gif'];
+    const _1Mo = 1024 * 1024;
+    const SizeLimit = 9;
+
+    //Reset input cache value -  to assure trigger if user select the same file again
+    e.target.value = null;
+    if (this.debugging) console.log("onInputChange");
+    if (files.length > 1) {
+      const msg = 'Pas plus d\'une image à la fois';
+      alert(msg);
+      return;
+    }
+    files.forEach((file, i) => {
+      let errCount = errs.length;
+      if (types.every(type => file.type !== type)) {
+        errs.push(`'${file.type}' : format non supporté`);
+      }
+      if (file.size > SizeLimit * _1Mo) {
+        errs.push(`'${file.name}' image trop volumineuse (max:${SizeLimit}Méga-octets)`);
+      }
+      if (this.debugging) console.log(`errCount = ${errCount} vs errs.length = ${errs.length}`);
+      if (errCount == errs.length) {
+        //None new error occurs
+        if (this.debugging) console.log("readImageAsBase64::", file.name);
+        this.readImageAsBase64(file);
+      }
+    });
+    if (errs.length) {
+      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
+    return 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"
+    };
+    const upload_picture_label_input = {
+      opacity: "0",
+      width: "0px",
+      height: "0px"
+    };
+    const div_show_image_hover = {
+      position: "relative",
+      margin: "0px",
+      opacity: "0.5"
+    };
+    const div_show_image = {
+      position: "relative",
+      margin: "0px"
+    };
+    const div_show_image_hover_input = {
+      display: "block",
+      top: "0px",
+      left: "0px",
+      position: "absolute"
+    };
+    const div_show_image_input = {
+      position: "absolute",
+      display: "none",
+      cursor: "pointer"
+    };
+    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
+    }, this.props.Caption, /*#__PURE__*/_react.default.createElement("input", {
+      style: upload_picture_label_input,
+      id: "nested-input",
+      type: "file",
+      accept: "image/*",
+      onChange: this.onInputChange,
+      multiple: true
+    })), this.state.data && this.state.data.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
+      class: "show-image",
+      style: div_show_image,
+      onMouseOver: () => {
+        this.setState({
+          hover_input: true,
+          hover_image: true
+        }, () => {
+          if (this.debugging) console.log("onMouseOver");
+        });
+      },
+      onMouseLeave: () => {
+        this.setState({
+          hover_input: false,
+          hover_image: false
+        }, () => {
+          if (this.debugging) console.log("onMouseLeave");
+        });
+      }
+    }, /*#__PURE__*/_react.default.createElement("img", {
+      style: this.state.hover_image ? div_show_image_hover : div_show_image,
+      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,
+      className: "btn btn-primary delete",
+      type: "button",
+      value: "Effacer",
+      onClick: this.resetUpload
+    })));
+  }
+}
+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,
+  // 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.29",
+  "version": "1.1.30",
   "description": "Datasync Blob component",
   "main": "./dist/components/DsBlob.js",
   "files": [