├── .gitignore ├── Main.elm ├── Ports.elm ├── README.md ├── elm-package.json └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | elm-stuff/ 2 | elm.js -------------------------------------------------------------------------------- /Main.elm: -------------------------------------------------------------------------------- 1 | module Main exposing (..) 2 | 3 | import Html exposing (..) 4 | import Html.Attributes exposing (src, title, class, id, type_) 5 | import Html.Events exposing (on) 6 | import Json.Decode as JD 7 | import Ports exposing (ImagePortData, fileSelected, fileContentRead) 8 | 9 | 10 | type Msg 11 | = ImageSelected 12 | | ImageRead ImagePortData 13 | 14 | 15 | type alias Image = 16 | { contents : String 17 | , filename : String 18 | } 19 | 20 | 21 | type alias Model = 22 | { id : String 23 | , mImage : Maybe Image 24 | } 25 | 26 | 27 | main : Program Never Model Msg 28 | main = 29 | program 30 | { init = init 31 | , update = update 32 | , view = view 33 | , subscriptions = subscriptions 34 | } 35 | 36 | 37 | init : ( Model, Cmd Msg ) 38 | init = 39 | ( { id = "ImageInputId" 40 | , mImage = Nothing 41 | } 42 | , Cmd.none 43 | ) 44 | 45 | 46 | update : Msg -> Model -> ( Model, Cmd Msg ) 47 | update msg model = 48 | case msg of 49 | ImageSelected -> 50 | ( model 51 | , fileSelected model.id 52 | ) 53 | 54 | ImageRead data -> 55 | let 56 | newImage = 57 | { contents = data.contents 58 | , filename = data.filename 59 | } 60 | in 61 | ( { model | mImage = Just newImage } 62 | , Cmd.none 63 | ) 64 | 65 | 66 | view : Model -> Html Msg 67 | view model = 68 | let 69 | imagePreview = 70 | case model.mImage of 71 | Just i -> 72 | viewImagePreview i 73 | 74 | Nothing -> 75 | text "" 76 | in 77 | div [ class "imageWrapper" ] 78 | [ input 79 | [ type_ "file" 80 | , id model.id 81 | , on "change" 82 | (JD.succeed ImageSelected) 83 | ] 84 | [] 85 | , imagePreview 86 | ] 87 | 88 | 89 | viewImagePreview : Image -> Html Msg 90 | viewImagePreview image = 91 | img 92 | [ src image.contents 93 | , title image.filename 94 | ] 95 | [] 96 | 97 | 98 | subscriptions : Model -> Sub Msg 99 | subscriptions model = 100 | fileContentRead ImageRead 101 | -------------------------------------------------------------------------------- /Ports.elm: -------------------------------------------------------------------------------- 1 | port module Ports exposing (..) 2 | 3 | 4 | type alias ImagePortData = 5 | { contents : String 6 | , filename : String 7 | } 8 | 9 | 10 | port fileSelected : String -> Cmd msg 11 | 12 | 13 | port fileContentRead : (ImagePortData -> msg) -> Sub msg 14 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Image Upload for elm 0.18 2 | 3 | The code in this repository is taken from a [blog post](https://www.paramander.com/blog/using-ports-to-deal-with-files-in-elm-0-17) written by Tolga Paksoy. 4 | 5 | ## Run it 6 | 7 | elm reactor 8 | 9 | Go to `http://localhost:8000` and click on `index.html`. 10 | 11 | If an image is chosen from the file field, it is displayed on the same page. 12 | -------------------------------------------------------------------------------- /elm-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "1.0.0", 3 | "summary": "helpful summary of your project, less than 80 characters", 4 | "repository": "https://github.com/user/project.git", 5 | "license": "BSD3", 6 | "source-directories": [ 7 | "." 8 | ], 9 | "exposed-modules": [], 10 | "dependencies": { 11 | "elm-lang/core": "5.0.0 <= v < 6.0.0", 12 | "elm-lang/html": "2.0.0 <= v < 3.0.0" 13 | }, 14 | "elm-version": "0.18.0 <= v < 0.19.0" 15 | } 16 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 |