function fileUpload(formats, title, defaultValue, enabled) { if (enabled !== undefined && !enabled) return html``; const result = html`

${title}

Using demo data

` const info = result.children[1]; const fileUpload = result.children[2]; const formatSelection = result.children[3]; const formatInfo = result.children[4]; let format = formats[0]; function updateFormatInfo() { formatInfo.innerHTML = `

Info about format "${format.title}":

` if (format.info) { formatInfo.innerHTML += `

${format.info}

`; } if (format.example) { formatInfo.innerHTML += `

Example:

${format.example}

`; } } let file = null; function setValue(value) { value.format = format.id; result.value = value; result.dispatchEvent(new CustomEvent("input")); } function printMessage(color, text, value) { info.style.color = color; info.innerHTML = text; if (typeof(value) === 'undefined') { setValue(defaultValue); } else { setValue(value); } } function processRawData(rawData) { try { let data = null; if (format.form === 'lines') { data = rawData.split('\n'); } else if (format.form === 'json') { data = JSON.parse(rawData); } else if (format.form === 'csv') { data = d3.csvParse(rawData); } const finalValue = format.importer(data); printMessage('green', 'Done', finalValue); } catch (e) { printMessage('red', e.message); throw e; }; } function update() { if (!file) { return printMessage('gray', 'Using demo data', defaultValue); } Files.text(file).then(processRawData); } fileUpload.addEventListener('change', function() { if (this.files.length == 0) { file = null; } else { file = this.files[0]; } update(); }); formatSelection.addEventListener('change', function() { format = formats[+formatSelection.value]; update(); updateFormatInfo(); }); updateFormatInfo(); setValue(defaultValue); return result; }