Skip to content

Instantly share code, notes, and snippets.

Created July 9, 2017 19:02
Show Gist options
  • Select an option

  • Save anonymous/5ae5d9613e4598fb87971e66a5602907 to your computer and use it in GitHub Desktop.

Select an option

Save anonymous/5ae5d9613e4598fb87971e66a5602907 to your computer and use it in GitHub Desktop.
Untitled
{
"version": "1.0.0",
"summary": "Tell the world about your project!",
"repository": "https://github.com/user/project.git",
"license": "BSD3",
"source-directories": [
"."
],
"exposed-modules": [],
"dependencies": {
"elm-lang/core": "5.1.1 <= v < 5.1.1",
"elm-lang/html": "2.0.0 <= v < 2.0.0"
},
"elm-version": "0.18.0 <= v < 0.19.0"
}
<html>
<head>
<style>
html {
background: #F7F7F7;
}
</style>
</head>
<body>
<script>
var elmApp = Elm.Main.fullscreen();
var globalReader = function () {
var reader = new FileReader();
reader.onload = (function (event) {
elmApp.ports.imageRead.send(event.target.result)
});
return reader;
}();
elmApp.ports.readImage.subscribe(function (node) {
globalReader.readAsDataURL(node.files[0]);
node.value = "";
});
</script>
</body>
</html>
port module Main exposing (..)
import Html exposing (Html, text, program)
import Html.Events exposing (on)
import Html.Attributes exposing (type_, src)
import Json.Decode as Decode exposing (Value, Decoder)
port readImage : Value -> Cmd msg
port imageRead : (String -> msg) -> Sub msg
type alias Model =
String
type Msg
= ReadImage Value
| ImageRead String
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
ReadImage v ->
model ! [ readImage v ]
ImageRead v ->
v ! []
view : Model -> Html Msg
view model =
Html.div []
[ Html.input [ type_ "file", on "change" (decodeNode ReadImage) ] []
, Html.p [] [ Html.pre [] [ text model ] ]
, Html.img [ src model ] []
]
decodeNode : (Value -> msg) -> Decoder msg
decodeNode toMsg =
Decode.map toMsg (Decode.field "target" Decode.value)
subscriptions : Model -> Sub Msg
subscriptions _ =
imageRead ImageRead
main : Program Never Model Msg
main =
program
{ init = "" ! []
, update = update
, view = view
, subscriptions = subscriptions
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment