Add event cover image section into event edit page

src/EventHub.Web/Pages/Events/Edit.cshtml

@@ -2,6 +2,7 @@
 @inject IHtmlLocalizer<EventHubResource> L
 @using EventHub.Localization
 @using Microsoft.AspNetCore.Mvc.Localization
+@using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Modal
 @model EventHub.Web.Pages.Events.EditPageModel
 
 @section scripts {
@@ -19,6 +20,9 @@
         <li class="nav-item">
             <a class="nav-link" id="event-timing-tab" data-toggle="pill" href="#event-timing" role="tab" aria-controls="event-timing" aria-selected="false">Event Timing</a>
         </li>
+        <li class="nav-item">
+            <a class="nav-link" id="event-cover-image-tab" data-toggle="pill" href="#event-cover-image" role="tab" aria-controls="event-cover-image" aria-selected="false">Event Cover Image</a>
+        </li>
     </ul>
     <div class="tab-content" id="pills-tabContent">
         <div class="tab-pane fade show active" id="event-info" role="tabpanel" aria-labelledby="event-info-tab">
@@ -58,5 +62,31 @@
                 <abp-button size="Large" button-type="Primary" type="submit" text="@L["Submit"].Value"/>
             </form>
         </div>
+        <div class="tab-pane fade" id="event-cover-image" role="tabpanel" aria-labelledby="event-cover-image-tab">
+            <form method="post" id="cover-image-form">
+                <input type="hidden" id="event-id" value="@Model.Event.Id"/>
+                <abp-row>
+                    <abp-column size="_12" v-align="Center">
+                        <div class="form-group">
+                            <label>@L["CoverImage"]</label>
+                            <div class="custom-file">
+                                <input id="event-cover-image-input" type="file" class="custom-file-input form-control">
+                                <label id="choose-cover-image" class="custom-file-label" for="customFile">@L["ChooseEventCoverImage"]</label>
+                                <small id="event-cover-image-info-text" class="form-text text-muted mt-2">@L["ChooseEventCoverImageInfo"]</small>
+                            </div>
+                        </div>
+                    </abp-column>
+                </abp-row>
+                
+                <abp-button class="btn-block" id="event-cover-image-btnSubmit" button-type="Primary" type="submit" text="@L["Submit"].Value" />
+            </form>
+        </div>
+        <abp-modal centered="true" scrollable="true" size="Small" id="cover-image-preview-modal">
+            <abp-modal-header title="Cover Image Preview"></abp-modal-header>
+            <abp-modal-body>
+                <img class="img-fluid" id="img-upload" alt="event-cover-image-preview"/>
+            </abp-modal-body>
+            <abp-modal-footer buttons="@(AbpModalButtons.Close)"></abp-modal-footer>
+        </abp-modal>
     </div>
 </div>

src/EventHub.Web/Pages/Events/Edit.cshtml.cs

@@ -6,7 +6,9 @@ using System.Globalization;
 using System.Linq;
 using System.Threading.Tasks;
 using EventHub.Events;
+using EventHub.Web.Helpers;
 using JetBrains.Annotations;
+using Microsoft.AspNetCore.Http;
 using Microsoft.AspNetCore.Mvc;
 using Microsoft.AspNetCore.Mvc.Rendering;
 using NUglify.Helpers;
@@ -158,4 +160,16 @@ namespace EventHub.Web.Pages.Events
             public DateTime EndTime { get; set; }
         }
     }
+    
+    public class EventCoverImageInput
+    {
+        [Required]
+        public Guid EventId { get; set; }
+
+        [Required]
+        [DataType(DataType.Upload)]
+        [MaxFileSize(EventConsts.MaxCoverImageFileSize)] 
+        [AllowedExtensions(new string[] { ".jpg", ".png", ".jpeg" })]
+        public IFormFile CoverImageFile { get; set; }
+    }
 }

src/EventHub.Web/Pages/Events/Edit.js

@@ -1,4 +1,6 @@
 $(function () {
+    var l = abp.localization.getResource('EventHub');
+
     $("#Event_CountryId").prepend("<option value=''></option>");
     $("#Event_Language").prepend("<option value=''></option>");
     
@@ -45,4 +47,123 @@ $(function () {
             }
         });
     })
+
+    // Cover Image Section
+    $('#event-cover-image-btnSubmit').prop( "disabled", true );
+    var fileInput = document.getElementById('event-cover-image-input');
+    var file;
+
+    fileInput.addEventListener('change', function () {
+        var showModal = true;
+
+        file = fileInput.files[0];
+
+        if (file === undefined){
+            $('#event-cover-image-input').val('');
+            $("#choose-cover-image").html(l("ChooseEventCoverImage"));
+            $('#event-cover-image-btnSubmit').prop( "disabled", true );
+            return;
+        }else{
+            document.getElementById("choose-cover-image").innerHTML = file.name;
+        }
+
+        var permittedExtensions = ["jpg", "jpeg", "png"]
+        var fileExtension = $(this).val().split('.').pop();
+        if (permittedExtensions.indexOf(fileExtension) === -1) {
+            showModal = false;
+            abp.message.error(l('EventCoverImageExtensionNotAllowed'))
+                .then(() =>  {
+                    $('#event-cover-image-file').val('');
+                    $("#choose-cover-image").html(l("ChooseEventCoverImage"));
+                    file = null;
+                });
+        }
+        else if(file.size > 1024*1024) {
+            showModal = false;
+            abp.message.error(l('EventCoverImageSizeExceedMessage'))
+                .then(() => {
+                    $('#event-cover-image-file').val('');
+                    $("#choose-cover-image").html(l("ChooseEventCoverImage"));
+                    file = null;
+                });
+        }
+
+        var img = new Image();
+        img.onload = function() {
+            var imageError = true;
+            var sizes = {
+                width: this.width,
+                height: this.height
+            };
+            URL.revokeObjectURL(this.src);
+
+            if(showModal && imageError) {
+                readURL(file);
+                $('#cover-image-preview-modal').modal('show');
+            }
+        }
+
+        var objectURL = URL.createObjectURL(file);
+        img.src = objectURL;
+        if (file.size > 0 && file.size < 1024*1024){
+            $('#event-cover-image-btnSubmit').prop( "disabled", false);
+        }
+    });
+
+    function readURL(input) {
+        if (input) {
+            var reader = new FileReader();
+
+            reader.onload = function (e) {
+                $('#img-upload').attr('src', e.target.result);
+            }
+
+            reader.readAsDataURL(input);
+        }
+    }
+
+    $('form#cover-image-form').submit(function (e) {
+        e.preventDefault();
+
+        var eventId = document.getElementById("event-id").value;
+
+        if(!$(this).valid()) {
+            return false;
+        }
+
+        var formData = new FormData();
+        formData.append("EventId", eventId);
+        formData.append("CoverImageFile", file);
+
+        $.ajax({
+            xhr: function() {
+                var xhr = new window.XMLHttpRequest();
+                xhr.upload.addEventListener("progress", function(evt) {
+                    if (evt.lengthComputable) {
+                        var percentComplete = evt.loaded / evt.total;
+                        percentComplete = parseInt(percentComplete * 100);
+                        if(percentComplete !== 100){
+                            fileInput.prop( "disabled", true );
+                            $('#event-cover-image-btnSubmit').prop( "disabled", true );
+                        }
+                    }
+                }, false);
+
+                return xhr;
+            },
+            url: abp.appPath + `api/event/save-cover-image`,
+            data: formData,
+            type: 'POST',
+            contentType: false,
+            processData: false,
+            success: function(data){
+                abp.message
+                    .success(l('EventCoverImageEditSuccessMessage'))
+                    .then(data => window.location.href = "/events/" + $("#event-detail-url").val());
+            },
+            error: function (data) {
+                abp.message.error(data.responseJSON.error.message);
+            }
+        });
+    });
 });