NativeScript Vue send request with form data (multipart/form-data)

Question

I have a case in my application where I need to send data as form data to a server. The data includes a message and an optional list of files. The problem I'm facing is that when sending the request it's not being formed properly.

Request Payload

Expected (sample with the same request in the browser)

Actual (resulting request when running in NativeScript)

The actual result is that the payload is somehow being URL encoded.

Code example

sendData({ id, message, files }) {
  const config = {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  };

  const payload = new FormData();
  payload.append('message', message);

  if (files && files.length > 0) {
    files.forEach((file) => {
      payload.append(`files`, file, file.name);
    });
  }

  return AXIOS_INSTANCE.post(
    `/api/save/${id}`,
    payload,
    config
  );
}

As you can see from the above, I'm using axios and also I'm trying to use FormData to format the data. From my research it seems that NativeScript used to not support binary data via XHR - however looking at this merge request on GitHub it looks like it's been fixed about a year ago.

So my suspicion is that I'm doing something wrong, maybe there's an alternative to using FormData, or else I shouldn't use axios for this particular request?

Version Numbers

• nativescript 6.8.0
• tns-android 6.5.3
• tns-ios 6.5.3

Answer 1

Nativescript's background-http supports multipart form data.

See below for how its configured to do multipart upload

var bghttp = require("nativescript-background-http");
var session = bghttp.session("image-upload");
var request = {
  url: url,
  method: "POST",
  headers: {
    "Content-Type": "application/octet-stream"
  },
  description: "Uploading "
};

var params = [
  { name: "test", value: "value" },
  { name: "fileToUpload", filename: file, mimeType: "image/jpeg" }
];
var task = session.multipartUpload(params, request);