datasync-blob 1.1.26 → 1.1.27

package/package.json

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

package/dist/components/DsBlob.js

@@ -1,491 +0,0 @@
-"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 = false;
-  }
-
-  //-----------------------------------------
-  /**
-   * 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 (this.debugging) 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) {
-        alert("L'image est trop grande, le format requis est " + this.props.width + "x" + this.props.height);
-        return;
-      }
-
-      //Check image size
-      if (width < this.props.width || height < this.props.height) {
-        alert("L'image est trop petite, le format requis est " + this.props.width + "x" + this.props.height);
-        return;
-      }
-    }
-
-    //Max size props are set
-    if (this.props.maxWidth && this.props.maxHeight) {
-      if (width > height) {
-        //Check resize is enabled
-        if (!this.props.reduceImage) {
-          alert("L'image est trop large ! la largeur maximale est de " + this.props.maxWidth);
-          return;
-        }
-        if (width > this.props.maxWidth) {
-          height *= this.props.maxWidth / width;
-          width = this.props.maxWidth;
-        }
-      } else {
-        if (height > this.props.maxHeight) {
-          //Check resize is enabled
-          if (!this.props.reduceImage) {
-            alert("L'image est trop haute, la hauteur maximale est de " + this.props.maxHeight);
-            return;
-          }
-          width *= this.props.maxHeight / height;
-          height = this.props.maxHeight;
-        }
-      }
-    }
-
-    //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
-};