Blogging: prevent submitting before image is uploaded

modules/blogging/src/Volo.Blogging.Web/Pages/Blogs/Posts/Edit.cshtml

@@ -79,7 +79,7 @@
 
                                 </div>
                                 <div class="mt-3 d-flex flex-row-reverse">
-                                    <abp-button button-type="Primary" type="submit" form="edit-post-form" text="@L["Submit"].Value" icon="check" />
+                                    <abp-button id="PostFormSubmitButton" button-type="Primary" type="submit" form="edit-post-form" text="@L["Submit"].Value" icon="check" />
 
                                     <a asp-page="/Blog/Posts/Detail" asp-route-postUrl="@Model.Post.Url" asp-route-blogShortName="@Model.BlogShortName" class="btn btn-default mr-2"><span>@L["Cancel"]</span></a>
                                 </div>

modules/blogging/src/Volo.Blogging.Web/Pages/Blogs/Posts/New.cshtml

@@ -77,7 +77,7 @@
 
                                 </div>
                                 <div class="mt-3 d-flex flex-row-reverse">
-                                    <abp-button button-type="Primary" type="submit" form="new-post-form" text="@L["Submit"].Value" icon="check" />
+                                    <abp-button id="PostFormSubmitButton" button-type="Primary" type="submit" form="new-post-form" text="@L["Submit"].Value" icon="check" />
 
                                     <a asp-page="./Index" class="btn btn-default mr-2"><span>@L["Cancel"]</span></a>
                                 </div>

modules/blogging/src/Volo.Blogging.Web/Pages/Blogs/Posts/edit.js

@@ -12,11 +12,12 @@
     var $coverImage = $("#CoverImage");
     var $postCoverImage = $('#Post_CoverImage');
     var $coverImageFile = $('#CoverImageFile');
-
+    var $postFormSubmitButton = $('#PostFormSubmitButton');
 
     var setCoverImage = function (file) {
         $postCoverImage.val(file.fileUrl);
         $coverImage.attr("src", file.fileUrl);
+        $postFormSubmitButton.removeAttr('disabled');
     };
 
     var uploadCoverImage = function (file) {
@@ -56,6 +57,7 @@
             return;
         }
 
+        $postFormSubmitButton.attr('disabled',true);
         var file = $coverImageFile.prop('files')[0];
         uploadCoverImage(file);
     });
@@ -113,7 +115,7 @@
             var validationResult = $form.validate();
             abp.message.warn(validationResult.errorList[0].message); //TODO: errors can be merged into lines. make sweetalert accept HTML.
             e.preventDefault();
-            return false; //for old browsers 
+            return false; //for old browsers
         }
 
         $submitButton.buttonBusy();

modules/blogging/src/Volo.Blogging.Web/Pages/Blogs/Posts/new.js

@@ -12,11 +12,13 @@
     var $coverImage = $("#CoverImage");
     var $postCoverImage = $('#Post_CoverImage');
     var $coverImageFile = $('#CoverImageFile');
+    var $postFormSubmitButton = $('#PostFormSubmitButton');
 
     var setCoverImage = function (file) {
         $postCoverImage.val(file.fileUrl);
         $coverImage.attr("src", file.fileUrl);
         $coverImage.show();
+        $postFormSubmitButton.removeAttr('disabled');
     };
 
     var uploadCoverImage = function (file) {
@@ -39,6 +41,7 @@
         if (!$coverImageFile.prop('files').length) {
             return;
         }
+        $postFormSubmitButton.attr('disabled',true);
         var file = $coverImageFile.prop('files')[0];
         uploadCoverImage(file);
     });