30:[] 2e:{"title":"File Input with CSV support","cells":[{"id":0,"value":"md`# File Input with CSV support\n\nThis reusable input allows an image file to be specified either by URL or by choosing a file from disk. A forked implemention added csv file support.\n\nTo my own taste, labeling the input is also implemented.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"viewof csvData = csvInput({\n initialUrl: \"https://vega.github.io/vega-lite/data/seattle-weather.csv\",\n label: \"

Import CSV Data

Object is imported as \\\"csvData\\\"
\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":167,"value":"csvData","pinned":true,"hidden":false,"mode":"ojs"},{"id":148,"value":"md`---\n\n## Implementation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"function fileInput({\n initialUrl, // e.g., \"https://example.com/file.txt\"\n accept, // e.g., \".txt,.md\"\n load = value => value, // A function to specify which value is exposed.\n label = \"\"\n}) {\n let file = null;\n const form = html`

${label}\n ${Object.assign(html``, {value: initialUrl})}\n \n ${Object.assign(html``, {accept})}\n`;\n form.onsubmit = event => {\n form.value = load(form.url.value);\n form.dispatchEvent(new CustomEvent(\"input\"));\n event.preventDefault();\n };\n form.url.oninput = event => {\n event.stopPropagation();\n };\n form.file.oninput = () => {\n if (file !== null) URL.revokeObjectURL(file);\n file = URL.createObjectURL(form.file.files[0]);\n form.value = load(form.url.value = file);\n };\n if (initialUrl !== undefined) {\n form.value = load(initialUrl);\n }\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"function imageInput({initialUrl, width, height, crossOrigin, accept = \".png,.jpg,.gif,.webp\", label = \"\"}) {\n return fileInput({\n initialUrl,\n accept,\n load(url) {\n return new Promise((resolve, reject) => {\n const image = new Image;\n image.style.display = \"block\";\n if (width !== undefined) image.width = width;\n if (height !== undefined) image.height = height;\n if (crossOrigin !== undefined) image.crossOrigin = crossOrigin;\n image.onload = () => resolve(image);\n image.onerror = reject;\n image.src = url;\n });\n },\n label\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"function jsonInput({initialUrl, init, accept = \".json\", label = \"\"}) {\n return fileInput({\n initialUrl,\n accept,\n load(url) {\n return fetch(url, init).then(response => {\n if (!response.ok) throw new Error(response.status + \" \" + response.statusText);\n return response.json();\n });\n },\n label\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":158,"value":"function csvInput({initialUrl, init, accept = \".csv\", label = \"\"}) {\n return fileInput({\n initialUrl,\n accept,\n load(url) {\n return fetch(url, init).then(function(response) {\n return response.ok ? response.text() : Promise.reject(response.status);\n }).then(function(text) {\n return d3.csvParse(text);\n });;\n },\n label\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":159,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}