by imdapro | v2.0.1
A NativeScript plugin to post/upload file as multipart/form-data to server.
npm i --save imdapro-nativescript-http-formdata

A NativeScript plugin to post/upload file as multipart/form-data to server for iOS and Android. NS 6.1.0+ is required. Please use older version if you have older version of NS platform installed.


[2.0.0] Upgraded to NS 6.2.0. Fixed Kotlin issue. More here

[1.6.0] Added common response in iOS and Android instead returned by native APIs. Thanks to virtualbjorn

[1.5.0] Now supports custom headers

Add the plugin

tns plugin add nativescript-http-formdata


Android iOS


import { TNSHttpFormData, TNSHttpFormDataParam, TNSHttpFormDataResponse } from 'nativescript-http-formdata';

use the ImagePicker plugin or any other.

    private test() {
let context = imagepicker.create({
mode: "single" // use "multiple" for multiple selection
.then(function() {
return context.present();
.then((selection) => {
let item = selection[0];
//UIImage for iOS and for Android
item.getImageAsync(async (image, error) => {
let fd = new TNSHttpFormData();

//create params. You can upload an array of params i.e multiple data. For every parameter you need to give unique name
//so you can get it on server. Check below how to grab it in ASP.Net MVC
let params = [];

let imageData: any;
if(image) {
if(image.ios) {
imageData = UIImagePNGRepresentation(image);
} else {
//can be one of these overloads
let bitmapImage: = image;
let stream = new;
bitmapImage.compress(, 100, stream);
let byteArray = stream.toByteArray();

imageData = byteArray;
let param: TNSHttpFormDataParam = {
data: imageData,
contentType: 'image/png',
fileName: 'test.png',
parameterName: 'file1'
let param2: TNSHttpFormDataParam = {
data: "John Doe",
parameterName: "firstName"

try {
const response: TNSHttpFormDataResponse = await'', params, {
headers: {
test1: "test1 value",
"x-version-no": "2.0"
} catch (e) {
}).catch(function (e) {

Now on server to grab the file(s) in ASP.Net MVC, you can follow or following

//file1 and file2 are parameters name as given in NativeScript object. They must match
public ActionResult FileUpload(HttpPostedFileBase file1, HttpPostedFileBase file2, string firstName)
//grab your headers
var headers = Request.Headers;
if (file1 != null)
string pic = System.IO.Path.GetFileName(file1.FileName);
string path = System.IO.Path.Combine(Server.MapPath("~/App_Data"), pic);
// file is uploaded
if (file2 != null)
string pic = System.IO.Path.GetFileName(file2.FileName);
string path = System.IO.Path.Combine(Server.MapPath("~/App_Data"), pic);
// file is uploaded

// after successfully uploading redirect the user
return RedirectToAction("Index", "Home");

TNSHttpFormDataResponse Properties

  • headers - response header
  • statusCode - http status code (number)
  • statusMessage - http status code message (string)
  • body - response body (JSON Parsed if is a json, raw string else)