datasync-blob 1.1.23 → 1.1.25

package/dist/components/DsBlob.js

@@ -5,22 +5,155 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.DsBlob = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactToastify = require("react-toastify");
+require("react-toastify/dist/ReactToastify.css");
+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;
   }
 
+  //-----------------------------------------
+  /**
+   * 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;
+    }
+  };
+  setPicture = data => {
+    console.log("setPicture => Fake procedure canbe deleted !");
+  };
+
+  //-----------------------------------------
+  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.setPicture(pictureBlob.cloud_url_prefix); //Display the image using the cloud URL only if upload succeeded
+          _reactToastify.toast.success("Image uploadée");
+          console.log("pictureBlob->", pictureBlob);
+
+          //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) {
+      _reactToastify.toast.error("Erreur lors du téléchargement de l'image");
+      console.error("Upload error:", error);
+    }
+  };
+
   //-----------------------------------------------------------------------------------------------------------------------------------------
   reduceBase64Image = e => {
     let imageSource = e.path && e.path[0] || e.srcElement; //Safari compliancy
 
-    alert("reduceBase64Image !");
     if (this.debugging) console.log("imageSource = ", imageSource);
     var canvas = document.createElement('canvas'),
       context,
@@ -78,17 +211,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
       });
     }
   };
@@ -96,7 +229,6 @@ class DsBlob extends _react.Component {
   reduceBinaryImage = e => {
     let imageSource = e.path && e.path[0] || e.srcElement; //Safari compliancy
 
-    alert("reduceBinaryImage !");
     if (this.debugging) console.log("imageSource = ", imageSource);
     var canvas = document.createElement('canvas'),
       context,
@@ -166,12 +298,25 @@ 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: this.props.cloud_url_prefix,
+            // Pass the cloud URL for display
+            binaryData: null,
+            // Clear binary data since we now have a cloud URL
+            cloud_url_prefix: this.props.cloud_url_prefix,
+            // Pass cloud URL prefix if needed for parent component
+            isBlobUrl: false // The final URL is not a blob URL, it's a cloud URL
+          });
+
+          //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
-            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
           });
         };
@@ -187,7 +332,6 @@ class DsBlob extends _react.Component {
     var image = document.createElement('img');
     image.onload = this.reduceBase64Image;
     console.log("storeBase64ImageToImg:e.currentTarget.result = ", e.currentTarget.result);
-    alert("storeBase64ImageToImg !");
     image.src = e.currentTarget.result;
   };
 
@@ -196,7 +340,6 @@ class DsBlob extends _react.Component {
     var image = document.createElement('img');
     //2Do DEBUG image.onload = this.reduceImage;
     console.log("storeBinaryImageToImg:e.currentTarget.result = ", e.currentTarget.result);
-    alert("storeBinaryImageToImg !");
     // Convert ArrayBuffer to Blob URL since image.src cannot accept ArrayBuffer directly
     // Use the detected image type from the original file
     const imageType = this.currentImageType || 'image/jpeg'; // fallback to jpeg
@@ -219,7 +362,6 @@ class DsBlob extends _react.Component {
   readImageAsBase64 = async aPictureFile => {
     let _reader = new FileReader();
     console.log("readImageAsBase64:aPictureFile = ", aPictureFile);
-    alert("readImageAsBase64 !");
     _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.
   };
@@ -228,7 +370,6 @@ class DsBlob extends _react.Component {
   readImageAsBinary = async aPictureFile => {
     let _reader = new FileReader();
     console.log("readImageAsBinary:aPictureFile = ", aPictureFile);
-    alert("readImageAsBinary !");
 
     // Store the image type for use in storeBinaryImageToImg
     this.currentImageType = aPictureFile.type;
@@ -241,21 +382,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') {
+      console.log("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 +467,40 @@ 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 +508,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 +540,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 +551,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: () => {
@@ -405,7 +580,44 @@ class DsBlob extends _react.Component {
       type: "button",
       value: "Effacer",
       onClick: this.resetUpload
-    })));
+    })), /*#__PURE__*/_react.default.createElement(_reactToastify.ToastContainer, {
+      position: "top-right",
+      autoClose: 3000,
+      hideProgressBar: false,
+      newestOnTop: false,
+      closeOnClick: true,
+      rtl: false,
+      pauseOnFocusLoss: true,
+      draggable: true,
+      pauseOnHover: true
+    }));
   }
 }
-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.25",
   "description": "Datasync Blob component",
   "main": "./dist/components/DsBlob.js",
   "files": [
@@ -42,5 +42,8 @@
   },
   "keywords": [],
   "author": "",
-  "license": "ISC"
+  "license": "ISC",
+  "dependencies": {
+    "react-toastify": "^11.1.0"
+  }
 }