Can I use the File input and .xlsx() in plain HTML?

Community Help
1

I am having trouble figuring out how to interpret a local .xlsx spreadsheet when using Observable inputs and HTML. The file input docs do not show .xlsx as an option, so I wonder if it’s possible? Adapting the example code for a slider input, I can render a file attachment input and see the path logged in the console:

<!DOCTYPE html>
<body>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@observablehq/inputs@0.12/dist/index.css">
<script type="module">

import "https://cdn.jsdelivr.net/npm/@observablehq/stdlib@5.8.8/+esm";

import * as Inputs from "https://cdn.jsdelivr.net/npm/@observablehq/inputs@0.12/+esm";

const file = Inputs.file();

// Display the file name on the page.
document.body.append(file);

// Listen and respond to the user dragging the slider.
file.addEventListener("input", (event) => {
  console.log(event.target.value);
  const e = event.target.value;
  console.log(e);
});

</script>

However, I can’t figure out how to interpret the attachment as Excel:

  const f = event.xlsx()
  console.log(f);

  cont interp = e.xlsx()
  console.log(interp)

both don’t work because .xlsx() is not a function.

Any insights as to if/how this is possible?

2

No. With the vanilla flavor of Inputs.file, the value of the input is a File object, not a FileAttachment. You need to use notebooks or Framework to get a FileAttachment.

1 Like
3

Thank you! :pray: