Nativescript - How to POST Image with http.request

Question

Help, I need call the http.request for send Image captured in camera api in my NativeScript App.

I capture the photo in camera api for nativescript and need send to api in upload process.

Follow the code about this process:

var frameModule = require("ui/frame");
var viewModule = require("ui/core/view");
var Observable = require("data/observable").Observable;
var config = require("../../shared/config");
var cameraModule = require("camera");
var imageModule = require("ui/image");
var http = require("http");

exports.loaded = function(args) {
  var page = args.object;
  viewModel = new Observable({
      coleta: config.id_coleta
  });
  page.bindingContext = viewModel;
};

exports.voltar = function() {
   var topmost = frameModule.topmost();
   topmost.navigate("views/ocorrencia/menuocorrencia");
};

function tapFoto() {

  cameraModule.takePicture({
      width: 300,
      height: 300,
      keepAspectRatio: true
  }).then(function(picture) {

   var image = new imageModule.Image();

   image.imageSource = picture;
   var item = {
         itemImage: picture
   };

    var urlfoto = "http://192.1.1.1:8090/sendphoto/upload";
   alert("URL: " + urlfoto);

    http.request({
       url: urlfoto,
       method: "POST",
       headers: {
       "Content-Type": "multipart/form-data"        
    },
    content: ({uploadFile: image.imageSource, entrega: config.id_coleta})             
     }).then(function (response) {
         var statusCode = response.statusCode;
         alert("Codigo Retorno: " + statusCode);
         alert("Foto registrada com sucesso.");
     }, function (e){
         alert("Erro: " + e);
     });

   });

}

exports.tapFoto = tapFoto;

Answer 1

I recommend using of nativescript-background-http plugin for uploading files.

tns plugin add nativescript-background-http

Here is your code modifed to work with the installed plugin:

"use strict";
var Observable = require("data/observable").Observable;
var cameraModule = require("camera");
var fs = require("file-system");

var bghttpModule = require("nativescript-background-http");
var session = bghttpModule.session("image-upload");

var viewModel = new Observable();

function navigatingTo(args) {
    var page = args.object;
    page.bindingContext = viewModel;
}
exports.navigatingTo = navigatingTo;

function onTap() {
    cameraModule.takePicture({
        width: 300,
        height: 300,
        keepAspectRatio: true
    }).then(function (imageSource) {
        console.log("Image taken!");
        var folder = fs.knownFolders.documents();
        var path = fs.path.join(folder.path, "Test.png");
        var saved = imageSource.saveToFile(path, "png");
        var request = {
            url: "http://httpbin.org/post",
            method: "POST",
            headers: {
                "Content-Type": "application/octet-stream",
                "File-Name": "Test.png"
            },
            description: "{ 'uploading': " + "Test.png" + " }"
        };

        var task = session.uploadFile(path, request);
        task.on("progress", logEvent);
        task.on("error", logEvent);
        task.on("complete", logEvent);

        function logEvent(e) {
            console.log("----------------");
            console.log('Status: ' + e.eventName);
            // console.log(e.object);
            if (e.totalBytes !== undefined) {
                console.log('current bytes transfered: ' + e.currentBytes);
                console.log('Total bytes to transfer: ' + e.totalBytes);
            }
        }
    });
}
exports.onTap = onTap;