2

I tried implementing image upload page for my app, but unfortunately the request is not reaching the server. I double checked this using tcpdump on the server side. The code doesnt seem to process beyond session.uploadFile in sendImages function

Please let me know if there is any issue with the code

var imageSource = require("image-source");
var frameModule = require("ui/frame");
var Observable = require("data/observable").Observable;
var fromObject = require("data/observable").fromObject;
var ObservableArray = require("data/observable-array").ObservableArray;
var platformModule = require("platform");

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

var fs = require("file-system");


var page;
var imageName;
var counter = 0;

function pageLoaded(args) {
    page = args.object;
}


function onSelectSingleTap(args) {
    var context = imagepickerModule.create({
        mode: "single"
    });

    if (platformModule.device.os === "Android" && platformModule.device.sdkVersion >= 23) {
        permissions.requestPermission(android.Manifest.permission.READ_EXTERNAL_STORAGE, "I need these permissions to read from storage")
            .then(function () {
                console.log("Permissions granted!");
                startSelection(context);
            })
            .catch(function () {
                console.log("Uh oh, no permissions - plan B time!");
            });
    } else {
        startSelection(context);
    }
}

function sendImages(uri, fileUri) {

    imageName = extractImageName(fileUri);
    var request = {
        url: "http://maskingIpForPost:8081/mobilepic/ctk/uploadpic",
        method: "POST",
        headers: {
            "Content-Type": "application/octet-stream",
            "file-Name": imageName,
            "uid": 30
        },
        description: "{ 'uploading': " + imageName + " }"
    };

    var task = session.uploadFile(fileUri, request);

    task.on("progress", progress);
    task.on("error", error);
    task.on("complete", complete);
    task.on("responded", responded);
    function responded(e) {
        console.log("eventName: " + e.eventName);
        console.log("data: " + e.data);
    }
    function progress(e) {
        console.log("currentBytes: " + e.currentBytes);
        console.log("totalBytes: " + e.totalBytes);
        console.log("eventName: " + e.eventName);
    }
    function error(e) {
        console.log("eventName: " + e.eventName);
        console.log("eventName: " + e.responseCode);
        console.log("eventName: " + e.response);
    }

    function complete(e) {
        console.log("eventName: " + e.eventName);
        console.log("response: " + e.responseCode);
   }

    return task;
}

function startSelection(context) {

    context
        .authorize()
        .then(function () {

            return context.present();
        })
        .then(function (selection) {
            selection.forEach(function (selected_item) {
                    var localPath = null;

                    if (platformModule.device.os === "Android") {
                        localPath = selected_item._android;
                    } else {
                        // selected_item.ios for iOS is PHAsset and not path - so we are creating own path
                        let folder = fs.knownFolders.documents();
                        let path = fs.path.join(folder.path, "Test" + counter + ".png");
                        //let saved = imagesource.saveToFile(path, "png");

                        localPath = path;
                    }
alert("final path  " + localPath);
                    if (localPath) {
                        var task = sendImages("Image" + counter + ".png", localPath);
                        //mainViewModel.get("items").push(fromObject({ thumb: imagesource, uri: "Image" + counter + ".png", uploadTask: task }));
                    }
                    counter++;
            });
        }).catch(function (e) {
            console.log(e.eventName);
        });
}

function extractImageName(fileUri) {
    var pattern = /[^/]*$/;
    var imageName = fileUri.match(pattern);

    return imageName;
}


exports.pageLoaded = pageLoaded;
exports.onSelectSingleTap = onSelectSingleTap;

On Further research found the following

net.gotev.uploadservice.UploadService is undefined in background-http.android.js. At this moment i am not sure what this means. Would appreciate if anyone has idea about this

4
  • you can run in debug mode and check in chrome devtools Commented Oct 11, 2018 at 10:00
  • 1
    Usually, this means the third party library (Java dependency) is not installed correctly. Force nativescript to download dependencies through Gradle. Easiest solution is rm -rf platforms and tns run android. Commented Oct 11, 2018 at 12:27
  • Are you using an emulator or device to check? If so what is the version ! Commented Oct 11, 2018 at 12:27
  • Are you facing the issue on both platforms? Commented Oct 11, 2018 at 14:09

2 Answers 2

1

You need to change the following line in your code.

var session = bghttpModule.session("image-upload");

It has to be file upload

var session = bghttpModule.session("file-upload");

Just tested your code by using Azure Blob Storage PUT url at my side and got the below response.

ActivityManager: START u0 {act=android.intent.action.OPEN_DOCUMENT typ=image/* cmp=com.android.documentsui/.DocumentsActivity (has extras)} from pid 2835

JS: currentBytes: 4096
JS: totalBytes: 25220
JS: eventName: progress
JS: currentBytes: 25220
JS: totalBytes: 25220
JS: eventName: progress
JS: currentBytes: 25220
JS: totalBytes: 25220
JS: eventName: progress
JS: eventName: responded
JS: data: 
JS: eventName: complete
JS: response: 201
Sign up to request clarification or add additional context in comments.

Comments

0

thanks for the quick response, i tried running it on a emulator and i faced the above mentioned issue, i tried the same by connecting a device and it worked just fine.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.