From 0e820ed086147c334a94e5de70bf054a458b62be Mon Sep 17 00:00:00 2001 From: Berkan Date: Thu, 11 Feb 2021 10:00:08 +0300 Subject: [PATCH] Add event cover image section into event edit page --- src/EventHub.Web/Pages/Events/Edit.cshtml | 30 +++++ src/EventHub.Web/Pages/Events/Edit.cshtml.cs | 14 +++ src/EventHub.Web/Pages/Events/Edit.js | 121 +++++++++++++++++++ 3 files changed, 165 insertions(+) diff --git a/src/EventHub.Web/Pages/Events/Edit.cshtml b/src/EventHub.Web/Pages/Events/Edit.cshtml index 6158bb6..c34bb77 100644 --- a/src/EventHub.Web/Pages/Events/Edit.cshtml +++ b/src/EventHub.Web/Pages/Events/Edit.cshtml @@ -2,6 +2,7 @@ @inject IHtmlLocalizer 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 @@
  • Event Timing
    • +
  • + Event Cover Image +
    • @@ -58,5 +62,31 @@
    +
    +
    + + + +
    + +
    + + + @L["ChooseEventCoverImageInfo"] +
    +
    +     +     + + + +
    + + + + event-cover-image-preview + + +
    \ No newline at end of file diff --git a/src/EventHub.Web/Pages/Events/Edit.cshtml.cs b/src/EventHub.Web/Pages/Events/Edit.cshtml.cs index 75507bc..ee1b9ad 100644 --- a/src/EventHub.Web/Pages/Events/Edit.cshtml.cs +++ b/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; } + } } \ No newline at end of file diff --git a/src/EventHub.Web/Pages/Events/Edit.js b/src/EventHub.Web/Pages/Events/Edit.js index a6b549e..b57517a 100644 --- a/src/EventHub.Web/Pages/Events/Edit.js +++ b/src/EventHub.Web/Pages/Events/Edit.js @@ -1,4 +1,6 @@ $(function () { + var l = abp.localization.getResource('EventHub'); + $("#Event_CountryId").prepend(""); $("#Event_Language").prepend(""); @@ -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); + } + }); + }); }); \ No newline at end of file