nativescript: Upload image taken with camera using ajax (fetch) post request

Question

I am pretty new to nativescript, but like it a lot already. The problem at hand is: I would like to take a picture on the mobile phone and upload it to a web server using a POST request.

To get an image from the camera I followed this tutorial: https://nativescript.org/blog/take-your-selfie-with-nativescript-and-its-cross-platform-camera-api/

Specifically the code:

cameraModule.takePicture().then(function (picture) {
   imageContainer.imageSource = picture;
});

I now have the image stored in a variable and it is shown in the user interface (pretty cool). Now I would like to upload the image to a web-server using the fetch module: https://docs.nativescript.org/ns-framework-modules/fetch

I would like to adapt the code for the post request found on the site, but am unsure how to add the image:

fetch("https://httpbin.org/post", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
        img : WHAT SHOULD I ADD HERE?
    })
}).then((r) => r.json())
    .then((response) => {
        const result = response.json;
    }).catch((e) => {
});

As far as I understand, there is also a HTTP module (https://docs.nativescript.org/ns-framework-modules/http), so I am unsure which of the two is best suited for the job. The fetch or the HTTP module.

Sending text using fetch is easy and is working already. Something like this:

body: JSON.stringify({
    text : "yay this is some text"
})

But how can I send an image or a file in general?

Thank you very much in advance!

Answer 1

You need to use this for uploading text and files: https://github.com/NativeScript/plugins/blob/master/packages/background-http/README.md