getodk · latin-panda · May 23, 2025 · May 5, 2025 · May 5, 2025 · May 6, 2025
diff --git a/.changeset/afraid-bottles-buy.md b/.changeset/afraid-bottles-buy.md
@@ -0,0 +1,9 @@
+---
+'@getodk/xforms-engine': minor
+'@getodk/xpath': minor
+'@getodk/web-forms': patch
+'@getodk/scenario': patch
+'@getodk/common': patch
+---
+
+Adds support for downloading image attachments referenced in a form's IText
diff --git a/packages/common/src/fixtures/import-glob-helper.ts b/packages/common/src/fixtures/import-glob-helper.ts
@@ -3,6 +3,7 @@ import { IS_NODE_RUNTIME } from '../env/detection.ts';
 
 interface GlobURLFetchResponse {
 	text(): Promise<string>;
+	blob(): Promise<Blob>;
 }
 
 type FetchGlobURL = (globURL: string) => Awaitable<GlobURLFetchResponse>;
@@ -22,6 +23,11 @@ if (IS_NODE_RUNTIME) {
 		text(): Promise<string> {
 			return readFile(this.fsPath, 'utf-8');
 		}
+
+		async blob(): Promise<Blob> {
+			const buffer = await readFile(this.fsPath);
+			return new Blob([buffer]);
+		}
 	}
 
 	fetchGlobURL = (globURL) => {
@@ -33,7 +39,7 @@ if (IS_NODE_RUNTIME) {
 
 type ImportMetaGlobURLRecord = Readonly<Record<string, string>>;
 
-export type GlobFixtureLoader = (this: void) => Promise<string>;
+export type GlobFixtureLoader = (this: void) => Promise<Blob | string>;
 
 export interface GlobFixture {
 	readonly url: URL;
@@ -46,7 +52,11 @@ const globFixtureLoader = (globURL: string): GlobFixtureLoader => {
 	return async () => {
 		const response = await fetchGlobURL(globURL);
 
-		return response.text();
+		const textExtensions = ['.xml', '.csv', '.geojson'];
+		if (textExtensions.some((ext) => globURL.endsWith(ext))) {
+			return response.text();
+		}
+		return response.blob();
 	};
 };
 

diff --git a/packages/common/src/fixtures/select/camel.jpg b/packages/common/src/fixtures/select/camel.jpg
diff --git a/packages/common/src/fixtures/select/tiger.jpg b/packages/common/src/fixtures/select/tiger.jpg
diff --git a/packages/common/src/fixtures/xform-attachments.ts b/packages/common/src/fixtures/xform-attachments.ts
@@ -23,6 +23,11 @@ const xformAttachmentFileExtensions = [
 	'.xml',
 	'.xml.example',
 	'.xlsx',
+	'.png',
+	'.jpg',
+	'.jpeg',
+	'.gif',
+	'.svg',
 ] as const;
 
 type XFormAttachmentFileExtensions = typeof xformAttachmentFileExtensions;
@@ -86,6 +91,23 @@ export class XFormAttachmentFixture {
 				this.mimeType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
 				break;
 
+			case '.png':
+				this.mimeType = 'image/png';
+				break;
+
+			case '.jpg':
+			case '.jpeg':
+				this.mimeType = 'image/jpeg';
+				break;
+
+			case '.gif':
+				this.mimeType = 'image/gif';
+				break;
+
+			case '.svg':
+				this.mimeType = 'image/svg+xml';
+				break;
+
 			default:
 				throw new UnreachableError(fileExtension);
 		}

diff --git a/packages/common/src/fixtures/xforms.ts b/packages/common/src/fixtures/xforms.ts
@@ -78,7 +78,7 @@ const extractURLIdentifier = (remoteUrl: URL): string => {
 	return match?.[1] ?? '';
 };
 
-type LoadXFormXML = () => Promise<string>;
+type LoadXFormXML = () => Promise<Blob | string>;
 
 const xformURLLoader = (url: URL): LoadXFormXML => {
 	return async () => {
@@ -102,7 +102,7 @@ export class XFormResource<Type extends XFormResourceType> {
 				const service = new JRResourceService();
 				const parentPath = localPath.replace(/\/[^/]+$/, '');
 
-				service.activateFixtures(parentPath, ['file', 'file-csv']);
+				service.activateFixtures(parentPath, ['file', 'file-csv', 'images']);
 
 				return service;
 			},

diff --git a/packages/common/src/jr-resources/JRResource.ts b/packages/common/src/jr-resources/JRResource.ts
@@ -1,7 +1,7 @@
 import type { XFormAttachmentFixture } from '../fixtures/xform-attachments.ts';
 import { JRResourceURL } from './JRResourceURL.ts';
 
-type JRResourceLoader = (this: void) => Promise<string>;
+type JRResourceLoader = (this: void) => Promise<Blob | string>;
 
 export interface JRResourceSource {
 	readonly url: JRResourceURL;

diff --git a/packages/scenario/src/jr/resource/ResourcePathHelper.ts b/packages/scenario/src/jr/resource/ResourcePathHelper.ts
@@ -15,11 +15,17 @@ const testFixtures = await Promise.all(
 			return [];
 		}
 
-		return fixture.loadXML().then((fixtureXML) => ({
-			identifier,
-			localPath,
-			fixtureXML,
-		}));
+		return fixture.loadXML().then((fixtureXML) => {
+			if (typeof fixtureXML !== 'string') {
+				throw new Error('Wrong XML Form type. Expected a string');
+			}
+
+			return {
+				identifier,
+				localPath,
+				fixtureXML,
+			};
+		});
 	})
 );
 

diff --git a/packages/scenario/test/calculate.test.ts b/packages/scenario/test/calculate.test.ts
@@ -5,14 +5,17 @@ import {
 	html,
 	input,
 	instance,
+	item,
 	mainInstance,
 	model,
+	select1,
 	t,
 	title,
 } from '@getodk/common/test/fixtures/xform-dsl/index.ts';
 import type { ExpectStatic } from 'vitest';
 import { describe, expect, it } from 'vitest';
 import { intAnswer } from '../src/answer/ExpectedIntAnswer.ts';
+import { stringAnswer } from '../src/answer/ExpectedStringAnswer.ts';
 import { Scenario } from '../src/jr/Scenario.ts';
 
 describe('TriggerableDagTest.java', () => {
@@ -164,3 +167,75 @@ describe('MultiplePredicateTest.java', () => {
 		});
 	});
 });
+
+describe('jr:itext function in calculate expressions', () => {
+	it('should retrieve the correct itext value', async () => {
+		const scenario = await Scenario.init(
+			'Itext with calculation',
+			html(
+				head(
+					title('Itext with calculation'),
+					model(
+						mainInstance(
+							t('data id="dynamic-choices-predicates"', t('country'), t('city'), t('city_name'))
+						),
+
+						t(
+							'itext',
+							t(
+								'translation lang="default"',
+								t('text id="static_instance-cities-0"', t('value', 'Montreal')),
+								t('text id="static_instance-cities-1"', t('value', 'Marseille'))
+							),
+							t(
+								'translation lang="es"',
+								t('text id="static_instance-cities-0"', t('value', 'Montréal')),
+								t('text id="static_instance-cities-1"', t('value', 'Marsella'))
+							)
+						),
+
+						t(
+							'instance id="cities"',
+							t(
+								'root',
+								t(
+									'item',
+									t('itextId', 'static_instance-cities-0'),
+									t('name', 'montreal'),
+									t('country', 'canada')
+								),
+								t(
+									'item',
+									t('itextId', 'static_instance-cities-1'),
+									t('name', 'marseille'),
+									t('country', 'france')
+								)
+							)
+						),
+						bind('/data/country').type('string'),
+						bind('/data/city_name')
+							.type('string')
+							.calculate(
+								"if(/data/country ='canada', jr:itext(instance('cities')/root/item[name='montreal']/itextId), jr:itext(instance('cities')/root/item[name='marseille']/itextId))"
+							)
+					)
+				),
+				body(select1('/data/country', item('canada', 'Canada'), item('france', 'France')))
+			)
+		);
+
+		scenario.answer('/data/country', 'france');
+		expect(scenario.answerOf('/data/city_name')).toEqualAnswer(stringAnswer('Marseille'));
+
+		scenario.answer('/data/country', 'canada');
+		expect(scenario.answerOf('/data/city_name')).toEqualAnswer(stringAnswer('Montreal'));
+
+		scenario.setLanguage('es');
+
+		scenario.answer('/data/country', 'france');
+		expect(scenario.answerOf('/data/city_name')).toEqualAnswer(stringAnswer('Marsella'));
+
+		scenario.answer('/data/country', 'canada');
+		expect(scenario.answerOf('/data/city_name')).toEqualAnswer(stringAnswer('Montréal'));
+	});
+});
diff --git a/packages/web-forms/src/demo/FormPreview.vue b/packages/web-forms/src/demo/FormPreview.vue
@@ -42,6 +42,10 @@ if (route.query.url) {
 xformResource
 	?.loadXML()
 	.then((formXML) => {
+		if (typeof formXML !== 'string') {
+			throw new Error('Wrong XML Form type. Expected a string');
+		}
+
 		formPreviewState.value = {
 			formXML,
 			fetchFormAttachment: xformResource.fetchFormAttachment,

diff --git a/packages/web-forms/tests/helpers.ts b/packages/web-forms/tests/helpers.ts
@@ -31,7 +31,12 @@ export const getWebFormsTestFixture = (identifier: string): Promise<string> => {
 		throw new Error(`Could not find web-forms test fixture with identifier: ${identifier}`);
 	}
 
-	return fixture.loadXML();
+	return fixture.loadXML().then((xml) => {
+		if (typeof xml !== 'string') {
+			throw new Error('Wrong XML Form type. Expected a string');
+		}
+		return xml;
+	});
 };
 
 export const getFormXml = (fileName: string): Promise<string> => {
@@ -41,7 +46,12 @@ export const getFormXml = (fileName: string): Promise<string> => {
 		throw new Error(`Could not find fixture with file name: ${fileName}`);
 	}
 
-	return fixture.loadXML();
+	return fixture.loadXML().then((xml) => {
+		if (typeof xml !== 'string') {
+			throw new Error('Wrong XML Form type. Expected a string');
+		}
+		return xml;
+	});
 };
 
 export const getReactiveForm = async (formPath: string): Promise<RootNode> => {

diff --git a/packages/xforms-engine/src/client/SelectNode.ts b/packages/xforms-engine/src/client/SelectNode.ts
@@ -19,6 +19,8 @@ export interface SelectItem {
 export type SelectValueOptions = readonly SelectItem[];
 
 export interface SelectNodeState extends BaseValueNodeState<readonly string[]> {
+	get isSelectWithImages(): boolean;
+
 	get children(): null;
 
 	get valueOptions(): readonly SelectItem[];

diff --git a/packages/xforms-engine/src/client/TextRange.ts b/packages/xforms-engine/src/client/TextRange.ts
@@ -1,5 +1,5 @@
+import { JRResourceURL } from '@getodk/common/jr-resources/JRResourceURL.ts';
 import type { ActiveLanguage } from './FormLanguage.ts';
-import type { RootNodeState } from './RootNode.ts';
 
 /**
  * **COMMENTARY**
@@ -156,4 +156,8 @@ export interface TextRange<Role extends TextRole, Origin extends TextOrigin = Te
 
 	get asString(): string;
 	get formatted(): unknown;
+
+	get imageSource(): JRResourceURL | undefined;
+	get audioSource(): JRResourceURL | undefined;
+	get videoSource(): JRResourceURL | undefined;
 }
diff --git a/packages/xforms-engine/src/instance/SelectControl.ts b/packages/xforms-engine/src/instance/SelectControl.ts
@@ -51,6 +51,7 @@ interface SelectControlStateSpec extends ValueNodeStateSpec<readonly string[]> {
 	readonly label: Accessor<TextRange<'label'> | null>;
 	readonly hint: Accessor<TextRange<'hint'> | null>;
 	readonly valueOptions: Accessor<SelectValueOptions>;
+	readonly isSelectWithImages: Accessor<boolean>;
 }
 
 export class SelectControl
@@ -109,6 +110,10 @@ export class SelectControl
 
 		const valueOptions = createItemCollection(this);
 
+		const isSelectWithImages = this.scope.runTask(() => {
+			return createMemo(() => valueOptions().some((item) => !!item.label.imageSource));
+		});
+
 		const mapOptionsByValue: Accessor<SelectItemMap> = this.scope.runTask(() => {
 			return createMemo(() => {
 				return new Map(valueOptions().map((item) => [item.value, item]));
@@ -150,6 +155,7 @@ export class SelectControl
 				valueOptions,
 				value: valueState,
 				instanceValue: this.getInstanceValue,
+				isSelectWithImages,
 			},
 			this.instanceConfig
 		);

diff --git a/packages/xforms-engine/src/instance/text/TextRange.ts b/packages/xforms-engine/src/instance/text/TextRange.ts
@@ -1,3 +1,4 @@
+import { JRResourceURL } from '@getodk/common/jr-resources/JRResourceURL.ts';
 import type {
 	TextRange as ClientTextRange,
 	TextChunk,
@@ -6,6 +7,12 @@ import type {
 } from '../../client/TextRange.ts';
 import { FormattedTextStub } from './FormattedTextStub.ts';
 
+export interface MediaSources {
+	image?: JRResourceURL;
+	video?: JRResourceURL;
+	audio?: JRResourceURL;
+}
+
 export class TextRange<Role extends TextRole, Origin extends TextOrigin>
 	implements ClientTextRange<Role, Origin>
 {
@@ -21,9 +28,22 @@ export class TextRange<Role extends TextRole, Origin extends TextOrigin>
 		return this.chunks.map((chunk) => chunk.asString).join('');
 	}
 
+	get imageSource(): JRResourceURL | undefined {
+		return this.mediaSources?.image;
+	}
+
+	get audioSource(): JRResourceURL | undefined {
+		return this.mediaSources?.audio;
+	}
+
+	get videoSource(): JRResourceURL | undefined {
+		return this.mediaSources?.video;
+	}
+
 	constructor(
 		readonly origin: Origin,
 		readonly role: Role,
-		protected readonly chunks: readonly TextChunk[]
+		protected readonly chunks: readonly TextChunk[],
+		protected readonly mediaSources?: MediaSources
 	) {}
 }