[TypeScript] Processing to upload images with ionic2 [Transfer]

This is Hase from the development team!

This time I would like to write about the process of uploading an image (file) with ionic2.
I will use a plugin called cordova-plugin-file-transfer

Install the plugin

First, install the plugin

$ ionic plugin add cordova-plugin-file-transfer

Usage example

import { Transfer } from 'ionic-native'; @Component({omitted}) export class FileUpload{ fileTransfer = new Transfer(); constructor({omitted}){ } upload(){ let options: any; options = { fileKey: 'file', fileName: 'name.jpg', headers: {} ..... } this.fileTransfer.upload( "file path", "server path", options, false ) .then((data) => { // success }, (err) => { // error }) }

explanation

Line 22 of the above source code is the process that actually uploads the image

upload(file path, server path, options, trustAllHosts)

upload is a method for sending files to the server.
The arguments are as follows:

argument type detail
file path string Specify the path to the image
server path string Specify the server path where you want to save the image
options FileUploadOptions
fileKey Specify the form element (default: file)
fileName Specify the name to save the file to the server (default: image.jpg)
httpMethod Specify the HTTP method as either PUT or POST (default: POST)
mimeType Specify MIME type (default: image/jpeg)
trustAllHosts boolean Basically, false is OK

A detailed explanation is written on

the official website concludes my explanation of the image upload process.

At the end

The Transfer plugin can handle not only image uploads but also downloads.
This time I only explained the upload process, but if there is demand I would like to explain the download process as well, so
thank you for your understanding.

If you found this article helpful , please give it a like!
0
Loading...
0 votes, average: 0.00 / 10
898
X facebook Hatena Bookmark pocket

The person who wrote this article

About the author

Tatsuya Hase

Joined Beyond Co., Ltd. as a new graduate.

We develop web systems (development of services and systems that run on browsers, such as web services, digital content, and business management systems) and game APIs (development of programs that communicate with application games).

We also develop private/custom apps for Shopify.

Originally worked at the Osaka office, but transferred to the Yokohama office in 2019.
His hobbies are baseball/karaoke/anime