Observable Framework File Input

Observable Framework documentation: Input: File Source: https://observablehq.com/framework/input-file

<a href="https://github.com/observablehq/inputs/blob/main/README.md#file">API</a> · <a href="https://github.com/observablehq/inputs/blob/main/src/file.js">Source</a> · The file input specifies a local file and is intended for prompting the user to select a file from their own machine. The exposed value provides the same interface as FileAttachment for convenient parsing in various formats such as text, image, JSON, CSV, ZIP, and XLSX.

By default, any file is allowed, and the value of the input resolves to null.

const file = view(Inputs.file());

file

We recommend providing a label to improve usability.

Specify the accept option to limit the allowed file extensions. This is useful when you intend to parse the file as a specific file format, such as CSV. By setting the required option to true, the value of the input won’t resolve until the user choses a file.

const csvfile = view(Inputs.file({label: "CSV file", accept: ".csv", required: true}));

Once a file has been selected, you can read its contents like so:

csvfile.csv({typed: true})

Here are examples of other supported file types.

const jsonfile = view(Inputs.file({label: "JSON file", accept: ".json", required: true}));

jsonfile.json()

const textfile = view(Inputs.file({label: "Text file", accept: ".txt", required: true}));

textfile.text()

const imgfile = view(Inputs.file({label: "Image file", accept: ".png,.jpg", required: true}));

imgfile.image()

const xlsxfile = view(Inputs.file({label: "Excel file", accept: ".xlsx", required: true}));

xlsxfile.xlsx()

const zipfile = view(Inputs.file({label: "ZIP archive", accept: ".zip", required: true}));

zipfile.zip()

The multiple option allows the user to pick multiple files. In this mode, the exposed value is an array of files instead of a single file.

const files = view(Inputs.file({label: "Files", multiple: true}));

files

Options

Inputs.file(options)

The available file input options are:

• label - a label; either a string or an HTML element
• required - if true, a valid file must be selected
• validate - a function to check whether the file input is valid
• accept - the acceptable file types
• capture - for capturing image or video data
• multiple - whether to allow multiple files to be selected; defaults to false
• width - the width of the input (not including the label)
• disabled - whether input is disabled; defaults to false

<div class="note">The value of file input cannot be set programmatically; it can only be changed by the user.</div>