How to use FTP in Ionic 4

No comments

FTP (File Transfer Protocol)

File Transfer Protocol (FTP) is a standard Internet protocol for transmitting files between computers on the Internet over TCP/IP connections. FTP is a client-server protocol where a client will ask for a file, and a local or remote server will provide it.

How FTP works

FTP is a client-server protocol that relies on two communications channels between client and server: a command channel for controlling the conversation and a data channel for transmitting file content. Clients initiate conversations with servers by requesting to download a file. Using FTP, a client can upload, download, delete, rename, move and copy files on a server. A user typically needs to log on to the FTP server, although some servers make some or all of their content available without login, known as anonymous FTP.

cordova-plugin-ftp

This cordova plugin is created to use ftp (client) in web/js.

Support both iOS and Android platform now.

You can do the following things:

  • List a directory
  • Create a directory
  • Delete a directory (must be empty)
  • Delete a file
  • Download a file (with percent info)
  • Upload a file (with percent info)
  • Cancel upload/download

Installation

$ionic cordova plugin add cordova-plugin-ftp
$npm install @ionic-native/ftp

Dependency:

  • For iOS, the plugin depends on CFNetwork.framework, which has been added to plugin.xml (and cordova prepare will add it to platform project), so you don’t need to do anything.
  • But for Android, it depends on com.android.support:support-v4:23.2.0, which should be added to your platform project by hand.

Usage

How to connect FTP:

For better use of FTP connect once to server means connect to one ftp server.

Just need to init the connection once. If success, you can do any ftp actions later.

connect(hostname, username, password)

import { FTP } from '@ionic-native/ftp/ngx';


constructor(private ftp: FTP) { }

...


this.ftp.connect('ftp_host', 'ftp_user', 'ftp_password')
  .then((res: any) => console.log('Login successful', res))
  .catch((error: any) => console.error(error));
Param Details
hostname The ftp server url. Like ip without protocol prefix, e.g. “192.168.1.1”. Use only the Host name or ip-address
username The ftp login username. If it and password are all blank/undefined, the default username “anonymous” is used.
password The ftp login password. If it and username are all blank/undefined, the default password “anonymous@” is used.

Returns: Promise<any> The success callback. Notice: For iOS, if triggered, means init success, but NOT means the later action, e.g. ls… download will success!

How to upload a File:

Upload one local file to the ftp server after connect the ftp server.

this.ftp.upload(localFile, remoteFile).subscribe(
(result) => {
     console.log(result);
} , (error) => {
     console.log(error);
});
Param Details
localFile The file (with full path) you want to upload. e.g. “/local/path/localFile”.
remoteFile The file (with full path) you want to located on the ftp server. e.g. “/123/newDir/remoteFile”.

Returns:Observable<any> Returns an observable. It will be triggered many times according the file’s size. The arg 00.1xx0.2xx … 1 means the upload percent. When it reach 1, means success.

List files:

List files (with info of nametypelinksizemodifiedDate) under one directory on the ftp server. You can get one file’s name using fileList[x].name (x is the location in array).

this.ftp.ls(path);

Param Details
path The path on the ftp server. e.g. “/adf/123/”.

Returns: Promise<any> Returns a promise

Create & Delete directory:

1. mkdir(path)

Create one directory on the ftp server.

Param Details
path The path on the ftp server. e.g. “/adf/123/”.

Returns: Promise<any> Returns a promise

2. rmdir(path)

Delete one directory on the ftp server.

Tip: As many ftp server could not rm dir when it’s not empty, so rm all files under the dir at first is recommended.

Param Details
path The file (with full path) you want to delete. e.g. “/123/newDir/myFile”.

Returns: Promise<any> Returns a promise

3. rm(file)

Delete one file on the ftp server.

Param Details
file The file (with full path) you want to delete. e.g. “/123/newDir/myFile”.

Returns: Promise<any> Returns a promise

How to download a File:

Download one remote file on the ftp server to local path.

this.ftp.download(localFile, remoteFile).subscribe(
(result) => {
     console.log(result);
} , (error) => {
     console.log(error);
});
Param Details
localFile The file (with full path) you want to upload. e.g. “/local/path/localFile”.
remoteFile The file (with full path) you want to located on the ftp server. e.g. “/123/newDir/remoteFile”.

Returns: Observable<any> Returns an observable. It will be triggered many times according the file’s size. The arg 00.1xx0.2xx … 1 means the upload percent. When it reach 1, means success.

cancel()

Cancel all requests. Always success.

Returns: Promise<any> Returns a promise

disconnect()

Disconnect from ftp server.

Returns: Promise<any> Returns a promise

SatishHow to use FTP in Ionic 4

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *