Image upload not working - Android


#1
import * as camera from "nativescript-camera";
import { Image } from "ui/image";
import { Component, ChangeDetectorRef } from "@angular/core";
import { ImageAsset } from "image-asset";
import { takePicture, requestPermissions, isAvailable } from "nativescript-camera";
import { UserService }  from "../services";

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

@Component({
    selector: "my-app",
    templateUrl: "./pages/test.html",
    styleUrls: ['./assets/css/home.css']
})

export class TestComponent {

    items = [];
    imageName: any;
    public width: number = 1000;
    public height: number = 1300;
    public imageTaken: ImageAsset;
    public saveToGallery: boolean = true;
    public keepAspectRatio: boolean = true;

    constructor
    (
        private _changeDetectionRef: ChangeDetectorRef,
        private UserService: UserService
    ) 
    {
    }

    onSelectSingleTap() 
    {
        let context = imagepicker.create({
            mode: "single"
        });

        this.startSelection(context);
    }

    startSelection(context) 
    {
        context
        .authorize()
        .then
        (
            () => 
            {
                this.items = [];
                return context.present();
            })
            .then
            (
                (selection) => 
                {
                    console.log("Selection done:");
                    
                    selection.forEach(function (selected) 
                    {
                        console.log("----------------");
                        console.log("uri: " + selected.uri);
                        console.log("fileUri: " + selected.fileUri);
                    });
                
                    this.items = selection;
                    this._changeDetectionRef.detectChanges();
            })
            .catch(function (e) {
                console.log(e);
            });
    }

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

    sendImages(uri, fileUri) {
        
        this.imageName = this.extractImageName(fileUri);
        
        var request = {
            url: "http://httpbin.org/post",
            method: "POST",
            headers: {
                "Content-Type": "application/octet-stream",
                "File-Name": this.imageName
            },
            description: "{ 'uploading': " + this.imageName + " }"
        };
        
        var task = session.uploadFile(fileUri, request);

        task.on("progress", logEvent);
        task.on("error", logEvent);
        task.on("complete", logEvent);
        
        function logEvent(e) {
            console.log("currentBytes: " + e.currentBytes);
            console.log("totalBytes: " + e.totalBytes);
            console.log("eventName: " + e.eventName);
        }
        
        return task;
    }


}

#2

It not uploading the file to my backend and also not showing any errors


#3

Not sure if it’s just me, but I don’t really see you adding the image data anywhere in that request object you pass to the http session. You might also have to base64encode it before proceeding with posting it.


#4

Hi Pete,

This is what how I went about that in my own understanding

session.uploadFile(fileUri, request);

#5

Hey @Emeka,

I wrote a premium tutorial on the subject a while back titled, Build An Image Manager With NativeScript, Node.js, And The Minio Object Storage Cloud:

If I recall correctly, there was a bug at some point in time with how Android handled the success or error events. However, even with that bug it still had uploaded. I assume it is fixed now.

I think the core of your problems is that you’re not doing a multi-part upload.

Best,