Uploading images and data with Reste

[macCesar]

Hello Jason...

I'm using RESTe in every project. And I love the elegant way to send data to the server like:

function uploadWithReste(avatar) {
   api.upload({
        body: {
            media: avatar.source.image
        }
    }, function (response) {
        console.log('Response:', JSON.stringify(response));
    });
}

With this (simplified) config:

exports.config = {
    url: 'http://glide.test/api/',
    debug: true,
    timeout: 20000,
    requestHeaders: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    errorsAsObjects: true,
    autoValidateParams: true,
    validatesSecureCertificate: false,

    methods: [
        {
            name: 'upload',
            post: 'upload',
            onError: function (error) {
                console.log('Error:', JSON.stringify(error));
            }
        }
    ],

    beforeSend: function (data, callback) { ... },

    onError: function (e, retry) { ... },

    onLoad: function (e, callback) { ... }
};

Unfortunately, that code does not work. :-(

But with a plain HTTPClient it does:

function uploadWithHttp(avatar) {
    var xhr = Ti.Network.createHTTPClient();

    xhr.setTimeout(20000);

    xhr.open('POST', 'http://glide.test/api/upload');

    xhr.onerror = function (error) {
        console.log('Error:', JSON.stringify(error));
    };

    xhr.onload = function (response) {
        console.log('Response:', JSON.stringify(response));
    };

    xhr.send({
        media: avatar.source.image
    });
};

When testing with more variables, they all get sent, the only one missing is 'media'.

{
    body: {
        name: 'Some Name',
        caption: 'Some Caption',
        media: avatar.source.image
    }
}

So, what can I do to upload images with RESTe?

Do I need to change the Content-Type? Or encode the image ?

Thanks.

[frodfigu]

Same problem here!

[SquirrelMobile]

@macCesar @frodfigu you need to overwrite the Content-Type. When you defines your API methods, for example :

{
      name: "path_name_route_api",
      post: "your/api/path/to",
      requestHeaders: {
        "Content-Type": null
      }
    }

and voilà !

[macCesar]

Thanks!!!

[m1ga]

@macCesar is it working for you?

I have:

api.config({
	debug: true,
	autoValidateParams: false,
	validatesSecureCertificate: false,
	errorsAsObjects: true,
	timeout: 10000,
	url: "http://192.168.10.50/~miga/test/",
	requestHeaders: {
		"Content-Type": "multipart/form-data"
	},
	methods: [{
		name: "test",
		post: "index"
	}],
	onError: function(e, retry) {},
	onLoad: function(e, callback) {
		callback(e);
	}
});

with

api.test({
	body: {
		a: 1,
		b: 2,
		f: fileContent
	}
}, function(data) {
	console.log("---1---");
	console.log(data);
}, function(error) {
	console.log("---2---");
	console.log(error);
})

doesn't work for me. A normal curl: curl -F '[email protected]' -H "Content-Type: multipart/form-data" http://192.168.10.50/~miga/test/index works (I'm just returning $_FILES['f'] in my PHP file).

A plain httclient works fine too:

var xhr = Titanium.Network.createHTTPClient();
xhr.onload = function(e) {
    console.log(e);
};
xhr.open('POST', 'http://192.168.10.50/~miga/test/index');
xhr.send({
    f: fileContent
});

File is there, global header - Content-Type: multipart/form-data. SDK 9.0.3.GA.

Very strange

[Brianggalvez]

Could be related. https://tidev.slack.com/archives/C03CVQX2A/p1662118547536929