Merge pull request #594 from Countly/pic-upload

turtledreams · web-flow · commit 56b43542d4e5 · 2025-11-03T20:34:59.000+09:00
User profile image upload
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,10 @@
+## 25.4.2
+
+- Mitigated an issue where manual feedback reporting could have failed
+- Mitigated a possible issue with request timeouts in IE11
+- Non window contexts also now uses POST requests by default
+- Added a new method `uploadUserProfilePicture` for uploading user profile images to server
+
 ## 25.4.1
 
 - Added automatic backoff mechanism which delays sending requests if server seems busy
diff --git a/cypress/e2e/bridged_utils.cy.js b/cypress/e2e/bridged_utils.cy.js
@@ -15,7 +15,7 @@ function initMain(name, version) {
 }
 
 const SDK_NAME = "javascript_native_web";
-const SDK_VERSION = "25.4.1";
+const SDK_VERSION = "25.4.2";
 
 // tests
 describe("Bridged SDK Utilities Tests", () => {
diff --git a/cypress/e2e/namespace.cy.js b/cypress/e2e/namespace.cy.js
@@ -0,0 +1,62 @@
+/* eslint-disable cypress/no-unnecessary-waiting */
+/* eslint-disable require-jsdoc */
+var Countly = require("../../lib/countly");
+var hp = require("../support/helper");
+
+const c1 = ['sessions', 'events', 'views', 'users', 'scrolls', 'clicks'];
+const c2 = ['events', 'users', 'location'];
+
+describe("-", () => {
+    it("-", () => {
+        hp.haltAndClearStorage(() => {
+            Countly.init({
+                app_key: "YOUR_APP_KEY1",
+                url: "https://your.domain.count.ly",
+                namespace: "namespace1",
+                clear_stored_id: true,
+                device_id: "test-device-id1",
+                require_consent: true,
+                enable_orientation_tracking: false,
+            });
+            Countly.add_consent(c1);
+            Countly.user_details({organization: "Test Organization1", custom: {"Test User1": "Test User1"}});
+            Countly.track_sessions();
+            Countly.track_pageview();
+            Countly.track_clicks();
+            Countly.track_scrolls();
+            Countly.add_event({
+                key: "test_event1",
+                count: 1,
+                segmentation: {test: "test1"},
+            });
+
+            Countly.q.push(["init", {
+                app_key: "YOUR_APP_KEY2", //must have different APP key
+                url: "https://your.domain.count.ly",
+                namespace: "namespace2",
+                clear_stored_id: true,
+                device_id: "test-device-id2",
+                require_consent: true,
+                enable_orientation_tracking: false,
+            }])
+            Countly.q.push(["YOUR_APP_KEY2", "add_consent", c2]);
+            Countly.q.push(["YOUR_APP_KEY2", "user_details", {organization: "Test Organization2", custom: {"Test User2": "Test User2"}}]);
+            Countly.q.push(["YOUR_APP_KEY2", "track_sessions"]);
+            Countly.q.push(["YOUR_APP_KEY2", "track_pageview", undefined, undefined, {test: "test2"}]);
+            Countly.q.push(["YOUR_APP_KEY2", "track_clicks"]);
+            Countly.q.push(["YOUR_APP_KEY2", "track_scrolls"]); 
+            Countly.q.push(["YOUR_APP_KEY2", "add_event", {
+                key: "test_event2",
+                count: 1,
+                segmentation: {test: "test2"},
+            }]);
+
+            cy.wait(1000).then(() => {
+                var queues = Countly._internals.getLocalQueues();
+                var requests = Countly._internals.testingGetRequests();
+                cy.log(queues);
+                cy.log(requests);
+            });
+        });
+    });
+});
diff --git a/cypress/e2e/salt.cy.js b/cypress/e2e/salt.cy.js
@@ -60,14 +60,15 @@ describe("Salt Tests", () => {
                         hp.check_commons(paramsObject);
                         expect(paramsObject.checksum256).to.be.ok;
                         expect(paramsObject.checksum256.length).to.equal(64);
+                        expect(paramsObject.checksum256).to.match(/^[A-F0-9]{64}$/);
                         // TODO: directly check the checksum with the node crypto api. Will need some extra decoding logic
                     }
                 });
             });
         });
     });
     it("Node and Web Crypto comparison", () => {
-        const hash = sha256("text" + salt); // node crypto api
+        const hash = sha256("text" + salt).toUpperCase(); // node crypto api
         Countly._internals.calculateChecksum("text", salt).then((hash2) => { // SDK uses web crypto api
             expect(hash2).to.equal(hash);
         });
diff --git a/cypress/e2e/upload_user_profile_picture.cy.js b/cypress/e2e/upload_user_profile_picture.cy.js
@@ -0,0 +1,68 @@
+/* eslint-disable cypress/no-unnecessary-waiting */
+/* eslint-disable require-jsdoc */
+var Countly = require("../../lib/countly");
+var hp = require("../support/helper");
+
+function initMain() {
+    Countly.init({
+        app_key: "YOUR_APP_KEY",
+        url: "https://your.domain.count.ly",
+        test_mode: true,
+        test_mode_eq: true,
+        debug: true
+    });
+}
+
+describe("Upload user profile picture", () => {
+    it("queues an image upload request when given a File-like object (Blob)", () => {
+        hp.haltAndClearStorage(() => {
+            initMain();
+
+            // red dot PNG
+            const base64Png = "iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGNgYAAAAAMAAWgmWQ0AAAAASUVORK5CYII=";
+            const binary = Cypress.Blob.base64StringToBlob(base64Png, 'image/png');
+            binary.name = "avatar.png";
+            Countly.uploadUserProfilePicture(binary);
+
+            cy.wait(500).then(() => {
+                cy.getLocalStorage("YOUR_APP_KEY/cly_queue").then((val) => {
+                    expect(val).to.be.ok;
+                    const queue = JSON.parse(val);
+                    expect(queue.length).to.be.greaterThan(0);
+
+                    const imgReq = queue.find(r => r.__imageUpload === true || r.imageData);
+                    expect(imgReq).to.be.ok;
+                    expect(imgReq.imageName).to.be.oneOf(["avatar.png", "avatar"]);
+                    expect(imgReq.imageType).to.equal('image/png');
+                    expect(imgReq.imageData).to.be.a('string').and.to.have.length.greaterThan(0);
+
+                    expect(imgReq.user_details).to.be.a('string');
+                    const ud = JSON.parse(imgReq.user_details);
+                    expect(ud).to.be.an('object');
+                });
+            });
+        });
+    });
+
+    it("rejects non-image files and does not queue requests", () => {
+        hp.haltAndClearStorage(() => {
+            initMain();
+
+            const txtBlob = new Blob(["hello world"], { type: 'text/plain' });
+            txtBlob.name = "test.txt";
+            Countly.uploadUserProfilePicture(txtBlob);
+
+            cy.wait(300).then(() => {
+                cy.getLocalStorage("YOUR_APP_KEY/cly_queue").then((val) => {
+                    if (!val) {
+                        expect(val).to.be.not.ok;
+                        return;
+                    }
+                    const queue = JSON.parse(val || '[]');
+                    const imgReq = queue.find(r => r.__imageUpload === true || r.imageData);
+                    expect(imgReq).to.not.exist;
+                });
+            });
+        });
+    });
+});
diff --git a/examples/example_async.html b/examples/example_async.html
@@ -44,6 +44,15 @@
 				}
 			}]);
 		}
+		function uploadProfilePicture() {
+			var fileInput = document.getElementById("profilePicInput");
+			var file = fileInput.files[0];
+			if (!file) {
+				alert("Please select an image file.");
+				return;
+			}
+			Countly.q.push(["uploadUserProfilePicture", file]);
+		}
 	</script>
 </head>
 
@@ -58,6 +67,11 @@ <h1>Async Countly Implementation</h1>
 		<img src="./images/team_countly.jpg" id="wallpaper" />
 		<br />
 		<input type="button" id="testButton" onclick="clickEvent()" value="Test Button">
+		<br /><br />
+		<input type="file" id="profilePicInput" accept="image/*">
+		<br /><br />
+		<br />
+		<input type="button" onclick="uploadProfilePicture()" value="Upload Profile Picture">
 		<p><a href='https://countly.com/'>Countly</a></p>
 	</center>
 </body>
diff --git a/examples/example_sync.html b/examples/example_sync.html
@@ -26,6 +26,25 @@
         //track pageviews automatically
         Countly.track_pageview();
         Countly.track_errors();
+
+        document.getElementById("testButton").addEventListener("click", function () {
+            Countly.add_event({
+                key: "buttonClick",
+                "segmentation": {
+                    "id": "id"
+                }
+            });
+        });
+
+        document.getElementById("uploadBtn").addEventListener("click", function () {
+            var fileInput = document.getElementById("profilePicInput");
+            var file = fileInput.files[0];
+            if (!file) {
+                alert("Please select an image file.");
+                return;
+            }
+            Countly.uploadUserProfilePicture(file);
+        });
     </script>
 </head>
 
@@ -40,19 +59,12 @@ <h1>Sync Countly Implementation</h1>
         <img src="./images/team_countly.jpg" id="wallpaper" />
         <br />
         <input type="button" id="testButton" onclick="clickEvent()" value="Test Button">
+        <br /><br />
+        <input type="file" id="profilePicInput" accept="image/*">
+        <br /><br />
+        <input type="button" id="uploadBtn" value="Upload Profile Picture">
         <p><a href='https://countly.com/'>Countly</a></p>
     </center>
-    <script type='text/javascript'>
-        //send event on button click
-        function clickEvent() {
-            Countly.add_event({
-                key: "buttonClick",
-                "segmentation": {
-                    "id": "id"
-                }
-            });
-        }
-    </script>
 </body>
 
 </html>
diff --git a/examples/examples_feedback_widgets.html b/examples/examples_feedback_widgets.html
@@ -25,11 +25,11 @@
     // Displaying feedback widgets
     //=================================================
     Countly.feedback.showNPS();
-    
+
     // OR with a specific ID, name or tag
     // const id = 'ID_from_server';
     // Countly.feedback.showNPS(id);
-    
+
     // Other feedback widgets
     // Countly.feedback.showSurvey();
     // Countly.feedback.showRating();
@@ -39,7 +39,6 @@
     // ADVANCED: Fetching and displaying feedback widgets
     //=================================================
     function fetchAndDisplayWidget() {
-      // Fetch user's feedbacks widgets from the server (must have been created at server first)
       Countly.get_available_feedback_widgets(feedbackWidgetsCallback);
     }
 
@@ -51,7 +50,7 @@
       }
 
       // Decide which which widget to show. Here the first rating widget is selected. 
-      const widgetType = "rating";
+      const widgetType = "survey";
       const countlyFeedbackWidget = countlyPresentableFeedback.find(widget => widget.type === widgetType);
       if (!countlyFeedbackWidget) {
         console.error(`[Countly] No ${widgetType} widget found`);
@@ -89,6 +88,7 @@
             console.error(`[Countly] No ${widgetType} widget found`);
             return;
           }
+          console.log(`[Countly] Found ${widgetType} widget`);
 
           // Get data with the widget object
           Countly.getFeedbackWidgetData(countlyFeedbackWidget,
@@ -100,22 +100,40 @@
               }
 
               const CountlyWidgetData = feedbackData;
+              console.log(`[Countly] Found ${widgetType} widget data`, CountlyWidgetData);
               // record data according to the widget type
               if (CountlyWidgetData.type === 'nps') {
-                Countly.reportFeedbackWidgetManually(countlyFeedbackWidget, CountlyWidgetData, { rating: 3, comment: "comment" });
+                console.log(`[Countly] Recording NPS data manually`);
+                Countly.reportFeedbackWidgetManually(countlyFeedbackWidget, CountlyWidgetData, { rating: 5, comment: "comment" });
               } else if (CountlyWidgetData.type === 'survey') {
+                console.log(`[Countly] Recording Survey data manually`);
                 var widgetResponse = {};
                 // form the key/value pairs according to data
-                widgetResponse["answ-" + CountlyWidgetData.questions[0].id] = CountlyWidgetData.questions[0].type === "rating" ? 3 : "answer";
+                widgetResponse["answ-" + CountlyWidgetData.questions[0].id] = CountlyWidgetData.questions[0].type === "rating" ? 5 : "answer";
                 Countly.reportFeedbackWidgetManually(countlyFeedbackWidget, CountlyWidgetData, widgetResponse);
               } else if (CountlyWidgetData.type === 'rating') {
-                Countly.reportFeedbackWidgetManually(countlyFeedbackWidget, CountlyWidgetData, { rating: 3, comment: "comment", email: "email", contactMe: true });
+                console.log(`[Countly] Recording Rating data manually`);
+                Countly.reportFeedbackWidgetManually(countlyFeedbackWidget, CountlyWidgetData, { rating: 5, comment: "comment", email: "email", contactMe: true });
               }
             }
 
           );
         })
     }
+
+    document.querySelector("#one").addEventListener("click", function () {
+      fetchAndDisplayWidget();
+    });
+    document.querySelector("#two").addEventListener("click", function () {
+      getFeedbackWidgetListAndDoThings('nps');
+    });
+    document.querySelector("#three").addEventListener("click", function () {
+      getFeedbackWidgetListAndDoThings('survey');
+    });
+    document.querySelector("#four").addEventListener("click", function () {
+      getFeedbackWidgetListAndDoThings('rating');
+    });
+
   </script>
 </head>
 
@@ -129,10 +147,10 @@ <h1>Feedback Widgets</h1>
   <center>
     <img src="./images/team_countly.jpg" id="wallpaper" />
     <p><a href='https://countly.com/'>Countly</a></p>
-    <p><button onclick="fetchAndDisplayWidget()">Enable Feedback Widget</button></p>
-    <p><button onclick="getFeedbackWidgetListAndDoThings('nps')">Manually Record NPS Data</button></p>
-    <p><button onclick="getFeedbackWidgetListAndDoThings('survey')">Manually Record Survey Data</button></p>
-    <p><button onclick="getFeedbackWidgetListAndDoThings('rating')">Manually Record Rating Data</button></p>
+    <p><button id="one">Enable Feedback Widget</button></p>
+    <p><button id="two">Manually Record NPS Data</button></p>
+    <p><button id="three">Manually Record Survey Data</button></p>
+    <p><button id="four">Manually Record Rating Data</button></p>
   </center>
 </body>
 
diff --git a/lib/countly.d.ts b/lib/countly.d.ts
@@ -214,6 +214,12 @@ declare module "countly-sdk-web" {
       custom?: { [key: string]: any };
     }): void;
 
+    /**
+     * Upload user profile picture (image) to the server.
+     * @param {File|Blob} imageFile - The image file or blob to upload
+     */
+    function uploadUserProfilePicture(imageFile: File | Blob): void;
+
     namespace userData {
       /**
        * Sets user's custom property value
diff --git a/lib/countly.js b/lib/countly.js
diff --git a/lib/countly.min.js b/lib/countly.min.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json

Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,7 @@ function initMain(name, version) {`
`15`	`15`	`}`
`16`	`16`
`17`	`17`	`const SDK_NAME = "javascript_native_web";`
`18`		`-const SDK_VERSION = "25.4.1";`
	`18`	`+const SDK_VERSION = "25.4.2";`
`19`	`19`
`20`	`20`	`// tests`
`21`	`21`	`describe("Bridged SDK Utilities Tests", () => {`