File input

Author: maca

docs/.gitignore

@@ -1,5 +1,2 @@
 build
 static/main.js
-.sass-cache
-static/styles.css.map
-static/styles.css

docs/elm.json

@@ -7,9 +7,12 @@
     "elm-version": "0.19.1",
     "dependencies": {
         "direct": {
+            "danfishgold/base64-bytes": "1.1.0",
             "dtwrks/elm-book": "1.4.4",
             "elm/browser": "1.0.2",
+            "elm/bytes": "1.0.8",
             "elm/core": "1.0.5",
+            "elm/file": "1.0.5",
             "elm/html": "1.0.0",
             "elm/http": "2.0.0",
             "elm/json": "1.1.3",
@@ -24,8 +27,6 @@
         },
         "indirect": {
             "dillonkearns/elm-markdown": "7.0.1",
-            "elm/bytes": "1.0.8",
-            "elm/file": "1.0.5",
             "elm/parser": "1.1.0",
             "elm/svg": "1.0.1",
             "elm/virtual-dom": "1.0.4",

docs/src/Chapters/Fields.elm

@@ -37,6 +37,7 @@ type Msg
     | SelectChanged (Field.Msg ())
     | RadioChanged (Field.Msg ())
     | CheckboxChanged (Field.Msg ())
+    | FileChanged (Field.Msg ())
     | GroupChanged (Field.Msg ContactFields)
     | RepeatableChanged (Field.Msg ContactFields)
     | Repeatable2Changed (Field.Msg ContactFields)
@@ -59,6 +60,7 @@ type alias Model =
     , select : Field ()
     , radio : Field ()
     , checkbox : Field ()
+    , file : Field ()
     , group : Field ContactFields
     , repeatable : Field ContactFields
     , repeatableWithDefaults : Field ContactFields
@@ -83,6 +85,7 @@ init =
     , select = selectField
     , radio = radioField
     , checkbox = checkboxField
+    , file = fileField
     , group = groupField
     , repeatable = repeatableField
     , repeatableWithDefaults = repeatableFieldWithDefaults
@@ -257,6 +260,16 @@ update msg book =
                         (Task.succeed (Debug.toString result))
                     )
 
+                FileChanged fieldMsg ->
+                    let
+                        ( updatedField, result ) =
+                            Parse.parseUpdate Parse.file fieldMsg model.file
+                    in
+                    ( { model | file = updatedField }
+                    , Task.perform (Actions.logActionWithString "Result")
+                        (Task.succeed (Debug.toString result))
+                    )
+
                 GroupChanged fieldMsg ->
                     let
                         ( updatedField, result ) =
@@ -423,6 +436,14 @@ chapter =
                         ]
                         |> Html.map (Actions.updateStateWithCmdWith update)
               )
+            , ( "File"
+              , \book ->
+                    Html.div [ Attr.class "milligram" ]
+                        [ book.fields.file
+                            |> Field.toHtml FileChanged
+                        ]
+                        |> Html.map (Actions.updateStateWithCmdWith update)
+              )
             , ( "Group"
               , \book ->
                     Html.div [ Attr.class "milligram" ]
@@ -808,6 +829,29 @@ checkboxField =
 Parsed using `Parse.bool`.
 
 
+### File
+
+A file upload input field with drag and drop support. Files can be dropped onto
+the input area or selected via the native file picker. The `min` and `max`
+attributes can be used to validate file size in bytes.
+
+```elm
+fileField : Field ()
+fileField =
+    Field.file
+        [ Field.label "File Upload"
+        , Field.placeholder "Choose a file or drag and drop"
+        , Field.hint "Maximum file size: 5MB"
+        , Field.max (Value.int 5242880)
+        , Field.required True
+        ]
+```
+
+<component with-label="File"/>
+
+Parsed using `Parse.file`.
+
+
 ## Groupping Fields
 
 
@@ -1133,6 +1177,17 @@ checkboxField =
         ]
 
 
+fileField : Field ()
+fileField =
+    Field.file
+        [ Field.label "File Upload"
+        , Field.placeholder "Choose a file or drag and drop"
+        , Field.hint "Maximum file size: 5MB"
+        , Field.max (Value.int 5242880)
+        , Field.required True
+        ]
+
+
 groupField : Field ContactFields
 groupField =
     Field.group