🏠 back to Observable

file attachments as placeholder content

#1

For an app like notebook which has the main purpose of analyzing a user provided binary file, I would like to provide a default file to have cells populated with example content. I found a solution using file attachments and mutable cells but it took me quite some time to get to a working configuration, undoubtedly due to my inexperience. Here is a boiled down example:

It works but it requires an extra cell just for mutating and I am not sure if I use the mutable concept properly. I was looking for an example since use of file attachments for placeholder content seemed an obvious use case but could not locate any.

Any feedback or pointers welcome, Andreas

1 Like
#2

Hi Andreas,

Sure thing - this is indeed a little tricky to work with, but here’s one option:

The notebook has a default file, and then an input. This doesn’t use viewof on the input so that we can use a cell that depends on the input before it gets its first value. Then there’s a generator cell that first yields the default file, and then yields the input’s values when/if folks pick files for it.

-Tom

1 Like
#3

Hi Andreas. Have you seen my File Input notebook? It might help:

#4

Thanks, for both ! Somehow I did not find the File Input notebook, or did not realize it has defaultUrl option. It looks like a good option, perhaps add a config for the submit button.

Tom’s solution is so concise, I have to admit I will have to study it for a while:

for await let of Generator yield

is quite a handful.

What to do if there are two solution posts to check ? :thinking:

#5

Ok, let me try.

Generators.input(fileInput) generates Files each time a new file is selected on the input. The for...of loop is necessary to keep asking for these. Each time then the arrayBuffer is yielded, making the cell a Generator itself. The cell needs to be Generator to be able to yield the FileAttachment’s arrayBuffer first, and then be able to suspend and wait until there is an input.

But why is there an await ? It is easily tested to be found necessary but it is an awkward location. Let’s see. Generators.input actually produces a promise which needs to be awaited to resolve and then to use its result. There needs to be a let (const actually also works). await in front is I guess just how for...of works ? There is probably a better explanation.

#6

for await ... of is ES 2018 syntax that allows you to iterate over an async iterable. This page in the “Observable manual” may be a bit easier to learn from / play around with:

#7

ah, something pretty new.

I am wondering if it is possible to avoid the async iteration. Here is a variation using while(true) to keep yielding:


But this does not yield the first time with the defaultFile for some reason. Or maybe it does but then quickly yields nothing (?).
Also, it never feels quite right to have an infinite loop, even within Generators.