Profile Image Upload

codingdefined · Jul 18, 2019 · ab7af63 · ab7af63
1 parent dab506c
commit ab7af63
Show file tree

Hide file tree

Showing 17 changed files with 363 additions and 134 deletions.
diff --git a/src/LetsDisc.Application/Users/UserAppService.cs b/src/LetsDisc.Application/Users/UserAppService.cs
@@ -20,6 +20,10 @@
 using LetsDisc.PostDetails;
 using LetsDisc.Posts;
 using Abp.AutoMapper;
+using Microsoft.AspNetCore.Http;
+using System.IO;
+using Abp.UI;
+using Microsoft.AspNetCore.Mvc;
 
 namespace LetsDisc.Users
 {
@@ -201,6 +205,7 @@ public async Task<UserInfo> UpdateUserInfo(UserInfo input)
             userDetails.AboutMe = input.UserDetails.AboutMe;
             userDetails.Location = input.UserDetails.Location;
             userDetails.WebsiteUrl = input.UserDetails.WebsiteUrl;
+            userDetails.ProfileImageUrl = input.UserDetails.ProfileImageUrl;
 
             CheckErrors(await _userManager.UpdateAsync(user));
             await _userDetailsRepository.UpdateAsync(userDetails);   
@@ -220,7 +225,33 @@ public async Task<PagedResultDto<UserDetailsDto>> GetALLUsers(PagedResultRequest
             };
         }
 
-        protected override IQueryable<User> ApplySorting(IQueryable<User> query, PagedResultRequestDto input)
+        public async Task<string> UploadProfilePicture([FromForm(Name = "uploadedFile")] IFormFile file, long userId)
+        {
+            if (file == null || file.Length == 0)
+                throw new UserFriendlyException("Please select profile picture");
+
+            var folderName = Path.Combine("Resources", "ProfilePics");
+            var filePath = Path.Combine(Directory.GetCurrentDirectory(), folderName);
+
+            if (!Directory.Exists(filePath))
+            {
+                Directory.CreateDirectory(filePath);
+            }
+
+            //var fileUniqueId = Guid.NewGuid().ToString().ToLower().Replace("-", string.Empty);
+            var uniqueFileName = $"{userId}_profilepic.png";
+
+            var dbPath = Path.Combine(folderName, uniqueFileName);
+
+            using (var fileStream = new FileStream(Path.Combine(filePath, uniqueFileName), FileMode.Create))
+            {
+                await file.CopyToAsync(fileStream);
+            }
+
+            return dbPath;
+        }
+
+    protected override IQueryable<User> ApplySorting(IQueryable<User> query, PagedResultRequestDto input)
         {
             return query.OrderBy(r => r.UserName);
         }

diff --git a/src/LetsDisc.Web.Host/Startup/FileUploadOperation.cs b/src/LetsDisc.Web.Host/Startup/FileUploadOperation.cs
@@ -0,0 +1,33 @@
+using Swashbuckle.AspNetCore.Swagger;
+using Swashbuckle.AspNetCore.SwaggerGen;
+
+namespace LetsDisc.Web.Host.Startup
+{
+    public class FileUploadOperation : IOperationFilter
+    {
+        public void Apply(Operation operation, OperationFilterContext context)
+        {
+            if (operation.OperationId.ToLower() == "apiservicesappuseruploadprofilepicturepost")
+            {
+                operation.Parameters.Clear();
+                operation.Parameters.Add(new NonBodyParameter
+                {
+                    Name = "uploadedFile",
+                    In = "formData",
+                    Description = "Upload File",
+                    Required = true,
+                    Type = "file"
+                });
+                operation.Parameters.Add(new NonBodyParameter
+                {
+                    Name = "userId",
+                    In = "query",
+                    Description = "",
+                    Required = true,
+                    Type = "long"
+                });
+                operation.Consumes.Add("multipart/form-data");
+            }
+        }
+    }
+}
diff --git a/src/LetsDisc.Web.Host/Startup/Startup.cs b/src/LetsDisc.Web.Host/Startup/Startup.cs
@@ -19,6 +19,7 @@
 using Abp.AspNetCore.SignalR.Hubs;
 using Microsoft.AspNetCore.Http;
 using System.Security.Principal;
+using Microsoft.Extensions.FileProviders;
 
 namespace LetsDisc.Web.Host.Startup
 {
@@ -79,6 +80,7 @@ public IServiceProvider ConfigureServices(IServiceCollection services)
                 });
                 // Assign scope requirements to operations based on AuthorizeAttribute
                 options.OperationFilter<SecurityRequirementsOperationFilter>();
+                options.OperationFilter<FileUploadOperation>();
             });
 
             services.ConfigureExternalCookie(o =>
@@ -112,6 +114,11 @@ public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerF
 
             app.Use(async (context, next) => { await next(); if (context.Response.StatusCode == 404 && !Path.HasExtension(context.Request.Path.Value)) { context.Request.Path = "/index.html"; await next(); } });
             app.UseStaticFiles();
+            app.UseStaticFiles(new StaticFileOptions()
+            {
+                FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), @"Resources")),
+                RequestPath = new PathString("/Resources")
+            });
 
             app.UseAuthentication();
             app.UseAbpRequestLocalization();

diff --git a/src/LetsDisc.Web.Host/src/account/login/login.component.html b/src/LetsDisc.Web.Host/src/account/login/login.component.html
@@ -1,39 +1,4 @@
-<!--<div class="card" id="LoginArea">
-    <div #cardBody class="body">
-        <form #loginForm="ngForm" id="LoginForm" method="post" novalidate>
-            <h4 class="text-center">{{l("LogIn")}}</h4>
-
-
-            <div class="input-group">
-                <div class="input-group-prepend">
-                    <span class="input-group-text"><i class="material-icons">person</i></span>
-                </div>
-                <input materialInput [(ngModel)]="loginService.authenticateModel.userNameOrEmailAddress" autoFocus class="form-control" type="text" autocomplete="off" placeholder="{{l('UserNameOrEmail')}}" name="userNameOrEmailAddress" required maxlength="255" />
-            </div>
-            <div class="input-group">
-                <div class="input-group-prepend">
-                    <span class="input-group-text"><i class="material-icons">lock</i></span>
-                </div>
-                <input materialInput type="password" [(ngModel)]="loginService.authenticateModel.password" class="form-control" name="password" placeholder="{{l('Password')}}" required maxlength="32">
-            </div>
-            <div class="col-xs-8 p-t-5">
-                <input type="checkbox" [(ngModel)]="loginService.rememberMe" name="rememberMe" id="rememberme" class="filled-in chk-col-pink" value="true">
-                <label for="rememberme">{{l("RememberMe")}}</label>
-            </div>
-            <div class="col-xs-4">
-                <button id="LoginButton" class="btn btn-block bg-pink waves-effect" type="submit" (click)="login()">{{l("LogIn")}}</button>
-            </div>
-            <div class="row m-t-15 m-b--20" *ngIf="isSelfRegistrationAllowed">
-                <div class="col-xs-12">
-                    <a [routerLink]="['../register']">{{l("Register")}}</a>
-                </div>
-            </div>
-            
-        </form>
-    </div>
-</div>-->
-
-<div class="card" id="LoginArea">
+<div class="card" id="LoginArea">
     <div #cardBody class="body">
         <form #loginForm="ngForm" id="LoginForm" method="post" novalidate>
 

diff --git a/src/LetsDisc.Web.Host/src/app/app.component.ts b/src/LetsDisc.Web.Host/src/app/app.component.ts
@@ -43,7 +43,7 @@ export class AppComponent extends AppComponentBase implements OnInit, AfterViewI
 
     onResize(event) {
         // exported from $.AdminBSB.activateAll
-        $.AdminBSB.leftSideBar.setMenuHeight();
+        //$.AdminBSB.leftSideBar.setMenuHeight();
         $.AdminBSB.leftSideBar.checkStatuForResize(false);
 
         // exported from $.AdminBSB.activateDemo

diff --git a/src/LetsDisc.Web.Host/src/app/layout/topbar.component.html b/src/LetsDisc.Web.Host/src/app/layout/topbar.component.html
@@ -18,21 +18,21 @@
         </div>
         <div class="collapse navbar-collapse justify-content-end" id="navbar-collapse">
             <ul class="nav navbar-nav">
-                <li class="search-button"><a href="javascript:void(0);" class="js-search" data-close="true"><i class="material-icons">search</i></a></li>
-                <li class="pull-right" *ngIf="appSession.user">
-                    <a aria-haspopup="true" class="nav-link user-loggedin" data-toggle="dropdown" dropdowntoggle="" href="#" role="button" aria-expanded="false">
-                        <img class="user-image" src="assets/images/user.png" width="48" height="48" alt="User" />{{shownLoginName | titlecase}}
+                <li class="m-auto padding-top-8" ><a href="javascript:void(0);" class="js-search" data-close="true"><i class="material-icons">search</i></a></li>
+                <li class="nav-item dropdown" *ngIf="appSession.user">
+                    <a aria-haspopup="true" class="nav-link user-loggedin dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">
+                        <img class="user-image" src="assets/images/user.png" width="36" height="36" alt="User" />{{shownLoginName | titlecase}}
                     </a>
-                    <ul class="dropdown-menu dropdown-item">
-                        <li><a routerLink="/users/{{userId}}/{{shownLoginName.trim().replace(' ', '-')}}"><i class="fa fa-user"></i>Profile</a></li>
-                        <li role="separator" class="divider"></li>
-                        <li><a (click)="logout()"><i class="fa fa-lock"></i>{{l('Logout')}}</a></li>
-                    </ul>
+                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
+                        <a class="dropdown-item" routerLink="/users/{{userId}}/{{shownLoginName.trim().replace(' ', '-')}}"><i class="fa fa-user"></i>Profile</a>
+                        <div class="dropdown-divider"></div>
+                        <a class="dropdown-item" (click)="logout()"><i class="fa fa-lock"></i>{{l('Logout')}}</a>
+                    </div>
                 </li>
-                <li class="pull-right" *ngIf="!appSession.user">
+                <li lass="nav-item m-auto" *ngIf="!appSession.user">
                     <a class="nav-link" [routerLink]="['/account/login']"><i class="material-icons">person</i><span class="login-text">Log In</span></a>
                 </li>
             </ul>
         </div>
     </div>
-</nav>
+</nav>
diff --git a/src/LetsDisc.Web.Host/src/app/posts/question-detail/question-detail.component.css b/src/LetsDisc.Web.Host/src/app/posts/question-detail/question-detail.component.css
@@ -85,7 +85,8 @@
 }
 
 .post-menu {
-    margin-top:20px;
+    margin-top: 20px;
+    color: #007bff 
 }
 
 .share-post, .edit-post {

diff --git a/src/LetsDisc.Web.Host/src/app/posts/question-detail/question-detail.component.html b/src/LetsDisc.Web.Host/src/app/posts/question-detail/question-detail.component.html
@@ -24,7 +24,7 @@ <h3>
                         </a>
                     </div>
                 </div>
-                <div class="user-info" [style.display]="editing ? 'none' : 'inherit' ">
+                <div class="user-info mt-3" [style.display]="editing ? 'none' : 'inherit' ">
                     <div class="total-views">viewed {{question?.post.viewCount | i18nPlural: itemPluralMapping['time'] }}</div>
                     <div class="posted-time">asked {{question?.post.creationTime | timeAgo}} by {{question?.post.creatorUserName}}</div>
                 </div>