DEV Community: Broggi Quentin

Clipboard API and Angular

Broggi Quentin — Fri, 02 Feb 2024 15:10:25 +0000

In this article, I will show you how to display an image copied directly into your application using Ctrl+V.
Configuration in the Template

In your template, you will create a div that listens to the (paste) event. This event will be triggered when the user performs a CTRL+V, and it defines an area in your application where users can paste content:

<div style="height: 500px; width: 500px;" (paste)="onPaste($event)" >

      <img *ngIf="imageSrc" [src]="imageSrc" alt="Pasted Image">

  </div>

Processing Clipboard Data

This will provide you with a ClipboardEvent, in which you can find everything that has been copied, be it text, an image, a PDF file, etc. Here, I will filter based on the MIME type of the file to ensure it is indeed an image. However, you can also paste other file types like a Word or PDF file directly into an , for example, using Ctrl+V.

public onPaste(event: ClipboardEvent): void {

    const clipboardData = event.clipboardData;

    if (clipboardData) {

      const items = clipboardData.items;

    // Check if there is at least one item and if the first item is an         image

      if (items.length > 0 && items[0].type.indexOf('image') !== -1) {

// Attempt to retrieve the image file from the clipboard item

        const blob = items[0].getAsFile();

        if (blob) {

          const reader = new FileReader();

          reader.onload = (event: ProgressEvent<FileReader>) => {

            if (event.target)

            // Setting the component's imageSrc property to the base64 data URL of the image

              this.imageSrc = event.target.result as string;

          };

          reader.readAsDataURL(blob);

        }

      }

    }

  }

Remember to declare your imageSrc as public:

  public imageSrc = "";

Global Listening on the Document

You also have the option to set up global listening on the entire document, not just on a div, in this manner:

constructor(@Inject(DOCUMENT) private document: Document) { }

  ngOnInit() {

      this.document.addEventListener('paste', this.onPaste.bind(this));

  }

This way, no matter where the focus is, you can retrieve the file.

Avoiding Input Issues with MatDatepicker in Angular

Broggi Quentin — Fri, 20 Oct 2023 13:57:43 +0000

When using the Angular Material Datepicker (MatDatepicker), developers often face formatting challenges, especially when dates are manually input by the user. The material-moment-adapter provides an elegant solution to handle these issues.

1. Date Format Issue During Manual Input

When using the MatDatepicker, if a user manually enters a date in the format dd/mm/yyyy (french format date) and the focus changes, the date might automatically be interpreted as the yyyy-dd-mm format. This unexpected transformation can lead to confusion and input errors. To address this behavior, we can configure a custom date format with MomentDateAdapter.

2. Timezone Conversion Issues with GMT +1

Another common issue faced is when the date 12/06/2023 00:00:00 becomes 11/06/2023 23:00:00 due to GMT +1 timezone conversion. This unintended shift can cause confusion and inaccuracies.

The solution is to utilize the useUtc: true option provided by the material-moment-adapter. When this option is set to true, dates won’t undergo undesired timezone adjustments.

Implementation Guide

Install the necessary dependencies:

npm install @angular/material-moment-adapter moment

In your module configuration, import the necessary modules and provide custom date format:

`import { MomentDateAdapter, MAT_MOMENT_DATE_ADAPTER_OPTIONS } from '@angular/material-moment-adapter';

export const CUSTOM_DATE_FORMAT = {
parse: {
dateInput: 'DD/MM/YYYY',
},
display: {
dateInput: 'DD/MM/YYYY',
monthYearLabel: 'MMMM YYYY',
dateA11yLabel: 'DD/MM/YYYY',
monthYearA11yLabel: 'MMMM YYYY',
},
};

@NgModule({
...
providers: [
{ provide: MAT_DATE_LOCALE, useValue: 'fr-FR' },
{ provide: MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMAT },
{ provide: DateAdapter, useClass: MomentDateAdapter },
{ provide: MAT_MOMENT_DATE_ADAPTER_OPTIONS, useValue: { useUtc: true } },
],
...
})`

With the above configuration, MatDatepicker will now correctly interpret manually entered dates and avoid unwanted timezone transformations.

Conclusion

The Angular Material Datepicker is a versatile component, but it’s essential to handle date formatting and timezone issues for a seamless user experience. By leveraging material-moment-adapter and the configurations outlined above, developers can ensure consistent and accurate date input and display.

Insert images in a PowerPoint template with BroggiSoft.OfficeExport

Broggi Quentin — Sat, 28 Jan 2023 15:19:01 +0000

Here is an example of using BroggiBoft.OfficeExport to insert an image into a PowerPoint template:

First, you need to create a PowerPoint template containing a tag for the image that you want to insert. To do this, you must create a Rectangle shape of the desired size and put a {{Img=YourNameValue}} tag inside. For this in PowerPoint go to Insert > Shapes > Rectangle.
For this example the value of YourNameValue is logo.

Next you need to convert the image you want to insert to base64. You can use the Convert.ToBase64String class to convert the image to a base64 string.

Create a dictionary that contains the image data with the key name that matches the tag in the template.

var imageBase64 = Convert.ToBase64String(File.ReadAllBytes("logo.png"));
Dictionary<string, string> data = new Dictionary<string, string>();
data.Add("logo", imageBase64);
data.Add("title", "OfficeExport Example");

Install the nuget package BroggiSoft.OfficeExport from: https://www.nuget.org/packages/BroggiSoft.OfficeExport/

Finally, use the ExportFromDictionary method of the OfficeExport class to replace the tags in the template with the image data.

OfficeExport.ExportFromDictionary("template.docx", "output.docx", data);

The output file "output.pptx" will now contain the image inserted into the Shape Rectangle named "logo" in the template, and the title will have been replaced by its corresponding value (here: OfficeExport Example).

It's important to note that you can use the same steps to insert images into Word and Excel templates.

You can find a test project on GitHub: OfficeExportTest

How to download a file in Angular .NET

Broggi Quentin — Fri, 27 Jan 2023 16:49:08 +0000

In this article, I will show you how to download a file in an Angular project with a .NET 5+ Web Api.

.NET Side

You need to create a controller, for example DownloadController, with a DownloadFile Api of HttpGet type. If you want you can send the file name to be downloaded as a parameter for this Api.

First, transform your file into a byte array or via a memoryStream, then return it in a FileContentResult by passing your byte array, the "application/octet-stream" type and the name of your file.


[Route("api/[controller]")]
public class DownloadController : Controller
{

        [HttpGet]
        public async Task<IActionResult> DownloadFile()
        {
            //Set your file path here
            var path = Path.Combine(Directory.GetCurrentDirectory(), "Ressources", "Example.docx");
            //Check if the file exists
            if (!System.IO.File.Exists(path))
                return NotFound();
            //Get Bytes array of your file, you can also to do a MemoryStream
            Byte[] bytes = await System.IO.File.ReadAllBytesAsync(path);

            //Return your FileContentResult
            return File(bytes, "application/octet-stream", "Example.docx");

        }
}

Angular Side

In your service create a function to call the .Net Api, you need to specify ‘blob’ for the responseType like this :

  downloadFile() {
    return this.http.get('http://localhost:5000/api/download/', { responseType: 'blob' });
  }

In Angular the best library to download file is file-saver that you can install with :
npm i file-saver

Write a function in your component to call your service.

  download() {
    this.fileService.downloadFile()
      .subscribe(data => saveAs(data, 'Example.docx'));
  }

Then add the import for use file-saver.

import { saveAs } from "file-saver";

And it works.

How to send File from Angular To Web Api C# .Net

Broggi Quentin — Fri, 27 Jan 2023 09:24:44 +0000

Passing a file from Angular to a C# Web API with .NET 5.0 can be useful when you need to upload a file to your server for processing or storage. Here's how:

1: You need to configure your C# Web API to accept uploaded files. To do this, you need to add a controller action that takes as input an object of type IFormFile. Here's what it might look like:

[HttpPost]
public async Task<IActionResult> UploadFile([FromForm] IFormFile file)
{
    byte[] fileBytes;
    using (var ms = new MemoryStream())
    {
        file.CopyTo(ms);
        fileBytes = ms.ToArray();
        // File processing

    }
}

2: In your Angular application, you need to use the FormData object to construct an HTTP POST request containing the file to upload. You can use the append() method of FormData to add the file to the request:

uploadFile(file: File) {
    const formData = new FormData();

    formData.append('file', file, file.name);

    this.http.post('/api/upload', formData).subscribe(...);
}

Note that in .NET 5.0 you can also use the IFormFileCollection interface to accept multiple files in a single controller action:

[HttpPost]
public async Task<IActionResult> ([FromForm] IFormFileCollection files)
{
     // File processing
}

uploadFiles(files: FileList) {
    const formData = new FormData();

    for (let i = 0; i < files.length; i++) {
        formData.append('files', files[i], files[i].name);
    }

    this.http.post('/api/upload', formData).subscribe(...);
}

How to mail merge in .Net with BroggiSoft.OfficeExport

Broggi Quentin — Fri, 04 Nov 2022 11:06:01 +0000

I created a Nuget package, BroggiSoft.OfficeExport, to easily export data to an office document (Word, Excel and PowerPoint).

First you create a template with tags like in Angular, for example you can set a tag {{City}} in your document. In your .Net application, you create for example a Dictionary with City as key and Paris as value and it will be replaced by the corresponding value. This style will be preserved, if you set a tag in italics the new value will also be in italics.

You can also send your data as a json or as an object.

Then you call the OfficeExport’s functions.

For information tags that do not have corresponding values will be removed.

The package also allows you to handle arrays. To do this, create a basic table in Word or PowerPoint and you add a tag like this {{Lines[i].NetIncome}} on a line, this has for effect to replace this line by the first value of your array and add a line for the other rows of your array.

The product key unlocks some features such as arrays support, but you can replace the basic tags without it.

In this example OfficeExport will create a new document OutPut.docx, but you can get the result as a blob.

Become

Please feel free to provide feedback to me at contact@broggisoft.com.

You will find all the documentation on broggisoft.com.

You can find a test project on GitHub: OfficeExportTest