Editing/Viewing the data of the File in angular

Abhishek Tripathi — Tue, 06 Jun 2023 03:37:31 +0000

Viewing the file in the angular.

When we are listing the files in the angular using some transfer protocols like the sftp and ftp, sometimes there is even possibility that we want to see the data of that file. it’s a bit challenging work, but there is a library which would help us in this so that we can see the content of that file and along with that we can even edit it.
The library I'm talking about is ngx-editor.

to install the ngx-editor and add it in to your project, https://www.npmjs.com/package/ngx-editor this link can be visited.
to add the ngx-editor post installing into the project add the below line in the app. module.ts

import { NgxEditorModule } from 'ngx-editor';

post this we need to fetch the data of the file which we want to read it and then decode it.

The ts file data

_export class texteditor test implements OnInit { 

  editor!: Editor;  //a variable for the editor  
   
  html: string="<html>"; a string which contains the data, it is used to read and write the data 
  fileName:string=""; 
  constructor() 
{ 
      this.fileName=test”; 
    } 

  ngOnInit(): void { 
       
        var enc = new TextDecoder("utf-8"); //using a particular decoder 
        var arr = new Uint8Array([“filedata”]||[]); 
        this.html=enc.decode(arr);      // adding data to the html so it can be displayed 
     this.editor = new Editor(); // creating the instance of the editor 
      
  } 

  // make sure to destory the editor 
  ngOnDestroy(): void { 
    this.editor.destroy(); 
  } 
}_

The html file contains this data

<div id="main"> 
    
<ngx-editor-menu [editor]="editor" *ngIf="true"> </ngx-editor-menu> // its used to display the menu of the editor which kind of has bold, italic, heading, images, link, adding colours to background and letters 
    
<ngx-editor [editor]="editor" [(ngModel)]="html" [disabled]="false"  ></ngx-editor> // editor means which editor to be used, the ngModel is the data to be displayed or to be edited, if disabled is true then the data would not be editable and if its false then the data can be altered  

</div>

The box looks like how its shown below

This is one of the way by which we can view the data which is present in the file, after editing the data the altered data is present in the ngModel variable.

SFTP using the ssh2-sftp-client in Node JS

Abhishek Tripathi — Sat, 06 May 2023 05:11:40 +0000

Here we will be checking on how to get the files over the sftp, As there is alot of confusion on how to fetch the files in the required format, it can be a file path or a stream or just a Buffer.

We would be using the ssh2-sftp-client library of the node js.

There are two methods for getting the file and these methods are async in nature.

**_- get(path, dst, options) ==> String|Stream|Buffer

fastGet(remotePath, localPath, options) ===> string_**

Let us go with the Get.
Here if we are just giving the path of the file which needs to be fetched and not providing dst and the options then the output would be in the form of buffer, so if we want to transfer this buffer as a stream to the output then We would be adding this to the Readable stream. This readable stream can be piped to the response and can be sent out. This readable stream can also be added to the zip stream and that zip stream can be piped to response, if we want to zip the files before sending, this is useful if we are fetching multiple files.

Along with the Path if we are giving the dst as the path which is the local path where the data needs to be saved into, then it automatically adds the data to the file. it doesnt give any call back if the dst is provided.
if we are giving a stream for dst then it has to be a writestream and then that writestream can be piped to readstream and again here we can pipe it to response.

If we are fetching only one file then we can directly pass in the response and the data is directly giving into response

The fastget is useful when we are downloading single file and upon that we want to save it directly then we can just give the path.

This is some basic details on the get. As many a times we tend to send the stream as response and saving of the file happens at different place and the fetching happens at another place so the local path is not aware, so for this purpose an stream has to be created without the file, for that purpose we would be passing in the buffer.

This is my first technical post. Do let me know any suggestions if any.

DEV Community: Abhishek Tripathi

Editing/Viewing the data of the File in angular

SFTP using the ssh2-sftp-client in Node JS