2a:null 2b:["$","title",null,{"children":"image file or url input | Forrest O. | Observable"}] 30:T439,imageInput = function() { const inputForm = form(html` `); const container = html`

${inputForm}

`; container.value = null; inputForm.addEventListener('submit', function() { if (!inputForm.value.url && !inputForm.value.file) { container.value = null; container.dispatchEvent(new CustomEvent("input")); return; } var image = new Image(); image.src = inputForm.value.url ? inputForm.value.url : URL.createObjectURL(inputForm.value.file); image.crossOrigin = "anonymous"; image.onload = () => { container.value = image; container.dispatchEvent(new CustomEvent("input")); }; image.onerror = error => { container.value = error; container.dispatchEvent(new CustomEvent("input")); }; }); return container; }31:[] 2e:{"id":"0458fd2b30d7f96c","slug":"image-file-or-url-input","title":"image file or url input","thumbnail":"2ea9a31cc53d3bbafba0304bb89bed157a4c23e63a471340fc6f2034479e2108","access_level":"public","create_time":"$D2019-10-09T02:16:55.714Z","update_time":"$D2019-10-09T03:53:14.856Z","view_time":null,"first_public_time":"$D2019-10-09T03:00:49.274Z","has_unpublished_edits":null,"fork":{"id":"ba95e66c34f1dbcc","slug":"image-outline-expand-art","title":"image outline expand art","owner":{"id":"f9abb147dc0e6dcd","login":"forresto","name":"Forrest O."}},"stars":2,"starred":false,"owner":{"type":"team","id":"f9abb147dc0e6dcd","login":"forresto","name":"Forrest O.","avatar_url":"https://avatars-next.observableusercontent.com/c22671040121cb9b9d22913e2eb0ffc4d65d3e535cda1133d6655f1d63b32e3f","tier":"starter_2024"},"version":128,"publish_version":128,"role":null,"authored":false,"authors":[{"type":"individual","id":"b16dd1586d4d1422","login":"forresto","name":"Forrest O.","avatar_url":"https://avatars-next.observableusercontent.com/c22671040121cb9b9d22913e2eb0ffc4d65d3e535cda1133d6655f1d63b32e3f","tier":null}],"members":[{"type":"individual","id":"b16dd1586d4d1422","login":"forresto","name":"Forrest O.","avatar_url":"https://avatars-next.observableusercontent.com/c22671040121cb9b9d22913e2eb0ffc4d65d3e535cda1133d6655f1d63b32e3f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"d4c0dfbf81416ba7","slug":"util","title":"util","owner":{"id":"f9abb147dc0e6dcd","login":"forresto","name":"Forrest O."}},"type":"notebook","body":{"titling":"auto","title":"image file or url input","cells":[{"id":0,"value":"md`# image file or url input\n\n⚠️ Note! This replicates most of https://observablehq.com/@mbostock/file-input?collection=@observablehq/libraries ... I'd just use that one.\n\n## Use\n\nSelect an image or URL.\n\n\\`\\`\\`js\nimport {imageInput} from \"@forresto/image-file-or-url-input\"\n\\`\\`\\`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"viewof demoInput = imageInput()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"demoInput","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"md`## Implementation`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md`## Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"import {form} from \"@mbostock/form-input\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1"}} 2f:"$2e:body"