ZK-5650: cannot upload an image under websocket

zk/src/main/resources/web/js/zk/au.ts

@@ -965,7 +965,16 @@ export namespace au_global {
 				if (!forceAjax && ws) {
 					zk.copy(content, zWs.encode(j, aureq, dt));
 				} else {
-					(content as string) += zAu.encode(j, aureq, dt);
+					if (typeof content !== 'string') {
+						let reqContent = '';
+						for (const key in content) {
+							if (Object.hasOwn(content, key)) {
+								reqContent += (reqContent.length ? '&' : '') + key + '=' + encodeURIComponent(content[key] as string);
+							}
+						}
+						content = reqContent;
+					}
+					content += zAu.encode(j, aureq, dt);
 				}
 				zk.copy(rtags, (aureq.opts || {}).rtags);
 			}

zk/src/main/resources/web/js/zk/zk.ts

@@ -861,7 +861,7 @@ function override<T extends () => void, U> (dst: T, backup: Record<string, unkno
 	}
 	if (typeof dst['$init'] == 'function') {
 		const props: string[] = [];
-		for (var nm in src) {
+		for (const nm in src) {
 			backup[nm] = dst[nm as string];
 			dst[nm as string] = src[nm];
 			if (backup[nm] == undefined && typeof dst[nm as string] != 'function') {
@@ -873,13 +873,13 @@ function override<T extends () => void, U> (dst: T, backup: Record<string, unkno
 			dst['$init'] = function (...args: unknown[]) {
 				oldInit.bind(this)(...args);
 				// try to apply the properties again
-				for (var nm of props) {
+				for (const nm of props) {
 					this[nm] = src![nm] as never;
 				}
 			};
 		}
 	} else {
-		for (var nm in src) {
+		for (const nm in src) {
 			backup[nm] = dst[nm as string];
 			dst[nm as string] = src[nm];
 		}
@@ -921,7 +921,7 @@ _zk.augment = function<D extends Pick<S, keyof D & keyof S>, S> (dst: D, src: S
 	const backup = {} as Pick<D, keyof D & keyof S>;
 	if (typeof dst['$init'] == 'function') {
 		const props: string[] = [];
-		for (var nm in src) {
+		for (const nm in src) {
 			backup[nm] = dst[nm as keyof D];
 			dst[nm] = src[nm as keyof S];
 			if (backup[nm] == undefined && typeof dst[nm as keyof D] != 'function') {
@@ -933,7 +933,7 @@ _zk.augment = function<D extends Pick<S, keyof D & keyof S>, S> (dst: D, src: S
 			dst['$init'] = function (...args: unknown[]) {
 				oldInit.bind(this)(...args);
 				// try to apply the properties again
-				for (var nm of props) {
+				for (const nm of props) {
 					this[nm] = src[nm] as never;
 				}
 			};

zkdoc/release-note

@@ -44,6 +44,7 @@ ZK 10.0.0
   ZK-5639: stepbox wrong color update
   ZK-5635: textbox cannot focus on iPad/iPhone
   ZK-5647: Wrong groupbox layout on touch screen
+  ZK-5650: cannot upload an image under websocket
 
 * Upgrade Notes
   + Upgrade commons-fileupload to commons-fileupload2-javax 2.0.0-M2 and commons-io to 2.13.0 to support jakarta-friendly uploads

zktest/src/main/webapp/test2/B100-ZK-5650-zk.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<zk>
+	<listener>
+		<listener-class>org.zkoss.zkmax.au.websocket.WebSocketWebAppInit</listener-class>
+	</listener>
+</zk>

zktest/src/main/webapp/test2/B100-ZK-5650.zul

@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+B100-ZK-5650.zul
+
+        Purpose:
+
+        Description:
+
+        History:
+                Tue Feb 20 09:59:26 CST 2024, Created by rebeccalai
+
+Copyright (C) 2024 Potix Corporation. All Rights Reserved.
+-->
+<zk>
+	<label multiline="true">
+		1. Enable websocket connection with
+			&lt;listener&gt;
+				&lt;listener-class&gt;org.zkoss.zkmax.au.websocket.WebSocketWebAppInit&lt;/listener-class&gt;
+			&lt;/listener&gt;
+		2. Open developer tools to observe network.
+		3. Dropupload a file, should observe an XMLHttpRequest and see its file name in zk log.
+	</label>
+	<dropupload content="Dropupload a file" detection="none">
+		<attribute name="onUpload"><![CDATA[
+			import org.zkoss.util.media.Media;
+			for (Media media : event.getMedias()) {
+				Clients.log(media.getName());
+			}
+		]]></attribute>
+	</dropupload>
+</zk>

zktest/src/main/webapp/test2/config.properties

@@ -3122,6 +3122,7 @@ B90-ZK-4431.zul=A,E,Multislider
 ##zats##B100-ZK-4355.zul=A,E,timebox,col,default
 ##zats##B100-ZK-5639.zul=A,E,ForEach,If,Apply,MVVM,Shadow,Bindings,ZKDiffer
 ##zats##B100-ZK-5647.zul=A,E,groupbox,mold,touch
+##zats##B100-ZK-5650.zul=A,E,Fileupload,WebSocket
 
 ##
 # Features - 3.0.x version

zktest/src/test/java/org/zkoss/zktest/zats/test2/B100_ZK_5650Test.java

@@ -0,0 +1,38 @@
+/* B100_ZK_5650Test.java
+
+        Purpose:
+                
+        Description:
+                
+        History:
+                Tue Feb 20 10:02:46 CST 2024, Created by rebeccalai
+
+Copyright (C) 2024 Potix Corporation. All Rights Reserved.
+*/
+package org.zkoss.zktest.zats.test2;
+
+import static org.junit.jupiter.api.Assertions.assertEquals;
+
+import java.nio.file.Paths;
+
+import org.junit.jupiter.api.Test;
+import org.junit.jupiter.api.extension.RegisterExtension;
+
+import org.zkoss.test.webdriver.ExternalZkXml;
+import org.zkoss.test.webdriver.ForkJVMTestOnly;
+import org.zkoss.test.webdriver.WebDriverTestCase;
+
+@ForkJVMTestOnly
+public class B100_ZK_5650Test extends WebDriverTestCase {
+	@RegisterExtension
+	public static final ExternalZkXml CONFIG = new ExternalZkXml("/test2/B100-ZK-5650-zk.xml");
+
+	@Test
+	public void test() throws Exception {
+		connect();
+		waitResponse();
+		dropUploadFile(jq("@dropupload"), Paths.get("src/main/webapp/test2/img/sun.jpg"));
+		waitResponse();
+		assertEquals("sun.jpg", getZKLog());
+	}
+}