Skip to content

Nativescript-background Http Not working in nativescript 5.2.1 #250

Open
Open
Nativescript-background Http Not working in nativescript 5.2.1#250

Description

@Ramkrishnank
Ramkrishnank
opened on Oct 18, 2019

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) { }


}

}

Activity

  1. romulowspp commented on Oct 22, 2019

    @romulowspp
    romulowspp
    on Oct 22, 2019
    Contributor

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

  2. Ramkrishnank commented on Oct 23, 2019

    @Ramkrishnank
    Ramkrishnank
    on Oct 23, 2019
    Author

    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

  3. Ramkrishnank commented on Oct 23, 2019

    @Ramkrishnank
    Ramkrishnank
    on Oct 23, 2019
    Author

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

  4. Ramkrishnank commented on Oct 23, 2019

    @Ramkrishnank
    Ramkrishnank
    on Oct 23, 2019
    Author

    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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions