Nativescript-background Http Not working in nativescript 5.2.1

[Ramkrishnank]

Hi Team @hdeshev @EmilStoychev @jbristowe @romulowspp @NathanaelA

My client app is not hitting API and i didn't get any error both run and compile time error : even i uploading Files ,Images,Video,please help me to resolve this error

My API is working fine i checked from some other application

• iOS/Android/Both

• iOS/Android versions

• emulator or device. What type of device?

• CLI: 5.2.1

• Cross-platform modules: 5.2.1

• Runtime(s): Android (5.2.1)

• Plugin(s): nativescript-background-http

dependencies

{ "nativescript": { "id": "com.demo.sample", "tns-ios": { "version": "5.2.0" }, "tns-android": { "version": "5.2.1" } }, "description": "sample Application", "license": "SEE LICENSE IN ", "repository": "", "scripts": { "lint": "tslint \"src/*/.ts\"" }, "dependencies": { "@angular/animations": "^7.2.0", "@angular/common": "^7.2.0", "@angular/compiler": "^7.2.12", "@angular/core": "^7.2.13", "@angular/forms": "^7.2.0", "@angular/http": "^7.1.0", "@angular/platform-browser": "^7.2.0", "@angular/platform-browser-dynamic": "^7.2.0", "@angular/router": "^7.2.0", "file-system": "^2.2.2", "nativescript-android-utils": "^1.0.2", "nativescript-angular": "^7.2.1", "nativescript-background-http": "^4.2.0", "nativescript-camera": "^4.5.0", "nativescript-checkbox": "^3.0.3", "nativescript-drop-down": "^5.0.2", "nativescript-mediafilepicker": "^2.0.17", "nativescript-modal-datetimepicker": "^1.2.0", "nativescript-ng-ripple": "^2.0.1", "nativescript-pdf-view": "^2.0.1", "nativescript-phone": "^1.4.0", "nativescript-snackbar": "^4.1.2", "nativescript-theme-core": "^1.0.4", "nativescript-ui-listview": "^6.0.0", "nativescript-ui-sidedrawer": "^5.1.0", "reflect-metadata": "^0.1.12", "rxjs": "^6.3.0", "tns-core-modules": "~5.2.0", "zone.js": "^0.8.26" }, "devDependencies": { "@angular/compiler-cli": "^7.2.0", "@nativescript/schematics": "^0.5.0", "@ngtools/webpack": "^7.2.0", "codelyzer": "^4.5.0", "nativescript-dev-sass": "^1.6.0", "nativescript-dev-typescript": "^0.8.0", "nativescript-dev-webpack": "^0.24.1", "tslint": "^5.11.0" }, "gitHead": "f548ec926e75201ab1b7c4a3a7ceefe7a4db15af", "readme": "NativeScript Application" }

here is my code import { Injectable } from '@angular/core'; import { HttpClient, HttpHeaders } from '@angular/common/http'; import * as bgHttp from "nativescript-background-http"; import { Subject } from 'rxjs';

import { ApplicationSetting, ApplicationSettingService, CommonService } from './index.service'; import { HttpStatus } from './enumtype';

import { MSG_BadRequest, MSG_SuccessFileUpload } from './messages'; import { error } from '@angular/compiler/src/util';

@Injectable() export class AttachmentService {

private API_URL: string = CRM_API_URL + API_AttachmentManagement;

// Attachment Controller
private Attachment: string = "StreamFileInsert";

public isUploading: boolean = false;
public isUploaded: boolean = false;

public tasks: bgHttp.Task[] = [];
public events: { eventTitle: string, eventData: any }[] = [];

private file: string;

public IsAttachmentUploaded = new Subject<boolean>();
private counter: number = 0;
private session: any;
private mimetype: string;
private Filename: string;

applicationSettingService: ApplicationSettingService;

constructor(private http: HttpClient, private commonService: CommonService) {
    this.session = bgHttp.session("image-upload");
    this.applicationSettingService = new ApplicationSettingService();

}

upload(filePath: string, fileSize: string): boolean {
    this.file = filePath;
    this.start_upload(fileSize);
    return this.isUploaded;
}

start_upload(fileSize: string) {

    this.isUploading = true;
    this.isUploaded = false;

    const name = this.file.substr(this.file.lastIndexOf("/") + 1);
    const description = name.substr(name.lastIndexOf('.'));
    const fileFormat = name.substr(name.lastIndexOf('.'));

    let request = {

        //192.168.10.226:5000/attchmentmgmt/Attachment/StreamFileInsert
        url: this.API_URL + this.Attachment,
        method: "POST",
        headers: {
            "Content-Type": "multipart/form-data",
            "TrackID": "1000210100",
            "FileSize": fileSize,
        },
        description: description
    };

    let task: bgHttp.Task;
    let lastEvent = "";

    const params = [
        { name: name, filename: this.file }
    ];
    let session = bgHttp.session("image-upload");
    console.log(this.file);

    //console.log("Status" + params);
    console.log("Stream Insert Started ");
    //this.file = "/storage/emulated/0/DCIM/IMG_20190926_205613.jpg";
    //console.log("Status" + task.status.toString());
    task = session.multipartUpload(params, request);

    console.log("Upload Status ------------------");
    console.log(this.tasks);
    console.log("Status: " + task.status);

    console.log("Stream Insert Ended...... ");
    let _this = this;

    function onEvent(e) {

        console.log(e);

        if (lastEvent !== e.eventName) {
            // suppress all repeating progress events and only show the first one
            lastEvent = e.eventName;

            if (e.eventName == 'responded' && e.responseCode == 200) {
                error => {
                    if (error.status == HttpStatus.BadRequest) {
                        _this.commonService.showAlertMessage(MSG_BadRequest);
                    }
                    else {
                        _this.commonService.errorFunction(error.status);
                    }
                }
            }
            if (e.eventName == 'complete') {
                this.isUploaded = true;
                _this.commonService.showAlertMessage(MSG_SuccessFileUpload);
                alert(MSG_SuccessFileUpload);
                this.IsAttachmentUploaded = true;

            }
            if (e.eventName == 'error') {
                this.isUploaded = false;

            }
        } else {
            return;
        }

        this.events.push({
            eventTitle: e.eventName + " " + e.object.description,
            eventData: JSON.stringify({
                error: e.error ? e.error.toString() : e.error,
                currentBytes: e.currentBytes,
                totalBytes: e.totalBytes,
                body: e.data
            })
        });
    }

    try {
        task.on("progress", onEvent.bind(this));
        task.on("error", onEvent.bind(this));
        task.on("responded", onEvent.bind(this));
        task.on("complete", onEvent.bind(this));

        lastEvent = "";
        this.tasks.push(task);
    }

    catch (ex) { }

}

}

[romulowspp]

Do you have more information? Logs about bytes send or any project to reproduce the problem?

[Ramkrishnank]

Image format (jpg/png) are uploading successfully but the thing is Video and File(PDF,Docx) is not uploading even client is not hitting the API and i didnt getting the any error and log

[Ramkrishnank]

is there any other plugin to upload the files and video in native-script

[Ramkrishnank]

JS: { JS: "eventName": "progress", JS: "object": { JS: "_observers": { JS: "progress": [ JS: {} JS: ], JS: "error": [ JS: {} JS: ], JS: "responded": [ JS: {} JS: ], JS: "complete": [ JS: {} JS: ] JS: }, JS: "_session": { JS: "_id": "file-upload" JS: }, JS: "_id": "file-upload{2}", JS: "_description": ".jpg", JS: "_upload": 173, JS: "_totalUpload": 32846, JS: "_status": "uploading" JS: }, JS: "currentBytes": 173, JS: "totalBytes": 32846 JS: } JS: { JS: "eventName": "progress", JS: "object": { JS: "_observers": { JS: "progress": [ JS: {} JS: ], JS: "error": [ JS: {} JS: ], JS: "responded": [ JS: {} JS: ], JS: "complete": [ JS: {} JS: ] JS: }, JS: "_session": { JS: "_id": "file-upload" JS: }, JS: "_id": "file-upload{2}", JS: "_description": ".jpg", JS: "_upload": 32846, JS: "_totalUpload": 32846, JS: "_status": "uploading" JS: }, JS: "currentBytes": 32846, JS: "totalBytes": 32846 JS: } JS: { JS: "eventName": "progress", JS: "object": { JS: "_observers": { JS: "progress": [ JS: {} JS: ], JS: "error": [ JS: {} JS: ], JS: "responded": [ JS: {} JS: ], JS: "complete": [ JS: {} JS: ] JS: }, JS: "_session": { JS: "_id": "file-upload" JS: }, JS: "_id": "file-upload{2}", JS: "_description": ".jpg", JS: "_upload": 32846, JS: "_totalUpload": 32846, JS: "_status": "complete" JS: }, JS: "currentBytes": 32846, JS: "totalBytes": 32846 JS: } JS: { JS: "eventName": "responded", JS: "object": { JS: "_observers": { JS: "progress": [ JS: {} JS: ], JS: "error": [ JS: {} JS: ], JS: "responded": [ JS: {} JS: ], JS: "complete": [ JS: {} JS: ] JS: }, JS: "_session": { JS: "_id": "file-upload" JS: }, JS: "_id": "file-upload{2}", JS: "_description": ".jpg", JS: "_upload": 32846, JS: "_totalUpload": 32846, JS: "_status": "complete" JS: }, JS: "data": "{\"fileByte\":\"\",\"trackID\":100050086668244,\"category\":null,\"fileName\":\"IMG_20191021_123452.jpg\",\"fileSize\":0.084144}", JS: "responseCode": 200 JS: } JS: { JS: "eventName": "complete", JS: "object": { JS: "_observers": { JS: "progress": [ JS: {} JS: ], JS: "error": [ JS: {} JS: ], JS: "responded": [ JS: {} JS: ], JS: "complete": [ JS: {} JS: ] JS: }, JS: "_session": { JS: "_id": "file-upload" JS: }, JS: "_id": "file-upload{2}", JS: "_description": ".jpg", JS: "_upload": 32846, JS: "_totalUpload": 32846, JS: "_status": "complete" JS: }, JS: "responseCode": 200, JS: "response": {} JS: }

**JS: Selected Videos JS: Image File selected JS: Image File selected /storage/emulated/0/DCIM/VID_20191021_123529.mp4

JS: Compressed File path /data/user/0/com.myDemo.app/files/VID_20191021_123529.mp4 JS: /data/user/0/com.myDemo.app/files/VID_20191021_123529.mp4 JS: /data/user/0/com.myDemo.app/files/VID_20191021_123529.mp4 JS: Stream Insert Started JS: Selected Videos JS: Image File selected JS: Image File selected /storage/emulated/0/DCIM/VID_20191021_123529.mp4 JS: Came to Compress Image block JS: Compressed File path /data/user/0/com.myDemo.app/files/VID_20191021_123529.mp4 JS: /data/user/0/com.myDemo.app/files/VID_20191021_123529.mp4 JS: /data/user/0/com.myDemo.app/files/VID_20191021_123529.mp4 JS: Stream Insert Started JS: Selected Videos JS: Image File selected JS: Image File selected /storage/emulated/0/DCIM/VID_20191021_123529.mp4 JS: Came to Compress Image block JS: Compressed File path /data/user/0/com.myDemo.app/files/VID_20191021_123529.mp4 JS: /data/user/0/com.myDemo.app/files/VID_20191021_123529.mp4 JS: /data/user/0/com.myDemo.app/files/VID_20191021_123529.mp4**

task = session.multipartUpload(params, request); i didnt received any error after this line even console.log also not hitting