Cordova File Transfer Plugin allows you to upload and download files.

Installation

cordova plugin add cordova-plugin-file-transfer

FileTransfer:

uploads a file to a remote server.

Properties:

  • onprogress: Called with a ProgressEvent whenever a new chunk of data is transferred. (Function)

Methods:

  • upload: Given an absolute file path, uploads a file on the device to a remote server
    using a multipart HTTP request.

  • download: downloads a file from server.

  • abort: Aborts an in-progress transfer.

Upload:

Parameters:

  • filePath {String} :
    Full path of the file on the device

  • server {String}:
    URL of the server to receive the file

  • successCallback (Function}:
    Callback to be invoked when upload has completed

  • errorCallback {Function}:
    Callback to be invoked upon error

  • options {FileUploadOptions}:
    Optional parameters such as file name and mimetype

  • trustAllHosts {Boolean}:
    Optional trust all hosts (e.g. for self-signed certs), defaults to false

Download:

Parameters:

  • source {String}:
    URL of the server to receive the file

  • target {String}:
    Full path of the file on the device

  • successCallback (Function}:
    Callback to be invoked when upload has completed

  • errorCallback {Function}:
    Callback to be invoked upon error

  • trustAllHosts {Boolean}:
    Optional trust all hosts (e.g. for self-signed certs), defaults to false

  • options {FileDownloadOptions} Optional parameters such as headers

Abort:

Aborts an in-progress transfer. The onerror callback is passed a FileTransferError object which has an error code of FileTransferError.ABORT_ERR.

FileTransferError:

A FileTransferErrorobject is passed to an error callback when an error occurs.

Properties:

  • code: Predefined error codes listed below. (Number)

  • source: URL to the source. (String)

  • target: URL to the target. (String)

  • http_status: HTTP status code. This attribute is only available when a response code is received from the HTTP connection. (Number)

  • body: Response body. This attribute is only available when a response is received from the HTTP connection. (String)

  • exception: Either e.getMessage or e.toString (String)

Error Code:

  • 1 = FileTransferError.FILE_NOT_FOUND_ERR
  • 2 = FileTransferError.INVALID_URL_ERR
  • 3 = FileTransferError.CONNECTION_ERR
  • 4 = FileTransferError.ABORT_ERR
  • 5 = FileTransferError.NOT_MODIFIED_ERR

Example:

$('#upload-button').on('click', ->
  $('#upload-button').addClass('ui-state-disabled')

  onFail = ((e)->
    $('#upload-button').removeClass('ui-state-disabled')
  )

  onSuccess = ((data)->
    $('#upload-button').removeClass('ui-state-disabled')
    Window.alert("File uploaded successfully")
  )

  opts = new FileUploadOptions()
  opts.fileName = $('#image-block').data('filename') + ".jpg"
  opts.mimeType = "image/jpeg"
  opts.chunkedMode = false
  opts.params = {
    phone_number: '123456',
    address: '123 Anytown street',
  }

  xfer = new FileTransfer()
  xfer.upload(
    $('#image-block').attr('src'),
    encodeURI(ServerUrl),
    onSuccess, onFail, opts
  )
)