2

I'm trying to upload a multipart form in nativescript and I'm using http-background. I keep getting the error Class constructor Observable cannot be invoked without 'new'. I've tried changing the compilerOptions target to es5 and es2017, but nothing changed.

Here's the entire error I'm seeing

Here's all my code from the component.

  onSave(){
    console.log("clicked")
    this.proccessImageUpload(this.file);
  }



public onSelectSingleTap() {
  this.isSingleMode = true;

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

private startSelection(context) {
  let that = this;

  context
  .authorize()
  .then(() => {
      that.imageAssets = [];
      that.imageSrc = null;
      return context.present();
  })
  .then((selection) => {
     console.log("Selection done: " + JSON.stringify(selection));
     this.file = selection[0]._android;    
    
     
    
      that.imageSrc = that.isSingleMode && selection.length > 0 ? selection[0] : null;

      // set the images to be loaded from the assets with optimal sizes (optimize memory usage)
      selection.forEach(function (element) {
          element.options.width = that.isSingleMode ? that.previewSize : that.thumbSize;
          element.options.height = that.isSingleMode ? that.previewSize : that.thumbSize;
      });

      that.imageAssets = selection;
  }).catch(function (e) {
      console.log(e);
  });
}

  // proccess image function
proccessImageUpload(fileUri) {
  var backgroundHttp  = require("nativescript-background-http");
  return new Promise((resolve, reject) => {
      // body...
      var request = {
          url: 'http://192.168.0.2:4000/api/posts',
          method: "POST",
          headers: {
              "Content-Type": "application/octet-stream",
              "user_id": "<user_id>"
          },
          description: 'Uploading profile image..',
          androidAutoDeleteAfterUpload: false,
          androidNotificationTitle: 'Profile image'
      }

      var params = [
        { name: "title", value: "test" },
        { name: "content", value: "test" },
        { name: "fileToUpload", filename: fileUri, mimeType: "image/jpeg" }
     ];

     var backgroundSession = backgroundHttp.session('image-upload');
     var task = backgroundSession.uploadFile(fileUri, request);

      task.on("progress", (e) => {
          // console log data
          console.log(`uploading... ${e.currentBytes} / ${e.totalBytes}`);
      });

      task.on("error", (e) => {
          // console log data
          console.log(`Error processing upload ${e.responseCode} code.`);
          reject(`Error uploading image!`);
      });

      task.on("responded", (e) => {
          // console log data
          console.log(`received ${e.responseCode} code. Server sent: ${e.data}`);
          // var uploaded_response = JSON.parse(e.data);
      });

      task.on("complete", (e) => {
          // console log data
          console.log(`upload complete!`);
          console.log(`received ${e.responseCode} code`);
          // console.log(e.data);
      })

      resolve(task);
  });
}

I know the issue is coming from this line.

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

Any help would be greatly appreciated!

3 Answers 3

4

You use old version if nativescript-background-http plugin

You have to install latest version

tns plugin add @nativescript/background-http
0

I was able to get this working by installing tns version 6.

0

I had exactly the same problem. I got this from slack.com, compliments Chris Vietor "tns plugin add nativescript-background-http" works with nativescript 6. "tns plugin add @nativescript/background-http" works with nativescript 7.

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.