Ionic Upload Error: advanced-http: "params" option needs to be an dictionary style object, <params: {[key: string]: string | string[]}>

Question

I wanted to use only ionic plugin https://github.com/silkimen/cordova-plugin-advanced-http#uploadFile when uploading an camera/image file from device to API using the following methods.

While, it does not have any syntax error based on the documentation commented below.

The issue was related on the params, which I could not figure out why...

Error: advanced-http: "params" option needs to be an dictionary style object,

Method for uploading image to api.

async uploadToAPI(imgEntry) {

    var url = environment.api_host + "/activities/log/images"
    var filePath = imgEntry.localURL;
    var name = 'reports';

    var body = {
        user_hash: 'xxxxxxx',
        activities_id: 1,
        activities_log_id: 1
    }

    var headers = {
        'Authorization': 'Bearer ' + environment.api_security_bearer
    }

    // (method) HTTP.uploadFile(url: string, body: any, headers: any, filePath: string | string[], name: string | string[]): Promise<any>
    // @param url — The url to send the request to
    // @param body — The body of the request
    // @param headers — The headers to set for this request
    // @param filePath — The local path(s) of the file(s) to upload
    // @param name — The name(s) of the parameter to pass the file(s) along as
    // @returns — returns a FileEntry promise that will resolve on success, and reject on failure

    this.http.uploadFile(
        url,
        body,
        headers,
        filePath,
        name,
    ).then((data) => {
        console.log(data)
    })
        .catch(error => {
            console.log(error)
        })
}

What could I be missing as a mistake on the following code above?

PS: Only, wanted to use the ionic-native/http/ngx and nothing else.

import { HTTP } from '@ionic-native/http/ngx';

Answer 1

I reported to the github repo from the original author, but I later found out a way to resolve this and still using ionic-native/http/ngx

Hope this will help others as well.

this.http.setDataSerializer('multipart')

formData.set('user_hash', 'xxxxx')
formData.set('activities_id', this.activities_id)

var url = environment.api_host + "/activities/log/images"

this.http.sendRequest(url, {
    method: "post",
    data: formData,
    headers: this.headers,
    timeout: 60,
})
    .then(response => {
        console.log(response);
    })
    .catch(error => {
        console.log(error);
    });
}

This works

params:
{}
body:
[Object: null prototype] {
  user_hash:
   'xxxxxx',
  activities_id: '12' }
files:
[ { fieldname: 'reports',
    originalname: '1590642736754.jpg',
    encoding: '7bit',
    mimetype: 'image/jpeg',
    buffer:
     <Buffer ff d8 ff e0 00 10 4a 46 49 46 00 01 01 00 00 48 00 48 00 00 ff e1 00 58 45 78 69 66 00 00 4d 4d 00 2a 00 00 00 08 00 02 01 12 00 03 00 00 00 01 00 01 ... >,
    size: 10857214 } ]

Answer 2

I face same issue without Image upload. I just solve this issue by passing integer value in String. See my code

var url =  this.baseurl;
var headers =  { };
var params = { 
  "from_date": from_date,
  "to_date": to_date,
  "limit_start":0,
  "limit":20,
}
this.http2.get(url,params,headers)
.then(data => {
    const responceJSon = JSON.parse(data.data);
})
.catch(data => {
    console.log("server Response in catch : ");
    console.log(data);
});

Here I replace "limit_start":0, to "limit_start":"0", and "limit":20, to "limit":"20", and it Works !!! .

Final Params :

var params = { 
  "from_date": from_date,
  "to_date": to_date,
  "limit_start":"0",
  "limit":"20",
}

Answer 3

I had similar error like above, OP post, which it state "param" got error key:string..

After further debugging, the ionic capacitor-runtime check only for the value = String | Array only. And i realize my body contain long value. So change the value to String and everthing is work fine.

Just add String() for non-string value in your body. Same goes to headers if still error.

var body = {
        user_hash: 'xxxxxxx',
        activities_id: String(1),
        activities_log_id: String(1)
    }