Skip to content
Select files. Download files. Work with file content.
Elm JavaScript
Branch: master
Clone or download
Latest commit e4ca386 Mar 18, 2019
Permalink
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
README.md Add links to relevant functions Feb 1, 2019
elm.json Bump for fix in File.Select.files Mar 18, 2019

README.md

Files

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:

Name,Age,Weight,Height
Tom,22,63,1.8
Sue,55,50,1.6
Bob,35,75,1.85

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


main : Program () Model Msg
main =
  Browser.element
    { init = init
    , view = view
    , update = update
    , subscriptions = subscriptions
    }



-- MODEL


type alias Model =
  { csv : Maybe String
  }


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



-- UPDATE


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


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


subscriptions : Model -> Sub Msg
subscriptions _ =
  Sub.none

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

You can’t perform that action at this time.