2c:null 2d:["$","title",null,{"children":"Photo Tag Adder | MyWorkspace | Observable"}] 32:T8c1,function ImageTagAdder() { // Input image const inputFile = Inputs.file({ label: "Image to Upload", accept: ".jpg, .jpeg, .png" }); // Input tags const inputTags = Inputs.textarea({ label: "Tags to Add (use comma to separate)", submit: true }) const thumbsHolder = htl.html``; let imageData = { file: inputFile.value, tags: [] }; const target = htl.html`

${inputFile}

${inputTags} ${thumbsHolder}

`; async function showValue() { thumbsHolder.innerHTML = ""; try { const image = await htl.html`

${await widget.value.file.image()}

`; thumbsHolder.appendChild(image); try { if (imageData.tags.length > 0) { const tagContainer = htl.html`

${imageData.tags.map(tag => htl.html`${tag}`)}

`; thumbsHolder.appendChild(tagContainer); } } catch (error) { console.error("Tags error"); } } catch (error) { console.error("Image error"); } } const widget = ReactiveWidget(target, { value: imageData, showValue }); inputFile.oninput = (evt) => { evt.stopPropagation(); evt.preventDefault(); const file = inputFile.value; if (file) { imageData.file = file; imageData.tags = []; // widget.setValue(imageData); } }; inputTags.addEventListener("submit", () => { if (!imageData.file) return; const newTags = inputTags.value .split(",") .map(tag => tag.trim()) .filter(tag => tag.length > 0); if (newTags.length > 0) { imageData.tags = [...new Set([...imageData.tags, ...newTags])]; // widget.setValue(imageData); } }); // showValue(); return widget; }33:[] 30:{"id":"30a9800af9ed3f8e","slug":"photo-tag-adder","title":"Photo Tag Adder","thumbnail":"85826664711caa69b00fc66bda4407767db462b58d5429e5bac5d75ec68cdc89","access_level":"public","create_time":"$D2025-04-13T23:37:30.522Z","update_time":"$D2025-04-22T06:38:24.523Z","view_time":null,"first_public_time":"$D2025-04-15T00:40:56.752Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"a86976d1951f51ae","login":"lang-min-neu","name":"MyWorkspace","avatar_url":"https://avatars-next.observableusercontent.com/98a049ab37444353e44bb8d72da6a106de0bb0c9f136d9a746c702c730878dac","tier":"starter_2024","bio":""},"version":177,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"990152ba3989c5af","login":"lang-min","name":"Lang Min","avatar_url":"https://avatars-next.observableusercontent.com/6e9a941d6faa87b18a9a07713f2575f9abe722f6fcf72cab177262d8d43d8f07","tier":null,"bio":""}],"members":[{"type":"individual","id":"990152ba3989c5af","login":"lang-min","name":"Lang Min","avatar_url":"https://avatars-next.observableusercontent.com/6e9a941d6faa87b18a9a07713f2575f9abe722f6fcf72cab177262d8d43d8f07","tier":null,"role":"editor"},{"type":"team","id":"a86976d1951f51ae","login":"lang-min-neu","name":"MyWorkspace","avatar_url":"https://avatars-next.observableusercontent.com/98a049ab37444353e44bb8d72da6a106de0bb0c9f136d9a746c702c730878dac","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Photo Tag Adder","cells":[{"id":0,"value":"# Photo Tag Adder","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":120,"value":"## Description","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":122,"value":"Photo Tag Adder is a simple program that allows users to upload a picture at a time and attach tags to it.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":118,"value":"## What it does","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":125,"value":"This widget allows users to\n1. select and upload one image at a time\n2. enter tags (separated by comma) and attach to the image","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":169,"value":"## Formats it accepts","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":171,"value":"Any image in .jpg, .jpeg, and .png format is fine.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":127,"value":"## How to import","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":129,"value":"Use this line to import
\n```\nimport {ImageTagAdder} from \"@lang-min-neu/photo-tag-adder\"\n```\nAnd type this line to run
\n```\nviewof photo = ImageTagAdder();\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":131,"value":"## ---------- Program starts here ----------","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"viewof photo = ImageTagAdder();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"photo","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"import {ReactiveWidget} from \"@john-guerra/reactive-widgets\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"