mirror of https://github.com/abpframework/eventhub
Berkan Sasmaz
6 years ago
9 changed files with 317 additions and 39 deletions
@ -1,7 +1,110 @@ |
|||
@page "/organizations/new" |
|||
@inject IHtmlLocalizer<EventHubResource> L |
|||
@using EventHub.Localization |
|||
@using EventHub.Organizations |
|||
@using Microsoft.AspNetCore.Mvc.Localization |
|||
@model EventHub.Web.Pages.Organizations.NewPageModel |
|||
<h1>@L["NewOrganization"]</h1> |
|||
<abp-dynamic-form abp-model="Organization" submit-button="true" /> |
|||
|
|||
@section scripts { |
|||
<abp-script-bundle> |
|||
<abp-script src="/Pages/Organizations/New.js"/> |
|||
</abp-script-bundle> |
|||
} |
|||
|
|||
<div class="container pt-4"> |
|||
<div class="row py-4"> |
|||
<div class="col-md-9 mx-auto profile-content"> |
|||
<div class="card"> |
|||
<div class="card-body" style="min-height: 496px"> |
|||
<h3 class="mb-4">Create New Organization</h3> |
|||
<form method="post" enctype="multipart/form-data"> |
|||
<div class="form"> |
|||
<div class="row"> |
|||
|
|||
<div class="col-md-12"> |
|||
<h4 class="mb-4">Profile Image</h4> |
|||
<div class="row"> |
|||
<div class="col-4"> |
|||
<div class="image-area"> |
|||
<img id="imageResult" src="#" alt="" class="img-fluid rounded shadow-sm mx-auto d-block"> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="col-8"> |
|||
<div> |
|||
<p class="mb-3">Photo size should be <span class="text-primary">max @(OrganizationConsts.MaxProfilePictureFileSize / (1024 * 1024)) MB.</span></p> |
|||
<input type="file" id="Organization_ProfilePictureFile" asp-for="Organization.ProfilePictureFile" class="form-control border-0" hidden> |
|||
<label id="upload-label" for="Organization_ProfilePictureFile" class="btn btn-primary btn-lg text-white">Upload</label> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="col-md-6"> |
|||
<div class="form-label-group"> |
|||
<input type="text" id="inputName" asp-for="Organization.Name" class="form-control" placeholder="Name *" required=""> |
|||
<label for="inputName">Name*</label> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="col-md-6"> |
|||
<div class="form-label-group"> |
|||
<input type="text" id="inputDisplayname" asp-for="Organization.DisplayName" class="form-control" placeholder="Display Name*" required=""> |
|||
<label for="inputDisplayname">Display Name*</label> |
|||
</div> |
|||
</div> |
|||
<div class="col-md-12"> |
|||
<div class="form-label-group"> |
|||
<input type="text" id="inputDescription" asp-for="Organization.Description" class="form-control" placeholder="Description*" required=""> |
|||
<label for="inputDescription">Description*</label> |
|||
</div> |
|||
</div> |
|||
<div class="col-md-6"> |
|||
<div class="form-label-group"> |
|||
<input type="text" id="inputWebsite" class="form-control" asp-for="Organization.Website" placeholder="Website"> |
|||
<label for="inputWebsite">Website</label> |
|||
</div> |
|||
</div> |
|||
<div class="col-md-6"> |
|||
<div class="form-label-group"> |
|||
<input type="text" id="inputTwitterusername" asp-for="Organization.TwitterUsername" class="form-control" placeholder="Twitter Username"> |
|||
<label for="inputTwitterusername">Twitter Username</label> |
|||
</div> |
|||
</div> |
|||
<div class="col-md-6"> |
|||
<div class="form-label-group"> |
|||
<input type="text" id="inputGitHubusername" asp-for="Organization.GitHubUsername" class="form-control" placeholder="GitHub Username"> |
|||
<label for="inputGitHubusername">GitHub Username</label> |
|||
</div> |
|||
</div> |
|||
<div class="col-md-6"> |
|||
<div class="form-label-group"> |
|||
<input type="text" id="inputFacebookusername" asp-for="Organization.FacebookUsername" class="form-control" placeholder="Facebook Username"> |
|||
<label for="inputFacebookusername">Facebook Username</label> |
|||
</div> |
|||
</div> |
|||
<div class="col-md-6"> |
|||
<div class="form-label-group"> |
|||
<input type="text" id="inputInstagramusername" asp-for="Organization.InstagramUsername" class="form-control" placeholder="Instagram Username"> |
|||
<label for="inputInstagramusername">Instagram Username</label> |
|||
</div> |
|||
</div> |
|||
<div class="col-md-6"> |
|||
<div class="form-label-group"> |
|||
<input type="text" id="inputMediumusername" asp-for="Organization.MediumUsername" class="form-control" placeholder="Medium Username"> |
|||
<label for="inputMediumusername">Medium Username</label> |
|||
</div> |
|||
</div> |
|||
<div class="col-md-12 text-right"> |
|||
<button type="submit" class="btn btn-primary btn-lg"> |
|||
Submit Organization |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</form> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
@ -0,0 +1,56 @@ |
|||
$(function () { |
|||
var l = abp.localization.getResource('EventHub'); |
|||
|
|||
var fileInput = document.getElementById('Organization_ProfilePictureFile'); |
|||
var file; |
|||
|
|||
fileInput.addEventListener('change', function () { |
|||
|
|||
file = fileInput.files[0]; |
|||
|
|||
var permittedExtensions = ["jpg", "jpeg", "png"] |
|||
var fileExtension = $(this).val().split('.').pop(); |
|||
if (permittedExtensions.indexOf(fileExtension) === -1) { |
|||
abp.message.error(l('OrganizationCoverImageExtensionNotAllowed')) |
|||
.then(() => { |
|||
$('#Organization_ProfilePictureFile').val(''); |
|||
file = null; |
|||
}); |
|||
} else if (file.size > 1024 * 1024) { |
|||
abp.message.error(l('OrganizationCoverImageSizeExceedMessage')) |
|||
.then(() => { |
|||
$('#Organization_ProfilePictureFile').val(''); |
|||
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 (imageError) { |
|||
readURL(file); |
|||
} |
|||
} |
|||
|
|||
var objectURL = URL.createObjectURL(file); |
|||
img.src = objectURL; |
|||
}); |
|||
|
|||
function readURL(input) { |
|||
if (input) { |
|||
var reader = new FileReader(); |
|||
|
|||
reader.onload = function (e) { |
|||
$('#imageResult').attr('src', e.target.result); |
|||
} |
|||
|
|||
reader.readAsDataURL(input); |
|||
} |
|||
} |
|||
}); |
|||
Loading…
Reference in new issue