Mime type validation

Author: maca

src/FormToolkit/Error.elm

@@ -27,6 +27,7 @@ type Error id
     | PatternError (Maybe id)
     | EmailInvalid (Maybe id)
     | UrlInvalid (Maybe id)
+    | MimeTypeInvalid (Maybe id) { mime : String, accepted : List String }
     | IsGroupNotInput (Maybe id)
     | NoOptionsProvided (Maybe id)
     | InvalidValue (Maybe id)
@@ -74,6 +75,9 @@ toEnglish error =
         UrlInvalid _ ->
             "Please enter a valid URL"
 
+        MimeTypeInvalid _ data ->
+            "File type '" ++ data.mime ++ "' is not accepted. Accepted types: " ++ String.join ", " data.accepted
+
         IsGroupNotInput _ ->
             "A group cannot have a value but the decoder is attempting to read the value"
 

src/FormToolkit/Field.elm

@@ -11,7 +11,7 @@ module FormToolkit.Field exposing
     , selectionStart, selectionEnd
     , options, stringOptions, min, max, step, autogrow
     , class, classList
-    , disabled, hidden, noattr, pattern
+    , disabled, hidden, noattr, pattern, accept
     , copies, repeatableMin, repeatableMax
     , updateAttribute, updateAttributes, updateWithId
     , updateValuesFromJson
@@ -45,7 +45,7 @@ their attributes, update, and render them.
 @docs selectionStart, selectionEnd
 @docs options, stringOptions, min, max, step, autogrow
 @docs class, classList
-@docs disabled, hidden, noattr, pattern
+@docs disabled, hidden, noattr, pattern, accept
 
 
 # Groups
@@ -587,6 +587,7 @@ initAttributes fieldType =
         , disabled = False
         , hidden = False
         , pattern = []
+        , acceptedMimeTypes = []
         }
 
 
@@ -913,6 +914,27 @@ pattern patternString =
         )
 
 
+{-| Sets accepted MIME types for file input. Supports wildcards like "image/*" or "*/*".
+
+    file
+        [ label "Profile Picture"
+        , accept [ "image/png", "image/jpeg", "image/gif" ]
+        ]
+
+    file
+        [ label "Any Image"
+        , accept [ "image/*" ]
+        ]
+
+-}
+accept : List String -> Attribute id val
+accept mimeTypes =
+    Attribute
+        (\field ->
+            { field | acceptedMimeTypes = mimeTypes }
+        )
+
+
 combineAttrs : Attribute id val -> Attribute id val -> Attribute id val
 combineAttrs (Attribute a) (Attribute b) =
     Attribute (b >> a)
@@ -1343,6 +1365,7 @@ validateNode node =
         , checkRequired
         , ifNotRequired checkInRange
         , ifNotRequired checkEmail
+        , ifNotRequired checkMimeType
         , ifNotRequired checkPattern
         ]
 
@@ -1467,6 +1490,68 @@ validateUrl urlString =
         |> Url.fromString
 
 
+checkMimeType : Node id -> Node id
+checkMimeType node =
+    let
+        attrs =
+            Tree.value node
+    in
+    case ( attrs.fieldType, attrs.acceptedMimeTypes ) of
+        ( File, [] ) ->
+            node
+
+        ( File, accepted ) ->
+            case Internal.Value.toFile attrs.value of
+                Just fileValue ->
+                    let
+                        fileMime =
+                            File.mime fileValue
+                    in
+                    if isMimeTypeAccepted fileMime accepted then
+                        node
+
+                    else
+                        setError
+                            (\id ->
+                                MimeTypeInvalid id
+                                    { mime = fileMime
+                                    , accepted = accepted
+                                    }
+                            )
+                            node
+
+                Nothing ->
+                    node
+
+        _ ->
+            node
+
+
+isMimeTypeAccepted : String -> List String -> Bool
+isMimeTypeAccepted fileMime acceptedTypes =
+    List.any (matchesMimeType fileMime) acceptedTypes
+
+
+matchesMimeType : String -> String -> Bool
+matchesMimeType fileMime mimePattern =
+    if mimePattern == "*/*" || mimePattern == "*" then
+        True
+
+    else
+        case String.split "/" mimePattern of
+            [ typePattern, subTypePattern ] ->
+                case String.split "/" fileMime of
+                    [ fileType, fileSubType ] ->
+                        (typePattern == "*" || typePattern == fileType)
+                            && (subTypePattern == "*" || subTypePattern == fileSubType)
+
+                    _ ->
+                        False
+
+            _ ->
+                fileMime == mimePattern
+
+
 checkPattern : Node id -> Node id
 checkPattern node =
     let
@@ -1573,6 +1658,9 @@ mapError transformId error =
         UrlInvalid id ->
             UrlInvalid (Maybe.map transformId id)
 
+        MimeTypeInvalid id data ->
+            MimeTypeInvalid (Maybe.map transformId id) data
+
         ParseError id ->
             ParseError (Maybe.map transformId id)
 

src/Internal/Field.elm

@@ -66,6 +66,7 @@ type alias Attributes id fieldType value status err =
     , disabled : Bool
     , hidden : Bool
     , pattern : List Internal.Utils.MaskToken
+    , acceptedMimeTypes : List String
     }
 
 
@@ -103,6 +104,7 @@ mapAttributes func errMapper typeMapper valueMapper statusMapper input =
     , disabled = input.disabled
     , hidden = input.hidden
     , pattern = input.pattern
+    , acceptedMimeTypes = input.acceptedMimeTypes
     }
 
 

src/Internal/Value.elm

@@ -157,8 +157,12 @@ encode value =
         Boolean b ->
             Encode.bool b
 
-        FileValue _ ->
-            Debug.todo "crash"
+        FileValue fileValue ->
+            Encode.object
+                [ ( "name", Encode.string (File.name fileValue) )
+                , ( "size", Encode.int (File.size fileValue) )
+                , ( "mime", Encode.string (File.mime fileValue) )
+                ]
 
         Blank ->
             Encode.null

src/Internal/View.elm

@@ -1082,18 +1082,26 @@ fileInputToHtml view element =
             ++ element
         )
         [ Html.input
-            [ Attributes.type_ "file"
-            , Attributes.id (inputId view.root view.path)
-            , Attributes.required attrs.isRequired
-            , Attributes.disabled attrs.disabled
-            , Attributes.placeholder (Maybe.withDefault "" attrs.placeholder)
-            , nameAttribute view.root
-            , ariaDescribedByAttribute view.root view.path
-            , ariaInvalidAttribute view.root
-            , onFileChange
-            , Events.onFocus (view.onFocus attrs.identifier view.path)
-            , Events.onBlur (view.onBlur attrs.identifier view.path)
-            ]
+            (List.concat
+                [ [ Attributes.type_ "file"
+                  , Attributes.id (inputId view.root view.path)
+                  , Attributes.required attrs.isRequired
+                  , Attributes.disabled attrs.disabled
+                  , Attributes.placeholder (Maybe.withDefault "" attrs.placeholder)
+                  , nameAttribute view.root
+                  , ariaDescribedByAttribute view.root view.path
+                  , ariaInvalidAttribute view.root
+                  , onFileChange
+                  , Events.onFocus (view.onFocus attrs.identifier view.path)
+                  , Events.onBlur (view.onBlur attrs.identifier view.path)
+                  ]
+                , if List.isEmpty attrs.acceptedMimeTypes then
+                    []
+
+                  else
+                    [ Attributes.attribute "accept" (String.join "," attrs.acceptedMimeTypes) ]
+                ]
+            )
             []
         , Html.label
             [ Attributes.for (inputId view.root view.path)