datasync-blob 1.1.32 → 1.1.34

package/dist/components/DsBlob.d.ts

@@ -0,0 +1,48 @@
+interface ErrorObject {
+    error_code: string;
+    error_definition: string;
+    message: string;
+}
+interface UploadFile {
+    data: string;
+    cloud_url_prefix?: string;
+    isBlobUrl?: boolean;
+}
+export interface DsBlobProps {
+    /** Field identifier (used by datasync-dynamic-form) */
+    item_id?: string;
+    /** Current image data: base64 data-URL, cloud URL, or blob URL */
+    data?: string;
+    binaryData?: ArrayBuffer | null;
+    /** Callback fired after every image change */
+    uploadPicture: (uploadFile: UploadFile) => void;
+    /** Exact pixel size constraints */
+    width?: number;
+    height?: number;
+    /** Maximum pixel size constraints (used with reduceImage) */
+    maxWidth?: number;
+    maxHeight?: number;
+    /** Maximum file size in kilobytes */
+    maxKBytes?: number;
+    /** Automatically downscale oversized images instead of rejecting them */
+    reduceImage?: boolean;
+    /** JPEG quality 0–1 (default 1 = lossless) */
+    jpegQuality?: number;
+    /** Upload image to Datasync cloud storage instead of encoding as base64 */
+    cloud_storage?: boolean;
+    cloud_url_prefix?: string;
+    /** Label shown on the upload button */
+    Caption?: string;
+    /** CSS class applied to the upload button */
+    buttonStyle?: string;
+    /** CSS class applied to the displayed image */
+    pictureStyle?: string;
+    readOnly?: boolean;
+    isCloudUrl?: boolean;
+    isBlobUrl?: boolean;
+    /** Called when a validation error occurs (size, dimensions, format) */
+    onErrorHandler?: (errorObject: ErrorObject) => void;
+    debugging?: boolean;
+}
+export declare function DsBlob(props: DsBlobProps): JSX.Element;
+export {};

package/dist/components/DsBlob.js

@@ -1,509 +1,440 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
 });
-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
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
     };
-    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");
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DsBlob = DsBlob;
+const react_1 = __importStar(require("react"));
+const datasync_core_1 = require("datasync-core");
+//-----------------------------------------------------------------------------------------------------------------------------------------
+function DsBlob(props) {
+    const { item_id, data: dataProp = "", binaryData: binaryDataProp = null, uploadPicture, width, height, maxWidth, maxHeight, maxKBytes, reduceImage, jpegQuality, cloud_storage, cloud_url_prefix, Caption, buttonStyle, pictureStyle, readOnly, onErrorHandler, debugging = false, } = props;
+    const [hoverInput, setHoverInput] = (0, react_1.useState)(false);
+    const [hoverImage, setHoverImage] = (0, react_1.useState)(false);
+    const [data, setDataState] = (0, react_1.useState)(dataProp || "");
+    const [, setBinaryDataState] = (0, react_1.useState)(binaryDataProp || null);
+    /** Mirrors current data state for use inside cleanup callbacks (avoids stale closures) */
+    const dataRef = (0, react_1.useRef)(data);
+    /** Off-screen <img> element used for image dimension reading and canvas drawing */
+    const _DOM_image = (0, react_1.useRef)(null);
+    //-----------------------------------------
+    /** Central setter — keeps dataRef in sync with state */
+    const setData = (newData, newBinaryData = null) => {
+        const val = newData || "";
+        dataRef.current = val;
+        setDataState(val);
+        setBinaryDataState(newBinaryData);
+    };
+    //-----------------------------------------
+    /** Route validation errors to onErrorHandler prop, or fall back to alert */
+    const reportError = (msg) => {
+        if (onErrorHandler) {
+            onErrorHandler({ error_code: "BLOB_ERROR", error_definition: msg, message: msg });
         }
-      }
-    } catch (error) {
-      console.error("Upload error:", error);
-    }
-  };
-
-  //-----------------------------------------------------------------------------------------------------------------------------------------
-  reduceBase64Image = e => {
-    let imageSource = e.path && e.path[0] || e.srcElement; //Safari compliancy
-
-    var canvas = document.createElement('canvas'),
-      context,
-      width = imageSource.width,
-      height = imageSource.height;
-    if (this.debugging) {
-      alert(`Debugging : pixel is ${width} x ${height}`);
-      console.log("imageSource = ", imageSource);
-    }
-    //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 !`;
+        else {
             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;
-          }
+    };
+    //-----------------------------------------
+    // Sync state when parent-controlled props change
+    (0, react_1.useEffect)(() => {
+        dataRef.current = dataProp || "";
+        setDataState(dataProp || "");
+    }, [dataProp]);
+    (0, react_1.useEffect)(() => {
+        setBinaryDataState(binaryDataProp || null);
+    }, [binaryDataProp]);
+    //-----------------------------------------
+    // Cleanup on unmount
+    (0, react_1.useEffect)(() => {
+        return () => {
+            cleanupBlobUrl();
+            if (_DOM_image.current) {
+                _DOM_image.current.onload = null;
+                _DOM_image.current = null;
+            }
+        };
+    }, []);
+    //-----------------------------------------
+    const cleanupBlobUrl = () => {
+        if (debugging) {
+            console.log(`cleanupBlobUrl ! => dataRef ${dataRef}`);
+            console.log("URL.revokeObjectURL -> dataRef.current", dataRef.current);
+            console.log("URL.revokeObjectURL -> dataRef", dataRef);
         }
-      }
-    }
-
-    //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
+        URL.revokeObjectURL(dataRef.current);
+        //Delete Blob file
+        deleteFromDatasyncCloud({
+            data: null,
+            binaryData: null,
+            cloud_url_prefix: cloud_url_prefix || "",
+            isBlobUrl: true,
+        });
+    };
+    //-----------------------------------------
+    /**
+     * Upload binary data to Datasync Cloud server using the SyncPushCloud endpoint.
+     * Returns true on success, throws on failure.
+     */
+    const uploadToDatasyncCloud = (pictureBlob) => __awaiter(this, void 0, void 0, function* () {
+        try {
+            const formData = new FormData();
+            const cloud_filename = pictureBlob.cloud_url_prefix.split('/').pop() || "";
+            console.log("Uploading to Datasync Cloud with filename:", cloud_filename);
+            formData.append('action', "syncPushCloud");
+            formData.append('filename', cloud_filename);
+            let binaryString;
+            if (pictureBlob.isBlobUrl && pictureBlob.data.startsWith('blob:')) {
+                console.log('Fetching blob URL:', pictureBlob.data);
+                const blobResponse = yield fetch(pictureBlob.data);
+                const blob = yield blobResponse.blob();
+                const arrayBuffer = yield blob.arrayBuffer();
+                const uint8Array = new Uint8Array(arrayBuffer);
+                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);
+                console.log('Converted blob URL to binary data, size:', uint8Array.length);
+            }
+            else if (Array.isArray(pictureBlob.binaryData)) {
+                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) {
+                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 {
+                binaryString = pictureBlob.binaryData || "";
+            }
+            formData.append('binary', binaryString);
+            if (debugging)
+                console.log("binaryString ->", binaryString.substring(0, 100) + '...');
+            const results = yield fetch('http://localhost:8888/datasync-service/Sync.php', {
+                method: 'POST',
+                body: formData,
             });
-          };
-          reader.readAsArrayBuffer(blob);
-        } else {
-          console.error("Failed to create blob from canvas");
+            if (!results.ok) {
+                throw new Error(`HTTP error! status: ${results.statusText}`);
+            }
+            const sync_push_cloud_response = yield results.json();
+            if (!sync_push_cloud_response.state)
+                throw new Error(`syncPushCloud returned error: ${sync_push_cloud_response.message}`);
+            console.log('syncPushCloud upload response:', sync_push_cloud_response.message);
+            return true;
+        }
+        catch (error) {
+            console.error('syncPushCloud upload error details:', error);
+            throw error;
         }
-      }, '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);
-      }
+    //-----------------------------------------
+    const convert_blob_picture_into_cloud_file = (pictureBlob) => __awaiter(this, void 0, void 0, function* () {
+        try {
+            console.log("Received pictureBlob in uploadPicture:cloud_url_prefix -> ", pictureBlob.cloud_url_prefix);
+            if (!pictureBlob || !pictureBlob.data) {
+                setData("");
+                return;
+            }
+            if (pictureBlob.isBlobUrl && pictureBlob.data.startsWith('blob:') && pictureBlob.cloud_url_prefix) {
+                const uploadSuccess = yield uploadToDatasyncCloud(pictureBlob);
+                if (uploadSuccess) {
+                    if (pictureBlob.data && pictureBlob.data.startsWith('blob:')) {
+                        URL.revokeObjectURL(pictureBlob.data);
+                    }
+                    console.log("convert_blob_picture_into_cloud_file::New picture loaded then Refresh :-o");
+                    setData(pictureBlob.cloud_url_prefix);
+                    uploadPicture({ data: pictureBlob.cloud_url_prefix });
+                }
+                else {
+                    const msg = "Upload to Datasync cloud failed - no success response received";
+                    console.error(msg);
+                    throw new Error(msg);
+                }
+            }
+        }
+        catch (error) {
+            console.error("Upload error:", error);
+        }
     });
-    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
+    //-----------------------------------------
+    /**
+     * Delete binary data file from Datasync Cloud server using the SyncDeleteCloud endpoint.
+     * Returns true on success, throws on failure.
+     */
+    const deleteFromDatasyncCloud = (pictureBlob) => __awaiter(this, void 0, void 0, function* () {
+        try {
+            const formData = new FormData();
+            const cloud_filename = pictureBlob.cloud_url_prefix.split('/').pop() || "";
+            console.log("Deleting from Datasync Cloud with filename:", cloud_filename);
+            formData.append('action', "syncDeleteCloud");
+            formData.append('filename', cloud_filename);
+            const results = yield fetch('http://localhost:8888/datasync-service/Sync.php', {
+                method: 'POST',
+                body: formData,
+            });
+            if (!results.ok) {
+                throw new Error(`HTTP error! status: ${results.statusText}`);
+            }
+            const sync_delete_cloud_response = yield results.json();
+            if (!sync_delete_cloud_response.state)
+                throw new Error(`syncDeleteCloud returned error: ${sync_delete_cloud_response.message}`);
+            console.log('syncDeleteCloud upload response:', sync_delete_cloud_response.message);
+            return true;
+        }
+        catch (error) {
+            console.error('syncDeleteCloud upload error details:', error);
+            throw error;
+        }
     });
-  };
-
-  //-----------------------------------------------------------------------------------------------------------------------------------------
-  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 reduceBase64Image = (e) => {
+        const imageSource = e.target;
+        const canvas = document.createElement('canvas');
+        let w = imageSource.width;
+        let h = imageSource.height;
+        if (debugging) {
+            console.log(`Debugging : pixel is ${w} x ${h} imageSource => ${imageSource}`);
+        }
+        // Exact size constraints
+        if (width && height) {
+            if (w > width || h > height) {
+                const msg = `L'image est trop grande, le format requis est ${width} x ${height}`;
+                reportError(msg);
+                console.error(msg);
+                return;
+            }
+            if (w < width || h < height) {
+                const msg = `L'image est trop petite, le format requis est ${width} x ${height}`;
+                reportError(msg);
+                console.error(msg);
+                return;
+            }
+        }
+        // Maximum size constraints
+        if (maxWidth && maxHeight) {
+            if (w > h) {
+                // Landscape orientation
+                if (w > maxWidth) {
+                    if (reduceImage) {
+                        h *= maxWidth / w;
+                        w = maxWidth;
+                    }
+                    else {
+                        const msg = `L'image est trop large ! la largeur maximale est de ${maxWidth} pixels !`;
+                        reportError(msg);
+                        console.error(msg);
+                        return;
+                    }
+                }
+            }
+            else {
+                // Portrait orientation
+                if (h > maxHeight) {
+                    if (reduceImage) {
+                        w *= maxHeight / h;
+                        h = maxHeight;
+                    }
+                    else {
+                        const msg = `L'image est trop haute, la hauteur maximale est de ${maxHeight} pixels`;
+                        reportError(msg);
+                        console.error(msg);
+                        return;
+                    }
+                }
+            }
+        }
+        const jpegCompressionRatio = (jpegQuality && jpegQuality > 0 && jpegQuality < 1) ? jpegQuality : 1;
+        canvas.width = w;
+        canvas.height = h;
+        const context = canvas.getContext('2d');
+        context.drawImage(imageSource, 0, 0, w, h);
+        if (cloud_storage) {
+            canvas.toBlob((blob) => __awaiter(this, void 0, void 0, function* () {
+                if (blob) {
+                    if (debugging) {
+                        console.log("Binary blob created, size:", blob.size);
+                        console.log("jpegCompressionRatio->", jpegCompressionRatio, " blob.size = ", blob.size);
+                    }
+                    const blobUrl = URL.createObjectURL(blob);
+                    const reader = new FileReader();
+                    reader.onload = () => {
+                        const binaryData = reader.result;
+                        console.log("Fallback: Using binary data, size:", binaryData.byteLength);
+                        convert_blob_picture_into_cloud_file({
+                            data: blobUrl,
+                            binaryData: binaryData,
+                            cloud_url_prefix: cloud_url_prefix || "",
+                            isBlobUrl: true,
+                        });
+                        //--let us revoque image If the image comes from URL.createObjectURL(...), call URL.revokeObjectURL(...) after replacing it.
+                        if (debugging)
+                            console.log("URL.revokeObjectURL --> blobUrl", blobUrl);
+                        URL.revokeObjectURL(blobUrl);
+                    };
+                    reader.readAsArrayBuffer(blob);
+                }
+                else {
+                    console.error("Failed to create blob from canvas");
+                }
+            }), 'image/jpeg', jpegCompressionRatio);
+        }
+        else {
+            const canvasData = canvas.toDataURL('image/jpg', jpegCompressionRatio);
+            if (debugging)
+                console.log("jpegCompressionRatio->", jpegCompressionRatio, " canvasData.length = ", canvasData.length);
+            const processedData = canvasData || "";
+            setData(processedData);
+            uploadPicture({ data: processedData });
+        }
     };
-    const upload_picture_label_input = {
-      opacity: "0",
-      width: "0px",
-      height: "0px"
+    //-----------------------------------------------------------------------------------------------------------------------------------------
+    const storeBase64ImageToImg = (e) => {
+        var _a;
+        const domImage = document.createElement('img');
+        domImage.setAttribute("id", `img_tmp_id_${(0, datasync_core_1.CGUID)()}`);
+        _DOM_image.current = domImage;
+        domImage.onload = reduceBase64Image;
+        const result = (_a = e.currentTarget) === null || _a === void 0 ? void 0 : _a.result;
+        console.log("storeBase64ImageToImg:e.currentTarget.result = ", result);
+        domImage.src = result;
     };
-    const div_show_image_hover = {
-      position: "relative",
-      margin: "0px",
-      opacity: "0.5"
+    //-----------------------------------------------------------------------------------------------------------------------------------------
+    const readImageAsBase64 = (aPictureFile) => {
+        const _reader = new FileReader();
+        console.log("readImageAsBase64:aPictureFile = ", aPictureFile);
+        _reader.onload = storeBase64ImageToImg;
+        _reader.readAsDataURL(aPictureFile);
     };
-    const div_show_image = {
-      position: "relative",
-      margin: "0px"
+    //-----------------------------------------------------------------------------------------------------------------------------------------
+    const resetUpload = () => {
+        cleanupBlobUrl();
+        setData("", null);
+        uploadPicture({ data: "", cloud_url_prefix: "", isBlobUrl: false });
     };
-    const div_show_image_hover_input = {
-      display: "block",
-      top: "0px",
-      left: "0px",
-      position: "absolute"
+    //-----------------------------------------------------------------------------------------------------------------------------------------
+    const onInputChange = (e) => {
+        const errs = [];
+        const files = Array.from(e.target.files || []);
+        const types = ['image/png', 'image/jpeg', 'image/gif'];
+        const _1Mo = 1024 * 1024;
+        const sizeLimitBytes = maxKBytes ? maxKBytes * 1024 : 9 * _1Mo;
+        // Reset input value — ensures the same file can be selected again
+        e.target.value = "";
+        if (debugging)
+            console.log("onInputChange");
+        if (files.length > 1) {
+            reportError("Pas plus d'une image à la fois");
+            return;
+        }
+        files.forEach((file) => {
+            const errCount = errs.length;
+            if (types.every((type) => file.type !== type)) {
+                errs.push(`'${file.type}' : format non supporté`);
+            }
+            if (file.size > sizeLimitBytes) {
+                const limitLabel = maxKBytes ? `${maxKBytes}Ko` : `9Méga-octets`;
+                errs.push(`'${file.name}' image trop volumineuse (max:${limitLabel})`);
+            }
+            if (debugging)
+                console.log(`errCount = ${errCount} vs errs.length = ${errs.length}`);
+            if (errCount === errs.length) {
+                if (debugging)
+                    console.log("readImageAsBase64::", file.name);
+                readImageAsBase64(file);
+            }
+        });
+        if (errs.length) {
+            errs.forEach((err) => reportError(err));
+        }
     };
-    const div_show_image_input = {
-      position: "absolute",
-      display: "none",
-      cursor: "pointer"
+    //-----------------------------------------------------------------------------------------------------------------------------------------
+    const getImageSrc = () => {
+        if (!data)
+            return "";
+        if (data.startsWith('http://') || data.startsWith('https://') || data.startsWith('blob:')) {
+            return data;
+        }
+        if (data.startsWith('data:')) {
+            return data;
+        }
+        return data;
     };
-    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
-    })));
-  }
+    //-----------------------------------------------------------------------------------------------------------------------------------------
+    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 (react_1.default.createElement("div", null,
+        !data &&
+            react_1.default.createElement("label", { id: "upload-picture-label", className: buttonStyle, style: upload_picture_label },
+                Caption,
+                react_1.default.createElement("input", { style: upload_picture_label_input, id: "nested-input", type: "file", accept: "image/*", onChange: onInputChange, multiple: true })),
+        data && data.length > 0 &&
+            react_1.default.createElement("div", { className: "show-image", style: div_show_image, onMouseOver: () => { setHoverInput(true); setHoverImage(true); if (debugging)
+                    console.log("onMouseOver"); }, onMouseLeave: () => { setHoverInput(false); setHoverImage(false); if (debugging)
+                    console.log("onMouseLeave"); } },
+                react_1.default.createElement("img", { style: hoverImage ? div_show_image_hover : div_show_image, src: getImageSrc(), className: pictureStyle, alt: "", id: `img_id_${(0, datasync_core_1.CGUID)()}` }),
+                !readOnly &&
+                    react_1.default.createElement("input", { style: hoverInput ? div_show_image_hover_input : div_show_image_input, className: "btn btn-primary delete", type: "button", value: "Effacer", onClick: resetUpload }),
+                !readOnly &&
+                    react_1.default.createElement("label", { style: hoverInput
+                            ? Object.assign(Object.assign({}, div_show_image_hover_input), { top: "32px", cursor: "pointer" }) : div_show_image_input, className: "btn btn-secondary" },
+                        Caption || 'Remplacer',
+                        react_1.default.createElement("input", { style: upload_picture_label_input, type: "file", accept: "image/*", onChange: onInputChange, multiple: true })))));
 }
-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.32",
+  "version": "1.1.34",
   "description": "Datasync Blob component",
   "main": "./dist/components/DsBlob.js",
   "files": [
@@ -15,32 +15,27 @@
     "email": "pmabiala@me.com"
   },
   "devDependencies": {
-    "@babel/cli": "^7.24.1",
-    "@babel/core": "^7.24.4",
-    "@babel/preset-env": "^7.24.4",
-    "@babel/preset-react": "^7.24.1",
-    "@testing-library/react": "^14.2.2",
-    "javascript-obfuscator": "^4.1.1",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "jest-transform-css": "^6.0.1",
-    "react": "^18.2.0",
-    "react-pdf": "^7.7.1",
-    "webpack": "^5.99.9",
-    "webpack-cli": "^6.0.1",
-    "webpack-node-externals": "^3.0.0",
-    "webpack-obfuscator": "^3.5.1"
+    "@babel/preset-typescript": "^7.29.7",
+    "@types/react": "^18.3.29",
+    "@types/react-dom": "^18.3.7",
+    "datasync-core": "^1.0.46",
+    "multiselect-react-dropdown": "^2.0.25",
+    "react": ">=18.2.0",
+    "reactstrap": ">=8.4.1",
+    "typescript": "^5.9.3"
   },
   "peerDependencies": {
     "react": "^ 18.2.0"
   },
   "scripts": {
-    "build_old": "rm -r dist && babel src -d dist --ignore src/**/*.test.jsx && npm run copy-files",
-    "build": "rm -r dist && babel src -d dist --ignore src/**/*.test.jsx && npm run copy-files && webpack --config webpack.config.js",
-    "copy-files": "cp ./src/*.css dist/",
-    "test": "jest --config jest.config.json"
+    "hybrid": "tsc && cp src/flex-grid.css dist/flex-grid.css"
   },
   "keywords": [],
   "author": "",
-  "license": "ISC"
+  "license": "ISC",
+  "dependencies": {
+    "axios": "^1.7.2",
+    "datasync-blob": "^1.1.32",
+    "runscripts": "^0.0.1"
+  }
 }