Inform about media uploading status.

public/style.css

@@ -449,14 +449,14 @@ li.load-more {
   position: relative;
   width: 100%;
   cursor: pointer;
-  height: 35px;
+  height: 38px;
   outline: 0;
 }
 
 .draft-attachment-input:after {
   background-image: linear-gradient(#484e55, #3a3f44 60%, #313539);
   color: #c8c8c8;
-  line-height: 32px;
+  line-height: 34px;
   text-align: center;
   position: absolute;
   top: 0;
@@ -483,6 +483,10 @@ input[type=file]:focus {
   background-image: linear-gradient(#020202, #101112 40%, #141618);
 }
 
+.btn-loading {
+  width: 100%;
+}
+
 /* Status text content rules */
 
 .attachment, .hashtag, .ellipsis {

src/Types.elm

@@ -125,6 +125,7 @@ type alias Draft =
     , sensitive : Bool
     , visibility : String
     , attachments : List Attachment
+    , mediaUploading : Bool
     , statusLength : Int
 
     -- Autocomplete values

src/Update/Draft.elm

@@ -46,6 +46,7 @@ empty =
     , sensitive = False
     , visibility = "public"
     , attachments = []
+    , mediaUploading = False
     , statusLength = 0
     , autoState = Autocomplete.empty
     , autoAtPosition = Nothing
@@ -278,10 +279,15 @@ update draftMsg currentUser ({ draft } as model) =
                 { model | draft = newDraft } ! []
 
         UploadMedia id ->
-            model ! [ Command.uploadMedia (List.head model.clients) id ]
+            { model | draft = { draft | mediaUploading = True } }
+                ! [ Command.uploadMedia (List.head model.clients) id ]
 
         UploadError error ->
-            { model | errors = addErrorNotification error model } ! []
+            { model
+                | draft = { draft | mediaUploading = False }
+                , errors = addErrorNotification error model
+            }
+                ! []
 
         UploadResult encoded ->
             if encoded == "" then
@@ -297,10 +303,15 @@ update draftMsg currentUser ({ draft } as model) =
                             { model
                                 | draft =
                                     { draft
-                                        | attachments = List.append draft.attachments [ attachment ]
+                                        | mediaUploading = False
+                                        , attachments = List.append draft.attachments [ attachment ]
                                     }
                             }
                                 ! []
 
                         Err error ->
-                            { model | errors = addErrorNotification error model } ! []
+                            { model
+                                | draft = { draft | mediaUploading = False }
+                                , errors = addErrorNotification error model
+                            }
+                                ! []

src/View/Draft.elm

@@ -319,7 +319,10 @@ fileUploadField draft =
                     List.map attachmentPreview draft.attachments
               else
                 text ""
-            , if List.length draft.attachments < 4 then
+            , if draft.mediaUploading then
+                button [ class "btn btn-default btn-loading", disabled True ]
+                    [ text "Uploading media..." ]
+              else if List.length draft.attachments < 4 then
                 input
                     [ type_ "file"
                     , id "draft-attachment"