├── .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 | <!DOCTYPE HTML>
 2 | <html>
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>Main</title>
 6 | </head>
 7 | 
 8 | <body>
 9 |   <script type="text/javascript" src="/_compile/Main.elm"></script>
10 |   <script type="text/javascript">
11 |     var app = Elm.Main.fullscreen();
12 | 
13 |     app.ports.fileSelected.subscribe(function (id) {
14 |       var node = document.getElementById(id);
15 |       if (node === null) {
16 |         return;
17 |       }
18 | 
19 |       // If your file upload field allows multiple files, you might
20 |       // want to consider turning this into a `for` loop.
21 |       var file = node.files[0];
22 |       var reader = new FileReader();
23 | 
24 |       // FileReader API is event based. Once a file is selected
25 |       // it fires events. We hook into the `onload` event for our reader.
26 |       reader.onload = (function(event) {
27 |         // The event carries the `target`. The `target` is the file
28 |         // that was selected. The result is base64 encoded contents of the file.
29 |         var base64encoded = event.target.result;
30 |         // We build up the `ImagePortData` object here that will be passed to our Elm
31 |         // runtime through the `fileContentRead` subscription.
32 |         var portData = {
33 |           contents: base64encoded,
34 |           filename: file.name
35 |         };
36 | 
37 |         // We call the `fileContentRead` port with the file data
38 |         // which will be sent to our Elm runtime via Subscriptions.
39 |         app.ports.fileContentRead.send(portData);
40 |       });
41 | 
42 |       // Connect our FileReader with the file that was selected in our `input` node.
43 |       reader.readAsDataURL(file);
44 |     });
45 |   </script>
46 | </body>
47 | </html>
48 | 


--------------------------------------------------------------------------------