Merge pull request #41 from Countly/user-picture-upload

UP picture upload

Author: turtledreams

CHANGELOG.md

@@ -1,6 +1,9 @@
 ## X.X.X
 
 * 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
 
@@ -35,7 +38,7 @@
 
 ## 24.11.4
 
-* Mitigated an issue where `content` and `feedback` interfaces would not work with async multi instances. 
+* Mitigated an issue where `content` and `feedback` interfaces would not work with async multi instances.
 
 ## 24.11.3
 

cypress/e2e/namespace.cy.js

@@ -0,0 +1,61 @@
+/* eslint-disable require-jsdoc */
+var Countly = require("../../Countly.js");
+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);
+            });
+        });
+    });
+});

cypress/e2e/salt.cy.js

@@ -62,14 +62,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
         Utils.calculateChecksum("text", salt).then((hash2) => { // SDK uses web crypto api
             expect(hash2).to.equal(hash);
         });

cypress/e2e/upload_user_profile_picture.cy.js

@@ -0,0 +1,67 @@
+/* eslint-disable require-jsdoc */
+var Countly = require("../../Countly.js");
+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;
+                });
+            });
+        });
+    });
+});

examples/example_async.html

@@ -19,7 +19,6 @@
 		if(Countly.app_key === "YOUR_APP_KEY" || Countly.url === "https://your.server.ly"){
     		console.warn("Please do not use default set of app key and server url")
 		}
-		Countly.debug = true;
 
 		//start pushing function calls to queue
 		//track sessions automatically
@@ -39,7 +38,8 @@
 			cly.src = '../Countly.js';
 			cly.onload = function () { 
 				console.log("Countly script loaded");
-				Countly.init() };
+				Countly.init() 
+			};
 			var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(cly, s);
 		})();
 		//send event on button click
@@ -51,6 +51,16 @@
 				}
 			}]);
 		}
+
+		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>
 
@@ -64,7 +74,12 @@ <h1>Async Countly Implementation</h1>
 	<center>
 		<img src="./images/team_countly.jpg" id="wallpaper" />
 		<br />
-		<input type="button" id="testButton" onclick="clickEvent()" value="Test Button">
+	<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>

examples/example_sync.html

@@ -35,6 +35,16 @@
                 }
             });
         });
+
+        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>
 
@@ -49,6 +59,10 @@ <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>
 </body>