Dynamically load files into observable framework

Is there a way to dynamically load dataset into observable framework based on client input? For example, I have like 100 files in a folder. I want to load a specific file based on the text input from client and apply all visualization on that.

1 Like

Hi there,

You cannot pass a variable into the FileAttachment function, but you can achieve this by loading all the files then filtering for the specific one you need. For example, you could have a dataset that looks something like:

const files = [
{id: 1, file: FileAttachment("./data/file-one.csv").csv()},
{id: 2, file: FileAttachment("./data/file-two.csv").csv()},
{id: 3, file: FileAttachment("./data/file-three.csv").csv()},

Then an input could filter for that specific file and use it for the subsequent visualizations.

Depending on what the files contain, you could also use the SQL front matter to load them all, then filter with a SQL code block for the one you need, based again on an input. This would be faster if you’re dealing with larger datasets.


I’m pretty sure that maybe better would be

const files = [
  {id: 1, file: FileAttachment("./data/file-one.csv")},
  {id: 2, file: FileAttachment("./data/file-two.csv")},
  {id: 3, file: FileAttachment("./data/file-three.csv")},

Then, you might get the data via something like

let data = await files[0].file.csv();

I’m thinking this approach would avoid the data transfer until it’s actually needed.