avatarUpload Logo (#132)

* avatarUpload Logo

* cleanup

* code review

Author: kimispencer

docs/Examples/Upload.example.purs

@@ -170,6 +170,25 @@ docs = unit # make component { initialState, didMount, render }
                       }
                   ]
               }
+        , h2_ "Logo"
+        , example $
+            column
+              { style: R.css { alignSelf: "stretch" }
+              , children:
+                  [ upload defaults
+                      { value = maybe [] pure self.state.avatar
+                      , variant = Logo
+                      , onChange = send self <<< AvatarEx <<< head
+                      , readonly = self.state.readonly
+                      , backend =
+                          { fetch: \id@(FileId name) -> do
+                              pure { id, name: FileName name, previewUri: Nothing }
+                          , upload: \file -> produceAff \emitter ->
+                              uploadWithRandomPauses emitter file
+                          }
+                      }
+                  ]
+              }
         ]
 
     randomPause = do

src/Lumi/Components/Upload.purs

@@ -131,6 +131,7 @@ data UploadVariant
   = Images
   | Files
   | Avatar
+  | Logo
 
 defaults :: UploadProps
 defaults =
@@ -189,6 +190,7 @@ upload = make component { initialState, render }
                 Images -> Just "image/"
                 Files  -> Nothing
                 Avatar -> Just "image/"
+                Logo -> Just "image/"
           in
             case mimeFilter of
               Nothing ->
@@ -300,6 +302,7 @@ upload = make component { initialState, render }
 
     shouldAllowMultiple { allowMultiple, variant } = allowMultiple && case variant of
       Avatar -> false
+      Logo -> false
       _      -> true
 
     renderUI stuff self =
@@ -313,7 +316,8 @@ upload = make component { initialState, render }
             [ case stuff.variant of
                 Images -> renderImageList stuff self
                 Files  -> renderFileList stuff self
-                Avatar -> renderAvatarImage stuff self
+                Avatar -> renderAvatarImage stuff self stuff.variant
+                Logo -> renderAvatarImage stuff self stuff.variant
             ]
         }
 
@@ -349,6 +353,7 @@ upload = make component { initialState, render }
               Images -> "image/*"
               Files  -> ""
               Avatar -> "image/*"
+              Logo -> "image/*"
         , onChange: handler target \e -> do
             mFiles <- getEventFiles e
             for_ mFiles (send self <<< AddNewFiles)
@@ -507,7 +512,7 @@ upload = make component { initialState, render }
       | bytes >= 1024 = show (Int.round (toNumber bytes / 1024.0)) <> "kb"
       | otherwise = show (Int.round (toNumber bytes)) <> "b"
 
-    renderAvatarImage stuff self =
+    renderAvatarImage stuff self variant =
       lumiUploadAvatar
         { onDrop:
             if stuff.readonly
@@ -539,17 +544,31 @@ upload = make component { initialState, render }
                             }
                         , children: []
                         }
+                    _ ->
+                      case variant of
+                        Logo ->
+                          lumiUploadAvatarImage
+                            { style: R.css { backgroundColor: cssStringHSLA colors.black4 }
+                            , children: []
+                            }
+                        _ ->
+                          lumiUploadAvatarImage
+                            { style: R.css {}
+                            , children: [ userSvg ]
+                            }
+
+                _, _ ->
+                  case variant of
+                    Logo ->
+                      lumiUploadAvatarImage
+                        { style: R.css { backgroundColor: cssStringHSLA colors.black4 }
+                        , children: []
+                        }
                     _ ->
                       lumiUploadAvatarImage
                         { style: R.css {}
                         , children: [ userSvg ]
                         }
-
-                _, _ ->
-                  lumiUploadAvatarImage
-                    { style: R.css {}
-                    , children: [ userSvg ]
-                    }
             , if stuff.readonly
                 then empty
                 else