datasync-blob 1.1.24 → 1.1.25

package/dist/components/DsBlob.js

@@ -6,6 +6,8 @@ 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 {
@@ -20,11 +22,138 @@ class DsBlob extends _react.Component {
     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,
@@ -100,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,
@@ -172,6 +300,17 @@ class DsBlob extends _react.Component {
           // 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,
@@ -193,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;
   };
 
@@ -202,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
@@ -225,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.
   };
@@ -234,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;
@@ -260,7 +395,7 @@ class DsBlob extends _react.Component {
   cleanupBlobUrl = () => {
     // Only show alert if not in test environment
     if (typeof jest === 'undefined') {
-      alert("cleanupBlobUrl !");
+      console.log("cleanupBlobUrl !");
     }
     // Revoke blob URL if it exists to prevent memory leaks
     if (this.state.data && this.state.data.startsWith('blob:')) {
@@ -356,7 +491,6 @@ class DsBlob extends _react.Component {
     return this.state.binaryData || this.props.binaryData || null;
   };
 
-  //-----------------------------------------------------------------------------------------------------------------------------------------
   //-----------------------------------------------------------------------------------------------------------------------------------------
   // Data getter and setter methods for read-write access
   getData = () => {
@@ -446,7 +580,17 @@ 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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datasync-blob",
-  "version": "1.1.24",
+  "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"
+  }
 }