DEV Community: Hemant Joshi

Uploading Image from Angular to ASP.NET Core Web API

Hemant Joshi — Fri, 19 Jul 2019 05:37:00 +0000

In this post we will be discussing about creating an application where you can upload image from angular 8 to ASP.NET Core Web API using ASP.NET Boilerplate. In this we will be going through Back End first i.e. ASP.NET Core part and then we will go through the frontend i.e. Angular.

I have written a function UploadProfilePicture in UserAppService which will handle the upload of profile pic and then create image on a predefined location.

The logic behind it very straight forward where we are providing the path where the file will be stored. We check if the directory exists or not, if not then creating the directory. Then we are creating the file stream object and then storing the file in that location.

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 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;
}

Few things to note here :

IFormFile object will come as null if the name attribute of the file input is not same as that of the name of the parameter used in the controller. So you should name then same or use [FromForm(Name = "")] and then assign the name as shown below.
Since we are creating a new directory we need to tell ASP.NET Core to serve the static files from that location. For that we need to modify the Configure method of Startup.cs class as shown below :

app.UseStaticFiles(new StaticFileOptions()
{
 FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), @"Resources")),
 RequestPath = new PathString("/Resources")
});

When using IFormFile, the swagger will give you multiple text boxes like ContentType, ContentDisposition, Headers, Length, Name, FileName etc instead of file upload control. To change the textboxes to the actual file upload control we need to implement IOperationFilter and then implement the apply method as shown below. The main part is type where we need to define file, since we are clearing all the previous parameters we also need to add the user id parameter.

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().Contains("upload")))
   {
    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");
   }
  }
 }
}

Thus we are finished with the backend, now we will go forward with the frontend implementation.

HTML

In HTML we will have an input of type file and then we have both change and click function so that user can upload the same image twice.

<div class="col-md-3 profile-image-edit">
 <label class="hoverable" for="fileInput">
 ... img tag
  <span class="hover-text">Choose file</span>
  <span class="background"></span>
 </label>
 <br />
 <input #fileInput id="fileInput" type='file' (click)="fileInput.value = null" value="" (change)="onSelectFile($event.target.files)">
 <button class="btn btn-default" *ngIf="url" (click)="delete()">delete</button>
</div>

CSS

.hoverable {
    position: relative;
    cursor: pointer;
    height: 150px;
    width: 150px;
    border-radius: 50%;
}

    .hoverable .hover-text {
        position: absolute;
        display: none;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        z-index: 2;
    }

    .hoverable .background {
        position: absolute;
        display: none;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-color: rgba(255, 255, 255, 0.5);
        pointer-events: none;
        border-radius: 50%;
        z-index: 1;
    }

    .hoverable:hover .hover-text {
        display: block;
    }

    .hoverable:hover .background {
        display: block;
    }

Code Behind

In the code behind we will have a function which has a fileReader ojject to preview the image as well as we will be calling our backend service for uploading the image.

onSelectFile(files: FileList) {

  if (files.length === 0)
    return;

  this.fileToUpload = files.item(0);


  const fileReader: FileReader = new FileReader();
  fileReader.readAsDataURL(this.fileToUpload);

  fileReader.onload = (event: any) => {
    this.url = event.target.result;
  };

  this.files.push({ data: this.fileToUpload, fileName: this.fileToUpload.name });

  this._userService.uploadProfilePicture(this.files[0], this.user.id)
    .subscribe((result: string) => {
      this.userDetails.profileImageUrl = result;
  });
}

delete() {
  this.url = null;
}

GitHub Commit: https://github.com/codingdefined/LetsDisc/commit/ab7af63ba3cf94c23278fc2fe00d3769672bf506

Also Published: CodingDefined.com

How I deployed my Node.js Bot to Heroku

Hemant Joshi — Mon, 14 Jan 2019 09:28:56 +0000

As you all know that Heroku is a platform as a service which helps developers to build, run, and operate applications entirely in the cloud. I have started with free dyno which is for experimenting and only has 512 MB RAM.

I am using Windows so the steps will be of Windows machine.

At first I need to download the Heroku CLI from https://devcenter.heroku.com/articles/heroku-cli. It says that it updates the path but you need to double check, for my case I need to manually update the Path. Before installing just check that you have node and npm installed in your system.

Then I logged into Heroku using command heroku login which asked my Email and Password. Once authenticated, I created my first app using command heroku create which creates a app for me.

Since my app was not in GitHub, I need to create it using git init and then adding heroku as my remote using command git remote add heroku https://git.heroku.com/my-app-name.git. Then we need to commit the code using command git commit -am "Initial Commit". Once done, just pushing it to heroku git push heroku master.

Since my app is a bot, I need to create a ProcFile on the root of the directry, the contents of the ProcFile is shown below

worker: node index.js

I pushed the code again with the same command git push heroku master. And then switched on the Worker and switched off the web as shown below.

Also since I was using some confidential information in my bot, like a bot key I created a config vars in the settings tab as shown below and then used it using process.env.KEY and process.env.NAME in the bot.

In this way you can deploy your bot with Heroku. Happy Coding :)

Source : CodingDefined.com

How I added AppVeyor, Codecov to .Net Core Open Source Project

Hemant Joshi — Thu, 10 Jan 2019 10:22:44 +0000

Source Link

AppVeyor is Continous Integration and Deployment solution where you can build, test and deploy your apps faster to any platform. One good advantage of using appveyor is that it is free for Open Source repositories. It's actually good when your repo is accepting pull request from people and then you can test if the pull request is merging or not.

On the other hand, Codec helps you to do a health check on your code, i.e. it is a measurement on how many lines of your code are executed when automated tests are performing. Now 100% Code Coverage means that all your code is covered under tests, but that is very hard to achieve.

I have to do a lot of commits to test the AppVeyor and Codecov and at last, it iwas successful and I can build and generate a code coverage report for my application. At first, I have started using NuGet package OpenCover to create code-coverage in my local environment and it was working after trial and error method.

The Script I have used is as below

OpenCover.Console.exe -register:user
-target:"C:\Program Files\dotnet\dotnet.exe"
-targetargs:"test\LetsDisc.Tests\bin\Debug\netcoreapp2.1\LetsDisc.Tests.dll -noshadow"
-oldStyle -output:".\coverage.xml"
-filter:"+[LetsDisc*]* -[Tests*]*" -coverbytest:"XUnit"

But as a developer, we should know that what works in local has a 100% probability that it will not work in some other environments. That is what happened in my case when I tried to run the above script in AppVeyor some or the other issues are popping up. But at last, I made it work. So the final script is

version: 1.0.{build}
image: Visual Studio 2017
configuration: Release
skip_tags: true
before_build:
 - nuget restore
 - nuget install OpenCover -OutputDirectory packages -Version 4.6.519
build_script:
 - msbuild /verbosity:quiet LetsDisc.sln
test_script:
 - .\packages\OpenCover.4.6.519\tools\OpenCover.Console.exe
-register:user
-target:"C:/Program Files/dotnet/dotnet.exe"
-targetargs:"test --logger:trx;LogFileName=results.trx
/p:DebugType=full
C:\projects\letsdisc\test\LetsDisc.Tests\LetsDisc.Tests.csproj"
-output:"coverage.xml" -filter:"+[LetsDisc*]* -[Tests*]*"
after_test:
  - ps: |
      $env:PATH = 'C:\msys64\usr\bin;' + $env:PATH
      Invoke-WebRequest -Uri 'https://codecov.io/bash' -OutFile codecov.sh
      bash codecov.sh -f "coverage.xml"

The above script means on every build I will be updating it with a version of 1.0.{buildNumber}, then use Visual Studio 2017 as an image to build the project, then use configuration as release mode and not debug so that it can be easily deployable. Before the build just restoring all the nuget package, as well as installing OpenCover specific version which works with AppVeyor. After that building the project using msbuild and then running my test script to run the tests and create the coverage report. After the test is scuccessful deploying the coverage.xml file to the Codecov website.

Repo : https://github.com/codingdefined/LetsDisc

It was fun as well as a learning experiment where I learned to use an Appveyor app as well adding the Coverage report to my project.