Using the getPicture Function for Larger Image Sizes

For larger images, use the IMAGE_URI destination type.

For larger images, use the IMAGE_URI destination type. The MIME type for the image URI is determined using the extension of the file name parameter in the onGetPictureSuccess callback. You must add this extension information to the Hybrid App message as a separate MessageValue to use it on the server. For the HTML image tags, the browser should be able to determine the type through the HTTP connection opened on the URI.

You must create a new option object similar to this:

var options =  { destinationType: PictureOption.DestinationType.IMAGE_URI,
                     sourceType: PictureOption.SourceType.CAMERA
                   };

getPicture(onPictureError, onPictureSuccess, options);

The destinationType can be PictureOption.DestinationType.IMAGE_DATA (Base64 string behavior), or the new PictureOption.DestinationType.IMAGE_URI type. Depending on the destination type specified, the picture success callback's second parameter may be a Base64 string or a URI. The source type can be PictureOption.SourceType.CAMERA, PictureOption.SourceType.PHOTOLIBRARY., or PictureOption.SourceType.BOTH.

The image URI passed back is expected to be valid and resolvable to the image by the browser. You can create an HTML image tag with a URI to display the image, for example, <img src=”URI from getPicture” width=50 height=50 />. This can also be used to create thumbnails.

Uploading the Image to the Server for a URI

To upload the image to the server for a URI, you must create a MessageValue in the JavaScript with a “FILE” type. When the JavaScript Hybrid App message is serialized it will identify if the message contains files. During a submit or online request, the query sent to the container will contain a new query parameter that identifies that this message must be parsed again. The query looks similar to: ?querytype=submit&parse=true.

Note: When you upload a large image to the server using an online request, rather than a submit Hybrid App, the image contents come back from the online request, which can result in too large of a Hybrid App message for the container to handle. It is recommended that you use the submit action instead of online request action when it is likely that the message size will be very large, such as when it includes large images.

The custom code must call the function getDataMessage().setHasFileMessageValue(true); for the parse query to be sent to the container.

Example 1

When uploading the image to the server for a URI, the JavaScript looks similar to the following example. Note that this example is specific to top level screens. See Example 3 for a more general code example:

var options = { destinationType: PictureOption.DestinationType.IMAGE_URI, sourceType: PictureOption.SourceType.PHOTOLIBRARY };

getPicture( onGetPictureError, onGetPictureSuccess, options );

function onGetPictureSuccess(fileName, imageUri){
	// Set file for upload
	var fileDataKey = "Picture_create_fileData_paramKey";
	
	//Code for calling from top level screen
    var messageValue = getDataMessage().getValues().getData(fileDataKey);
	
	if (messageValue)
	{
                // Update file for upload
	        messageValue.setValue(imageUri);
	}
	else
	{
		// Add file for upload
		messageValue = new MessageValue();
		messageValue.setKey(fileDataKey);
		messageValue.setValue(imageUri);
		messageValue.setType(MessageValueType.FILE); 
		//Code for calling from top level screen
        getDataMessage().getValues().add(fileDataKey, messageValue);
	}
	
	getDataMessage().setHasFileMessageValue(true);	
}

Example 2

Handling a larger image size example:

function reportError(errCode)
{
	if (errCode != PictureError.USER_REJECT) {
		// error occurred
	}
}

function reportImage(fileName, imageUri)
{
	// Image captured
	alert("Photo taken");

	//  Optional - Display  preview in image tag
	var imageTagId = "Thumbnail"; // The id of your image tag
	var imageElement = document.getElementById(imageTagId );
	imageElement.src = imageUri;

	// Optional - Create message value to upload image
	var fileKey = "Picture_create_fileData_paramKey"; // Key that maps to submit or online request parameter
	var messageValue = new MessageValue();
	messageValue.setKey(fileKey);
	messageValue.setValue(imageUri);
	messageValue.setType(MessageValueType.FILE);
	
	//  Add message value to Workflow message - NOTE: Code may differ dependent on the context for adding image (Eg. ListView).
	getDataMessage().getValues().add(fileKey, messageValue);

	 getDataMessage().setHasFileMessageValue(true); // Explicitly tell Workflow about image 
}
 var options = { destinationType: PictureOption.DestinationType.IMAGE_URI, sourceType: PictureOption.SourceType.CAMERA};
 getPicture( onGetPictureError, onGetPictureSuccess, options );

Example 3

When uploading the image to the server for a URI, the JavaScript looks similar to the following example. This example is more general compared to Example 1, since it is invoked from a lower level screen:

// invoke from a lower level screen
var messageValue = getCurrentMessageValueCollection().getData(contentDataKey); 

if (messageValue) 
{ 
// Update file for upload 
messageValue.setValue(base64String); 
} 
else 
{ 
// Add file for upload 
messageValue = new MessageValue(); 
messageValue.setKey(contentDataKey); 
messageValue.setValue(base64String); 
messageValue.setType(MessageValueType.TEXT); 
//invoke from a lower level screen
getCurrentMessageValueCollection().add(contentDataKey, messageValue); 
}

Limitations

The server has a limit of 75MB per parameter, which is what the Hybrid Web Container uses as the XmlWorkflowMessage. Therefore, the server imposes a maximum size limit of 50 MB (assuming one picture per XmlWorkflowMessage, and no other keys are present). Keep in mind that clients may impose a lower limit than 50MB.

Note: When accessing very large binary (image) data in the mobile business object associated with the Hybrid App, ensure that the attribute set in the mobile business object is a BigBinary datatype, rather than Binary.