Skip to content
Select files. Download files. Work with file content.
Elm JavaScript
Branch: master
Clone or download
Latest commit e4ca386 Mar 18, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples Stop using stopPropagation in drag-and-drop examples Nov 14, 2018
src Allow multiple files upload Mar 4, 2019
.gitignore Initial draft of API Sep 13, 2018
LICENSE Initial draft of API Sep 13, 2018 Add links to relevant functions Feb 1, 2019
elm.json Bump for fix in File.Select.files Mar 18, 2019


Select files. Download files. Work with file content.

Maybe you generate an SVG floorplan or a PDF legal document? You can use File.Download to save those files to disk. Maybe you want people to upload a CSV of microbe data or a JPG of their face? You can use File.Select to get those files into the browser.

This package does not allow arbitrary access to the file system though. Browsers restrict access to the file system for security. Otherwise, any website on the internet could go try to read private keys out of ~/.ssh or whatever else they want!

Download Example

Maybe you want people to download the floorplan they just designed as an SVG file? You could use File.Download.string like this:

import File.Download as Download

download : String -> Cmd msg
download svgContent =
  Download.string "floorplan.svg" "image/svg+xml" svgContent

Upload Example

Maybe you want to help scientists explore and visualize data? Maybe they need to upload CSV files like this:


You could use File.Select.file and File.toString to create a program like this:

import Browser
import File exposing (File)
import File.Select as Select
import Html exposing (Html, button, p, text)
import Html.Attributes exposing (style)
import Html.Events exposing (onClick)
import Task


main : Program () Model Msg
main =
    { init = init
    , view = view
    , update = update
    , subscriptions = subscriptions


type alias Model =
  { csv : Maybe String

init : () -> (Model, Cmd Msg)
init _ =
  ( Model Nothing, Cmd.none )


type Msg
  = CsvRequested
  | CsvSelected File
  | CsvLoaded String

update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
  case msg of
    CsvRequested ->
      ( model
      , Select.file ["text/csv"] CsvSelected

    CsvSelected file ->
      ( model
      , Task.perform CsvLoaded (File.toString file)

    CsvLoaded content ->
      ( { model | csv = Just content }
      , Cmd.none


view : Model -> Html Msg
view model =
  case model.csv of
    Nothing ->
      button [ onClick CsvRequested ] [ text "Load CSV" ]

    Just content ->
      p [ style "white-space" "pre" ] [ text content ]


subscriptions : Model -> Sub Msg
subscriptions _ =

From there you could parse the CSV file, start showing scatter plots, etc.

You can’t perform that action at this time.