@yuneta/gobj-ui 7.23.58 → 7.23.60

package/dist/gobj-ui.cjs.js

@@ -5832,6 +5832,414 @@ function register_c_yui_wizard() {
 	return create_gclass$17(GCLASS_NAME$17);
 }
 //#endregion
+//#region src/yui_file_field.js
+/***********************************************************************
+*          yui_file_field.js
+*
+*      The control that PICKS a file for a treedb `file` column, and the
+*      manifest that carries its bytes beside the record.
+*
+*      A column flagged ['fkey','file'] holds an fkey into the treedb's
+*      system topic `__assets__`: the bytes live on disk under the treedb,
+*      the index in memory, and the record names the asset by its sha256.
+*      So this control does NOT put a file in the record. It keeps the
+*      `File` the person picked and hands up an IDENTITY, and the bytes
+*      travel beside the record in a `__files__` manifest keyed by column.
+*
+*      Three things about that are not obvious and are the whole reason
+*      this module is separate:
+*
+*      - **The file is read at SAVE, not at pick.** An `<input type=file>`
+*        hands over a `File`, which is a REFERENCE and not the bytes.
+*        Picking shows a name and a size and reads nothing, so cancelling
+*        a form does not mean a 40 MB video was read for nothing.
+*      - **A `File` cannot travel in a kw.** A kw is plain json -- the
+*        machine trace serialises it -- and a `File` is a host object. The
+*        form KEEPS it and the host asks for it through a local method.
+*      - **Reading is a promise, so saving stops being synchronous**, and
+*        a resolved promise is an OS notification that must enter the
+*        machine as an EVENT, never as a chain of callbacks. That is the
+*        HOST's business; what lives here is the promise it awaits.
+*
+*      The pure half (manifest, size, sha256, the name of a picked file)
+*      is tested without a DOM; the DOM half builds the control.
+*
+*      Using Bulma Framework (https://bulma.io)
+*
+*          Copyright (c) 2026, ArtGins.
+*          All Rights Reserved.
+***********************************************************************/
+var YUI_FILE_ACCEPT = [
+	"image/jpeg",
+	"image/png",
+	"image/webp",
+	"image/gif",
+	"application/pdf",
+	"video/mp4",
+	"video/webm",
+	"video/quicktime",
+	"video/ogg",
+	"video/x-matroska",
+	"audio/mpeg",
+	"audio/mp4",
+	"audio/ogg",
+	"audio/wav",
+	"audio/webm",
+	"audio/flac"
+].join(",");
+/***************************
+*      The pure half
+***************************/
+/***************************************************************************
+*  A size a person reads. Bytes up to 1 KB, then one decimal.
+***************************************************************************/
+function yui_file_size_label(bytes) {
+	let n = Number(bytes);
+	if (!isFinite(n) || n < 0) return "";
+	if (n < 1024) return `${n} B`;
+	const units = [
+		"KB",
+		"MB",
+		"GB",
+		"TB"
+	];
+	let i = -1;
+	do {
+		n = n / 1024;
+		i++;
+	} while (n >= 1024 && i < units.length - 1);
+	return `${n.toFixed(1)} ${units[i]}`;
+}
+/***************************************************************************
+*  The sha256 of an ArrayBuffer, lowercase hex, or null.
+*
+*  NULL is a legal answer and not a failure: `crypto.subtle` exists only
+*  in a SECURE CONTEXT, so a dev server on plain http has none. Then the
+*  record carries no id and treedb fills it -- the write path hashes what
+*  arrives anyway, because it never trusts the client's id. What the hash
+*  buys here is an integrity check the backend can make (a wrong id with
+*  good bytes is refused), not the identity itself.
+***************************************************************************/
+async function yui_file_sha256(buffer) {
+	const subtle = typeof crypto !== "undefined" && crypto.subtle;
+	if (!subtle) return null;
+	try {
+		const digest = await subtle.digest("SHA-256", buffer);
+		return Array.from(new Uint8Array(digest)).map((b) => b.toString(16).padStart(2, "0")).join("");
+	} catch (e) {
+		(0, _yuneta_gobj_js.log_error)(`cannot hash the picked file: ${e && e.message ? e.message : e}`);
+		return null;
+	}
+}
+/***************************************************************************
+*  base64 of an ArrayBuffer.
+*
+*  In chunks because `String.fromCharCode(...bytes)` spreads the whole
+*  array onto the call stack, and a few hundred KB is already a
+*  RangeError -- which for a file picker is every file that matters.
+***************************************************************************/
+function yui_array_buffer_to_base64(buffer) {
+	const bytes = new Uint8Array(buffer);
+	const CHUNK = 32768;
+	let binary = "";
+	for (let i = 0; i < bytes.length; i += CHUNK) binary += String.fromCharCode.apply(null, bytes.subarray(i, i + CHUNK));
+	return btoa(binary);
+}
+/***************************************************************************
+*  Read ONE picked file into what the manifest carries.
+*
+*      -> {content64, content_type, original_name, size, id}
+*
+*  `id` is the sha256 when it could be computed, and "" when it could
+*  not. Nothing else in here is optional: treedb checks the size on the
+*  base64 before decoding it, and the type against the BYTES.
+***************************************************************************/
+async function yui_file_read(file) {
+	const buffer = await file.arrayBuffer();
+	const id = await yui_file_sha256(buffer);
+	return {
+		content64: yui_array_buffer_to_base64(buffer),
+		content_type: file.type || "",
+		original_name: file.name || "",
+		size: file.size,
+		id: id || ""
+	};
+}
+/***************************************************************************
+*  The write a record with picked files becomes.
+*
+*      picks   {col: read}   what yui_file_read() answered, per column
+*      record  the record the form collected (MODIFIED: each picked
+*              column takes the id, or "" when there is none)
+*
+*      -> {record, __files__}
+*
+*  `__files__` is not a column: it is an instruction to the write path,
+*  consumed and dropped at the door. The bytes never go INSIDE the
+*  column -- a field that CARRIES the bytes and a field that KEEPS them
+*  are one word apart and 460 MB of RAM apart.
+***************************************************************************/
+function yui_files_manifest(picks, record) {
+	const out = record || {};
+	const manifest = {};
+	Object.keys(picks || {}).forEach((col) => {
+		const read = picks[col];
+		if (!read) return;
+		manifest[col] = {
+			content64: read.content64,
+			content_type: read.content_type,
+			original_name: read.original_name
+		};
+		out[col] = read.id || "";
+	});
+	return {
+		record: out,
+		__files__: manifest
+	};
+}
+/***************************
+*      The DOM half
+***************************/
+/***************************************************************************
+*  What the control shows for what the column HOLDS today: the asset id,
+*  shortened. A sha256 in full is 64 characters of noise in a form.
+***************************************************************************/
+function yui_file_id_label(id) {
+	if (!id) return "";
+	return id.length > 16 ? `${id.slice(0, 8)}…${id.slice(-4)}` : id;
+}
+/***************************************************************************
+*  The control for a `file` column.
+*
+*      name        the column
+*      value       the asset id the record holds today ("" when none)
+*      readonly    draw it, do not let it change
+*      on_pick     (file|null) -> void. NULL is "the person cleared it".
+*
+*  Returns the `<div class="control">` content, and hangs the state the
+*  form reads off the returned element:
+*
+*      $control.yui_file        the picked File, or null
+*      $control.yui_file_value  the id the column keeps ("" = cleared)
+*
+*  The `<input type="file">` is hidden and driven by a button, because a
+*  bare file input cannot be styled and says "Sin archivos seleccionados"
+*  in the browser's own language, not the app's.
+***************************************************************************/
+function yui_file_control(gobj, { name, value, readonly, accept, on_pick }) {
+	const has_asset = !!value;
+	const $input = (0, _yuneta_gobj_js.createElement2)(["input", {
+		type: "file",
+		class: "FILE_INPUT",
+		name: `${name}__file`,
+		accept: accept || YUI_FILE_ACCEPT,
+		hidden: ""
+	}]);
+	const $pick = (0, _yuneta_gobj_js.createElement2)([
+		"button",
+		{
+			type: "button",
+			class: "FILE_PICK button is-small",
+			"data-i18n-title": "choose a file",
+			"aria-label": "choose a file"
+		},
+		[["span", { class: "FILE_PICK_ICON yi-upload" }], [
+			"span",
+			{
+				class: "FILE_PICK_LABEL",
+				i18n: "choose a file"
+			},
+			"choose a file"
+		]]
+	]);
+	const $clear = (0, _yuneta_gobj_js.createElement2)([
+		"button",
+		{
+			type: "button",
+			class: "FILE_CLEAR button is-small",
+			"data-i18n-title": "remove the file",
+			"aria-label": "remove the file"
+		},
+		[["span", { class: "FILE_CLEAR_ICON yi-trash" }]]
+	]);
+	const $name = (0, _yuneta_gobj_js.createElement2)(["span", { class: "FILE_NAME" }]);
+	const $size = (0, _yuneta_gobj_js.createElement2)(["span", { class: "FILE_SIZE" }]);
+	const $state = (0, _yuneta_gobj_js.createElement2)(["span", { class: "FILE_STATE" }]);
+	const $control = (0, _yuneta_gobj_js.createElement2)([
+		"div",
+		{ class: "FILE_FIELD" },
+		[
+			$input,
+			$pick,
+			$name,
+			$size,
+			$state,
+			$clear
+		]
+	]);
+	$control.yui_file = null;
+	$control.yui_file_value = value || "";
+	const render = () => {
+		const picked = $control.yui_file;
+		const kept = $control.yui_file_value;
+		$name.textContent = picked ? picked.name || "" : yui_file_id_label(kept);
+		$size.textContent = picked ? yui_file_size_label(picked.size) : "";
+		$state.className = "FILE_STATE";
+		$state.removeAttribute("data-i18n");
+		$state.textContent = "";
+		if (picked) {
+			$state.classList.add("is-picked");
+			$state.setAttribute("data-i18n", "not saved yet");
+			$state.textContent = "not saved yet";
+		} else if (!kept) {
+			$state.classList.add("is-empty");
+			$state.setAttribute("data-i18n", "no file");
+			$state.textContent = "no file";
+		}
+		$clear.hidden = readonly || !picked && !kept;
+		$pick.hidden = !!readonly;
+	};
+	if (!readonly) {
+		$pick.addEventListener("click", () => {
+			$input.click();
+		});
+		$input.addEventListener("change", () => {
+			const file = $input.files && $input.files.length ? $input.files[0] : null;
+			$control.yui_file = file;
+			render();
+			if (on_pick) on_pick(file);
+		});
+		$clear.addEventListener("click", () => {
+			$control.yui_file = null;
+			$control.yui_file_value = "";
+			$input.value = "";
+			render();
+			if (on_pick) on_pick(null);
+		});
+	}
+	$control.yui_file_render = render;
+	render();
+	return {
+		$control,
+		$input,
+		has_asset
+	};
+}
+//#endregion
+//#region src/yui_asset.js
+function ref_to_id(ref) {
+	if (!ref) return null;
+	if (typeof ref === "string") {
+		if (ref.indexOf("^") < 0) return ref;
+		const parts = ref.split("^");
+		return parts.length >= 2 && parts[1] ? parts[1] : null;
+	}
+	if (typeof ref === "object" && typeof ref.id === "string") return ref.id;
+	return null;
+}
+/***************************************************************************
+*  Every asset id a column names, in order. Always an array, possibly empty.
+***************************************************************************/
+function yui_asset_ids(ref) {
+	if (Array.isArray(ref)) return ref.map(ref_to_id).filter((id) => !!id);
+	const id = ref_to_id(ref);
+	return id ? [id] : [];
+}
+/***************************************************************************
+*  The first asset id a column names, or null.
+***************************************************************************/
+function yui_asset_id(ref) {
+	const ids = yui_asset_ids(ref);
+	return ids.length ? ids[0] : null;
+}
+/***************************************************************************
+*  Turn a `get-asset` answer into something an element can load.
+*
+*  Returns null when the answer carries neither -- which the caller must
+*  treat as "missing", never as an empty src: an <img src=""> reloads the
+*  PAGE in some browsers.
+***************************************************************************/
+function yui_asset_src(answer) {
+	if (!answer) return null;
+	if (answer.mode === "url" && answer.url) return answer.url;
+	if (answer.mode === "inline" && answer.content64) return `data:${answer.content_type || "application/octet-stream"};base64,${answer.content64}`;
+	return null;
+}
+/***************************************************************************
+*  The marker for an asset that is not there.
+*
+*  A missing image used to leave a broken box and no word about it, which
+*  is indistinguishable from a slow one and from a bug.  This says so, and
+*  it says WHICH: `detail` is data (a name, a path) and is never
+*  translated, while the label carries its i18n key so a language change
+*  re-translates it.
+***************************************************************************/
+function yui_asset_missing(detail, opts = {}) {
+	const key = opts.key || "asset not available";
+	const children = [["span", { class: "ASSET_MISSING_ICON yi-triangle-exclamation" }], [
+		"span",
+		{
+			class: "ASSET_MISSING_LABEL",
+			i18n: key
+		},
+		key
+	]];
+	if (detail) children.push([
+		"span",
+		{ class: "ASSET_MISSING_DETAIL" },
+		String(detail)
+	]);
+	const attrs = { class: `ASSET_MISSING ${opts.class || ""}`.trim() };
+	if (detail) attrs.title = String(detail);
+	else attrs["data-i18n-title"] = key;
+	return (0, _yuneta_gobj_js.createElement2)([
+		"div",
+		attrs,
+		children
+	]);
+}
+/***************************************************************************
+*  The element for one asset.
+*
+*  The KIND comes from the content type the backend stored, not from the
+*  name a person typed: video and audio are assets too, and an <img> whose
+*  src is a film shows the broken box this module exists to remove.
+*
+*  `detail` is what the missing marker shows -- pass the original name or
+*  the source path, the thing a person can act on.
+***************************************************************************/
+function yui_asset_element(answer, opts = {}) {
+	const src = yui_asset_src(answer);
+	if (!src) return yui_asset_missing(opts.detail, opts);
+	const ct = (answer.content_type || "").toLowerCase();
+	const cls = `ASSET_MEDIA ${opts.class || ""}`.trim();
+	let el;
+	if (ct.startsWith("video/")) el = (0, _yuneta_gobj_js.createElement2)(["video", {
+		class: cls,
+		controls: "",
+		preload: "metadata"
+	}]);
+	else if (ct.startsWith("audio/")) el = (0, _yuneta_gobj_js.createElement2)(["audio", {
+		class: cls,
+		controls: "",
+		preload: "metadata"
+	}]);
+	else {
+		el = (0, _yuneta_gobj_js.createElement2)(["img", {
+			class: cls,
+			loading: "lazy"
+		}]);
+		el.alt = opts.alt || opts.detail || "";
+	}
+	el.src = src;
+	el.onerror = () => {
+		(0, _yuneta_gobj_js.log_error)(`asset could not be loaded: ${opts.detail || src}`);
+		const $marker = yui_asset_missing(opts.detail, opts);
+		if (el.parentNode) el.parentNode.replaceChild($marker, el);
+	};
+	return el;
+}
+//#endregion
 //#region src/yui_inputs.js
 /***************************************************************
 *  The ✕ shows only when there is something to clear AND the field
@@ -6361,13 +6769,7 @@ var attrs_table$16 = [
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "with_checkbox", 0, false, "Show a first column with checkbox to select rows"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "with_rownum", 0, false, "Print first column with row number"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_BOOLEAN, "with_delete_row_btn", 0, false, "Print last column with delete row button"),
-	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_JSON, "toolbar", 0, [
-		"save",
-		"undo",
-		"clear",
-		"copy",
-		"paste"
-	], "Toolbar buttons to show, in order: save, undo, clear, copy, paste. [] hides the toolbar"),
+	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_JSON, "toolbar", 0, DEFAULT_TOOLBAR.slice(), "Toolbar buttons to show. The order inside each group is the order given here; which side each group takes is form_toolbar_plan.js. [] hides the toolbar"),
 	(0, _yuneta_gobj_js.SDATA)(_yuneta_gobj_js.data_type_t.DTP_JSON, "tabulator_settings", 0, {
 		layout: "fitDataFill",
 		validationMode: "highlight",
@@ -6546,7 +6948,7 @@ function toolbar_button$1(gobj, name) {
 		case "clear": return [
 			"button",
 			{
-				class: "button p-1",
+				class: "button p-1 button-clear",
 				title: "clear",
 				"aria-label": "clear"
 			},
@@ -6570,7 +6972,7 @@ function toolbar_button$1(gobj, name) {
 		case "copy": return [
 			"button",
 			{
-				class: "button p-1",
+				class: "button p-1 button-copy",
 				title: "copy",
 				"aria-label": "copy"
 			},
@@ -6594,7 +6996,7 @@ function toolbar_button$1(gobj, name) {
 		case "paste": return [
 			"button",
 			{
-				class: "button p-1",
+				class: "button p-1 button-paste",
 				title: "paste",
 				"aria-label": "paste"
 			},
@@ -6811,6 +7213,9 @@ function build_form_field_conf(gobj, field_desc) {
 			field_conf.tag = "select2";
 			field_conf.options = get_fkey_select_options(gobj, field_desc);
 			break;
+		case "file":
+			field_conf.tag = "file";
+			break;
 		case "image":
 		case "icon":
 		case "string":
@@ -7496,6 +7901,17 @@ function create_form_field(gobj, $form, prefix, field_desc, { tag, inputType, na
 			$control.appendChild($extend);
 			break;
 		}
+		case "file":
+			$extend = yui_file_control(gobj, {
+				name,
+				value: "",
+				readonly,
+				on_pick: function() {
+					(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_RECORD_CHANGED", {}, gobj);
+				}
+			}).$control;
+			$control.appendChild($extend);
+			break;
 		default:
 			$extend = (0, _yuneta_gobj_js.createElement2)([
 				"strong",
@@ -7996,6 +8412,9 @@ function get_form_values(gobj, $form) {
 			case "radio":
 				value = getInputValue($input);
 				break;
+			case "file":
+				value = $input.yui_file_value || "";
+				break;
 			case "jsoneditor":
 				let jsoneditor = $input.jsoneditor;
 				if (jsoneditor) {
@@ -8052,6 +8471,13 @@ function clear_data(gobj, $form) {
 			else $input.value = null;
 		}
 	});
+	$form.querySelectorAll(".FILE_FIELD").forEach(($file) => {
+		$file.yui_file = null;
+		$file.yui_file_value = "";
+		let $picker = $file.querySelector(".FILE_INPUT");
+		if ($picker) $picker.value = "";
+		if ($file.yui_file_render) $file.yui_file_render();
+	});
 	$form.querySelectorAll(".yui-tabulator-table").forEach(($table) => {
 		if ($table.tabulator.initialized) $table.tabulator.clearData();
 		$table.querySelectorAll(".yui-tabulator-table-nested").forEach(($table_nested) => {
@@ -8121,6 +8547,11 @@ function set_form_values(gobj, template, $form, record) {
 		value = treedb_value_2_form_value(gobj, field_desc, value);
 		if (value === void 0) value = null;
 		switch (tag) {
+			case "file":
+				$input.yui_file = null;
+				$input.yui_file_value = yui_asset_id(value) || "";
+				if ($input.yui_file_render) $input.yui_file_render();
+				break;
 			case "input":
 				switch (input_type) {
 					case "datetime-local":
@@ -8549,11 +8980,63 @@ function ac_timeout(gobj, event, kw, src) {
 /***************************
 *          FSM
 ***************************/
+/************************************************************
+*      Framework Method command
+************************************************************/
+function mt_command_parser$2(gobj, command, kw, src) {
+	switch (command) {
+		case "get_picked_files": return cmd_get_picked_files(gobj, command, kw, src);
+		default:
+			(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: command not found: ${command}`);
+			return {
+				result: -1,
+				comment: `Command not found: ${command}`,
+				schema: null,
+				data: null
+			};
+	}
+}
+/************************************************************
+*  The files a person picked and the record cannot carry.
+*
+*  A `File` is a host object and a kw is plain json -- the machine trace
+*  serialises it -- so the picked files never travel in an event. The
+*  form KEEPS them and the HOST asks for them here, at save, and turns
+*  them into the `__files__` manifest that rides beside the record.
+*
+*  Answers `data: {col: File}`, empty when nothing was picked, which is
+*  the ordinary case and not an error.
+************************************************************/
+function cmd_get_picked_files(gobj, cmd, kw, src) {
+	const files = {};
+	const $container = (0, _yuneta_gobj_js.gobj_read_attr)(gobj, "$container");
+	const $form = $container ? $container.querySelector("form") : null;
+	if (!$form) {
+		(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: no form to read the picked files from`);
+		return {
+			result: -1,
+			comment: "no form",
+			schema: null,
+			data: null
+		};
+	}
+	$form.querySelectorAll(".yui-form-data-input").forEach(($input) => {
+		if ($input.dataset.form_tag !== "file") return;
+		if ($input.yui_file) files[$input.dataset.treedb_name] = $input.yui_file;
+	});
+	return {
+		result: 0,
+		comment: "",
+		schema: null,
+		data: files
+	};
+}
 var gmt$16 = {
 	mt_create: mt_create$16,
 	mt_start: mt_start$15,
 	mt_stop: mt_stop$15,
-	mt_destroy: mt_destroy$16
+	mt_destroy: mt_destroy$16,
+	mt_command_parser: mt_command_parser$2
 };
 /***************************************************************
 *          Create the GClass
@@ -23996,6 +24479,9 @@ function create_tabulator(gobj) {
 				vertAlign = "middle";
 				colFormatter = icon_formatter;
 				break;
+			case "file":
+				colFormatter = file_cell_formatter;
+				break;
 			case "object":
 			case "dict":
 			case "template":
@@ -24240,6 +24726,33 @@ function table__destroy(gobj) {
 *  render a solid square -- a glyph nobody recognises rather
 *  than a mistake somebody can fix.
 ************************************************************/
+/************************************************************
+*  What a `file` column shows in a table cell: the asset it names.
+*
+*  A sha256 in full is 64 characters of noise in a column, so it is
+*  shortened and the whole of it is the tooltip. Empty is SAID, not left
+*  blank -- a blank cell and a cell whose asset failed to load look the
+*  same, and only one of them is normal.
+************************************************************/
+function file_cell_formatter(cell, formatterParams, onRendered) {
+	const id = yui_asset_id(cell.getValue());
+	if (!id) return (0, _yuneta_gobj_js.createElement2)([
+		"span",
+		{
+			class: "FILE_CELL is-empty",
+			"data-i18n": "no file"
+		},
+		"no file"
+	]);
+	return (0, _yuneta_gobj_js.createElement2)([
+		"span",
+		{
+			class: "FILE_CELL",
+			title: id
+		},
+		yui_file_id_label(id)
+	]);
+}
 function icon_formatter(cell) {
 	let name = cell.getValue();
 	if (!(0, _yuneta_gobj_js.is_string)(name) || (0, _yuneta_gobj_js.empty_string)(name)) return "";
@@ -24335,6 +24848,7 @@ function transform__treedb_value_2_table_value(gobj, col, value, row, field) {
 			].join("");
 			else value = "";
 			break;
+		case "file":
 		case "fkey":
 			let new_value = [];
 			if (value) {
@@ -24859,6 +25373,7 @@ function transform__form_value_2_treedb_value(gobj, col, value, operation) {
 		case "hook":
 			value = null;
 			break;
+		case "file": break;
 		case "fkey":
 			value = build_fkey_ref(gobj, col, value);
 			break;
@@ -25342,13 +25857,71 @@ function ac_paste_rows(gobj, event, kw, src) {
 function ac_form_save_record(gobj, event, kw, src) {
 	if (refuse_if_readonly$2(gobj, event)) return -1;
 	let mode = (0, _yuneta_gobj_js.gobj_read_str_attr)(src, "form_mode");
-	(0, _yuneta_gobj_js.gobj_publish_event)(gobj, mode === "create" ? "EV_CREATE_RECORD" : "EV_UPDATE_RECORD", {
+	let picked = {};
+	const answer = (0, _yuneta_gobj_js.gobj_command)(src, "get_picked_files", {}, gobj);
+	if (answer && answer.result >= 0 && answer.data) picked = answer.data;
+	const cols = Object.keys(picked);
+	if (cols.length === 0) {
+		publish_treedb_write(gobj, mode, kw);
+		setTimeout(function() {
+			close_form_dialog(gobj);
+		}, 0);
+		return 0;
+	}
+	Promise.all(cols.map((col) => {
+		return yui_file_read(picked[col]).then((read) => {
+			return {
+				col,
+				read
+			};
+		});
+	})).then((reads) => {
+		const picks = {};
+		reads.forEach((r) => {
+			picks[r.col] = r.read;
+		});
+		(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_FILES_READ", {
+			mode,
+			record: kw,
+			picks
+		}, gobj);
+	}).catch((e) => {
+		(0, _yuneta_gobj_js.gobj_send_event)(gobj, "EV_FILES_FAILED", { reason: e && e.message ? e.message : String(e) }, gobj);
+	});
+	return 0;
+}
+/************************************************************
+*  The one place a write of this view leaves for the app.
+************************************************************/
+function publish_treedb_write(gobj, mode, record, jn_files) {
+	const kw_write = {
 		topic_name: (0, _yuneta_gobj_js.gobj_read_str_attr)(gobj, "topic_name"),
-		record: kw
+		record
+	};
+	if (jn_files && Object.keys(jn_files).length > 0) kw_write.record.__files__ = jn_files;
+	(0, _yuneta_gobj_js.gobj_publish_event)(gobj, mode === "create" ? "EV_CREATE_RECORD" : "EV_UPDATE_RECORD", kw_write);
+}
+/************************************************************
+*  {mode, record, picks} -- the bytes are here now
+************************************************************/
+function ac_files_read(gobj, event, kw, src) {
+	const { record, __files__ } = yui_files_manifest(kw.picks, kw.record);
+	publish_treedb_write(gobj, kw.mode, record, __files__);
+	close_form_dialog(gobj);
+	return 0;
+}
+/************************************************************
+*  {reason} -- the browser could not read what was picked
+*
+*  The form stays OPEN: the record is still there, and closing it would
+*  throw away what the person typed for a failure that is not theirs.
+************************************************************/
+function ac_files_failed(gobj, event, kw, src) {
+	(0, _yuneta_gobj_js.log_error)(`${(0, _yuneta_gobj_js.gobj_short_name)(gobj)}: cannot read the picked file: ${kw.reason}`);
+	yui_shell_confirm_ok(yui_shell_of(gobj), "cannot read the picked file", {
+		t: i18next.t,
+		ok_label: "accept"
 	});
-	setTimeout(function() {
-		close_form_dialog(gobj);
-	}, 0);
 	return 0;
 }
 /************************************************************
@@ -25867,6 +26440,16 @@ function create_gclass$5(gclass_name) {
 			ac_form_save_record,
 			null
 		],
+		[
+			"EV_FILES_READ",
+			ac_files_read,
+			null
+		],
+		[
+			"EV_FILES_FAILED",
+			ac_files_failed,
+			null
+		],
 		[
 			"EV_NEW_ROW",
 			ac_new_row,
@@ -26001,6 +26584,8 @@ function create_gclass$5(gclass_name) {
 		["EV_NODE_DELETED", 0],
 		["EV_EDITION_MODE", 0],
 		["EV_SAVE_RECORD", 0],
+		["EV_FILES_READ", 0],
+		["EV_FILES_FAILED", 0],
 		["EV_NEW_ROW", 0],
 		["EV_DELETE_ROWS", 0],
 		["EV_COPY_ROWS", 0],
@@ -67513,120 +68098,6 @@ function register_c_yui_period() {
 	return create_gclass(GCLASS_NAME);
 }
 //#endregion
-//#region src/yui_asset.js
-function ref_to_id(ref) {
-	if (!ref) return null;
-	if (typeof ref === "string") {
-		if (ref.indexOf("^") < 0) return ref;
-		const parts = ref.split("^");
-		return parts.length >= 2 && parts[1] ? parts[1] : null;
-	}
-	if (typeof ref === "object" && typeof ref.id === "string") return ref.id;
-	return null;
-}
-/***************************************************************************
-*  Every asset id a column names, in order. Always an array, possibly empty.
-***************************************************************************/
-function yui_asset_ids(ref) {
-	if (Array.isArray(ref)) return ref.map(ref_to_id).filter((id) => !!id);
-	const id = ref_to_id(ref);
-	return id ? [id] : [];
-}
-/***************************************************************************
-*  The first asset id a column names, or null.
-***************************************************************************/
-function yui_asset_id(ref) {
-	const ids = yui_asset_ids(ref);
-	return ids.length ? ids[0] : null;
-}
-/***************************************************************************
-*  Turn a `get-asset` answer into something an element can load.
-*
-*  Returns null when the answer carries neither -- which the caller must
-*  treat as "missing", never as an empty src: an <img src=""> reloads the
-*  PAGE in some browsers.
-***************************************************************************/
-function yui_asset_src(answer) {
-	if (!answer) return null;
-	if (answer.mode === "url" && answer.url) return answer.url;
-	if (answer.mode === "inline" && answer.content64) return `data:${answer.content_type || "application/octet-stream"};base64,${answer.content64}`;
-	return null;
-}
-/***************************************************************************
-*  The marker for an asset that is not there.
-*
-*  A missing image used to leave a broken box and no word about it, which
-*  is indistinguishable from a slow one and from a bug.  This says so, and
-*  it says WHICH: `detail` is data (a name, a path) and is never
-*  translated, while the label carries its i18n key so a language change
-*  re-translates it.
-***************************************************************************/
-function yui_asset_missing(detail, opts = {}) {
-	const key = opts.key || "asset not available";
-	const children = [["span", { class: "ASSET_MISSING_ICON yi-triangle-exclamation" }], [
-		"span",
-		{
-			class: "ASSET_MISSING_LABEL",
-			i18n: key
-		},
-		key
-	]];
-	if (detail) children.push([
-		"span",
-		{ class: "ASSET_MISSING_DETAIL" },
-		String(detail)
-	]);
-	const attrs = { class: `ASSET_MISSING ${opts.class || ""}`.trim() };
-	if (detail) attrs.title = String(detail);
-	else attrs["data-i18n-title"] = key;
-	return (0, _yuneta_gobj_js.createElement2)([
-		"div",
-		attrs,
-		children
-	]);
-}
-/***************************************************************************
-*  The element for one asset.
-*
-*  The KIND comes from the content type the backend stored, not from the
-*  name a person typed: video and audio are assets too, and an <img> whose
-*  src is a film shows the broken box this module exists to remove.
-*
-*  `detail` is what the missing marker shows -- pass the original name or
-*  the source path, the thing a person can act on.
-***************************************************************************/
-function yui_asset_element(answer, opts = {}) {
-	const src = yui_asset_src(answer);
-	if (!src) return yui_asset_missing(opts.detail, opts);
-	const ct = (answer.content_type || "").toLowerCase();
-	const cls = `ASSET_MEDIA ${opts.class || ""}`.trim();
-	let el;
-	if (ct.startsWith("video/")) el = (0, _yuneta_gobj_js.createElement2)(["video", {
-		class: cls,
-		controls: "",
-		preload: "metadata"
-	}]);
-	else if (ct.startsWith("audio/")) el = (0, _yuneta_gobj_js.createElement2)(["audio", {
-		class: cls,
-		controls: "",
-		preload: "metadata"
-	}]);
-	else {
-		el = (0, _yuneta_gobj_js.createElement2)(["img", {
-			class: cls,
-			loading: "lazy"
-		}]);
-		el.alt = opts.alt || opts.detail || "";
-	}
-	el.src = src;
-	el.onerror = () => {
-		(0, _yuneta_gobj_js.log_error)(`asset could not be loaded: ${opts.detail || src}`);
-		const $marker = yui_asset_missing(opts.detail, opts);
-		if (el.parentNode) el.parentNode.replaceChild($marker, el);
-	};
-	return el;
-}
-//#endregion
 //#region src/dev_machine_trace.js
 /***********************************************************************
 *          dev_machine_trace.js
@@ -69312,6 +69783,7 @@ function setup_frontend_view(self) {
 //#endregion
 exports.EditControl = EditControl;
 exports.MarkerControl = MarkerControl;
+exports.YUI_FILE_ACCEPT = YUI_FILE_ACCEPT;
 exports.YUI_PERIODS = YUI_PERIODS;
 exports.YUI_PERIODS_DEFAULT = YUI_PERIODS_DEFAULT;
 exports.YUI_ROLLING = YUI_ROLLING;
@@ -69375,11 +69847,18 @@ exports.set_submit_state = set_submit_state;
 exports.setup_dev = setup_dev;
 exports.setup_frontend_view = setup_frontend_view;
 exports.toggleClasses = toggleClasses;
+exports.yui_array_buffer_to_base64 = yui_array_buffer_to_base64;
 exports.yui_asset_element = yui_asset_element;
 exports.yui_asset_id = yui_asset_id;
 exports.yui_asset_ids = yui_asset_ids;
 exports.yui_asset_missing = yui_asset_missing;
 exports.yui_asset_src = yui_asset_src;
+exports.yui_file_control = yui_file_control;
+exports.yui_file_id_label = yui_file_id_label;
+exports.yui_file_read = yui_file_read;
+exports.yui_file_sha256 = yui_file_sha256;
+exports.yui_file_size_label = yui_file_size_label;
+exports.yui_files_manifest = yui_files_manifest;
 exports.yui_is_dark = yui_is_dark;
 exports.yui_mount_service_view = yui_mount_service_view;
 exports.yui_shell_close_drawer = yui_shell_close_drawer;