2c:null 2d:["$","title",null,{"children":"File Input with CSV support | Zhida Cheng | Observable"}] 32:[] 30:{"id":"5d4a8b929e536eec","slug":"file-input","title":"File Input with CSV support","thumbnail":"d14cac3a05ce2705d52fb106bc38b913a6597cb8643f5850a702ec538a814ba7","access_level":"public","create_time":"$D2019-01-31T04:04:45.190Z","update_time":"$D2019-01-31T04:34:15.712Z","view_time":null,"first_public_time":"$D2019-01-31T04:19:53.669Z","has_unpublished_edits":null,"fork":{"id":"31ffe21a13ec2663","slug":"file-input","title":"File Input","owner":{"id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock"}},"stars":4,"starred":false,"owner":{"type":"team","id":"48148a053565269d","login":"vorbei","name":"Zhida Cheng","avatar_url":"https://avatars-next.observableusercontent.com/822b12b275e376949723f33263e80abf4e86ebca145552e79921c4fc06c9e011","tier":"starter_2024"},"version":227,"publish_version":227,"role":null,"authored":false,"authors":[{"type":"individual","id":"f06197efa68be3b4","login":"vorbei","name":"Zhida Cheng","avatar_url":"https://avatars-next.observableusercontent.com/822b12b275e376949723f33263e80abf4e86ebca145552e79921c4fc06c9e011","tier":null}],"members":[{"type":"individual","id":"f06197efa68be3b4","login":"vorbei","name":"Zhida Cheng","avatar_url":"https://avatars-next.observableusercontent.com/822b12b275e376949723f33263e80abf4e86ebca145552e79921c4fc06c9e011","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"titling":"auto","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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"csvData","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"md`---\n\n## Implementation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"d3 = require('d3')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 31:"$30:body"