Download blob as a file in Angular

Recently I got a requirement to download base64 string as .pfx file in Angular application.

So I did that using Blob API in javascript.

More about Blob

So I did a sample application on stackblitz using Angular.

const data = 'some text';
const blob =new Blob([data],{type:'application/octet-stream'});
this.fileUrl =this.sanitizer.bypassSecurityTrustResourceUrl(window.URL.createObjectURL(blob));

As above we need to create Blob object. As second parameter we need to specify Mime type. And in Angular to make the Blob url safe in DOM we can use DomSanitizer.

We have to import DomSanitizer

import { DomSanitizer } from '@angular/platform-browser';</div>
// constructor
constructor(private sanitizer: DomSanitizer) { }

In html template

<a>DownloadFile</a>

Working sample on stackblitz

🙂

 

 

 

Advertisements

Disabled directive in angular

Problem:

When using reactive form in angular disabled property binding does not work in template.

Solutions:

  1. Using disable method programmatically in form control.
  2. Create directive

In my case I couldn’t use disabled since my input is not a control in form. It’s just a input in template.

So I created directive.

You can find it here. It might help some one having my requirement.

Live demo

import { Directive, ElementRef, Input } from ‘@angular/core’;
import { OnChanges } from ‘@angular/core/src/metadata/lifecycle_hooks’;

/**
* Directive for add disable attribute to input element
* Eg: [appInputDisabled]=”isDisabled”
* @export
* @class InputDisabledDirective
* @implements {OnChanges}
*/
@Directive({
selector: ‘[appInputDisabled]’
})

export class InputDisabledDirective implements OnChanges {
@Input() appInputDisabled: boolean;

constructor(private el: ElementRef) { }

ngOnChanges(): void {
this.el.nativeElement.disabled = (this.appInputDisabled) ? true : false;
}

}

Source code here ….

Code on stackblitz

Upload file and send email with attachment in ASP.NET MVC5 using Postal

So In previous post we came to know about Postal. yes it is easy.

We can send email in ASP.NET MVC easily.

So How about sending attachment using Postal Nuget package.

So I did create a sample project for uploading file and send email with that attachment using postal.

Indeed it is very easy.

Add Postal Your tool box.

  1. Create empty ASP.net MVC5 project
  2. Add Posta Package

nuget command

Then Package references are added and New folder is created as Email under the Views folder.

email folder

3. Added controller named HomeController and added simple view to enter email and upload file.

indexview

yes it is ugly. no need to worry. wanted make this work. no fancy works here.

indexviewui

4. Add smtp configurations to web.config

webconfig

I am using gmail smtp. fill user name and password. Postman will use this configurations to send emails.

5. Add coding to send email


[HttpPost]
public ActionResult Index(string email) {
if (!string.IsNullOrEmpty(email)) {
if (Request.Files.Count > 0) {

dynamic emailToSend = new Email("EmailWithAttachement");

byte[] data = new byte[0];
data = new byte[Request.Files[0].ContentLength];

var fileName = Request.Files[0].FileName;
var extension = Path.GetExtension(Request.Files[0].FileName);
Request.Files[0].InputStream.Read(data, 0, Request.Files[0].ContentLength);

using (var stream = new MemoryStream(data, true))
{
emailToSend.Attach(new Attachment(stream, fileName + extension));
emailToSend.To = email;
emailToSend.Send();
}
}
}

return View();
}

 

codes

Read uploaded file and convert it into byte array and attach it into email.

So finally we want to add view to be used by postal to send email.

Add view name “EmailWithAttachement” under email folder under Views folder.

emailview

edit view as below. you can edit view as you wish.

emailviewcode

finally run the project and enter email address and upload a file then email will be sent to provided email with attachment

actualemail

 

yes it is very simple.

Download source code here

Enabling Cross-Origin Requests in ASP.NET Web API

Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘<domain>’ is therefore not allowed access. The response had HTTP status code 405.

capture

We want to expose our api to be called from other domain. In default browsers doesen’t allow cross domain xhr requests.

To get it fixed we want to allow CORS in our web api.

I have created video on enabling CORS in web api.

watch video

More about CORS in Web api

Reading Excel files easily in c# using Excel Data Reader

So I found a useful Package to read excel files easily. No more cumbersome codes needed.

I have written post on How to read Excel file in c# in here . But lot of codes.

So I found ExcelDataReader package in github.

Excel Data Reader

It is awesome.

Just few lines of codes to read files as below.


string filePath = "Book1.xlsx";
FileStream stream = File.Open(filePath, FileMode.Open, FileAccess.Read);

IExcelDataReader excelReader = ExcelReaderFactory.CreateOpenXmlReader(stream);

excelReader.IsFirstRowAsColumnNames = true;
DataSet result = excelReader.AsDataSet();

excelReader.Close();

done.

Download sample project file from github