Arildo Junior Arildo Junior - 4 months ago 48
Javascript Question

Unable to make an Image Blob JSON Serializable

JIRA Ticket created due to base64encode failure: https://jira.appcelerator.org/browse/TC-5876

My Current CFG:
Titanium SDK 5.1.2.GA
Testing on an iPhone iOS 9.1

I'm stuck in a problem in a project for a client that requires images took on device (using the camera) to be sent to a WebService and afterwards be seen on any device using the app (both Android and iOS devices).
Titanium provides a Ti.Blob object (event.media) after taking a picture (which is not JSON serializable) and I need somehow to send this to the server. The server responds always a JSON object, thus this Blob must be somehow JSON serializable.

I've tried many ways without success:

1 - Base64Encode the Blob

var base64blob = Ti.Utils.base64encode(event.media);


Doesn't work, it stucks the app and throws a ASL exceeded maximum size error. I imagine that the image is too large to be base64encoded.

2 - Read the Blob into a Buffer

var blobStream = Ti.Stream.createStream({ source: event.media, mode: Ti.Stream.MODE_READ });
var buffer = Ti.createBuffer({ length: event.media.length });
var bytes = blobStream.read(buffer);


It works but I have no idea how can I transform this buffer holding the image contents into something that the server can return in a JSON object and later be transformed into an Image Blob again.

The server can't manage Ti.Blob objects or Ti.Buffer objects because, first of all, they are Titanium objects and the server is C# based, and second due to Ti.Blob and Ti.Buffer aren't JSON serializable, thus the JSON return doesn't work.

What I need is basically described in the imaginary example below:

var imageBlob = event.media;
var JSONSerializableImg = imageBlob.toJSON();
sendImageToServer(JSONSerializableImg);

var imgFromServer = getImageFromServer();
var imageBlob = imgFromServer.toBlob();
var imgView = createImageView({
image: imageBlob
});


I hope someone can help me with any conversion method possible.

Thank's

Answer

I solved this issue by creating a separate method on server-side specially to upload photos. I followed the link below for server side:

PHP code

In Titanium I had to set XHR's header like this:

this.xhr.setRequestHeader("ContentType", "image/png"); this.xhr.setRequestHeader('enctype', 'multipart/form-data');

That's it! Thank's for all the answers.

Comments