{"id":1161,"date":"2014-03-04T09:00:31","date_gmt":"2014-03-04T03:30:31","guid":{"rendered":"http:\/\/ramkulkarni.com\/blog\/?p=1161"},"modified":"2014-03-04T09:00:31","modified_gmt":"2014-03-04T03:30:31","slug":"cfmobile-example-taking-picture-and-uploading-to-coldfusion-server","status":"publish","type":"post","link":"http:\/\/ramkulkarni.com\/blog\/cfmobile-example-taking-picture-and-uploading-to-coldfusion-server\/","title":{"rendered":"CFMobile Example – Taking picture and uploading to ColdFusion server"},"content":{"rendered":"

In this post I am going to show you how to create a mobile application using ColdFusion Splendor that can take a picture and upload the picture to CF server. This application uses Camera and File APIs.<\/p>\n

The application is very simple – it has two buttons, one to take picture and the other one to set URL where pictures are to be uploaded. You can set URL of the server before taking a picture or after, just before it is to be uploaded. Once the URL is set, it is stored in the localStorage and will be remembered. \u00a0There is a messages div where the\u00a0application\u00a0displays messages about different operations it is performing.<\/p>\n

\"2014_03_04_image1\"<\/a> \"2014_03_04_image2\"<\/a> \"2014_03_04_image3\"<\/a><\/p>\n

Here is HTML UI code in the index.cfm –<\/p>\n

\n
DOCTYPE html><\/span>\n\n<h1><\/span>CFMobile Photo Demo App <\/h1><\/span>\nThis demo app shows how to take picture and upload to CF server using CFMobile features.<br><\/span>\n\n<button<\/span>  type=<\/span>\"button\"<\/span> id=<\/span>\"takePictBtn\"<\/span>><\/span>Take Picture &<\/span> Upload<\/button><br><\/span>\n<button<\/span> type=<\/span>\"button\"<\/span> id=<\/span>\"setServerURLBtn\"<\/span>><\/span>Set Server URL<\/button><\/span>\n<h2><\/span>Messages<\/h2><\/span>\n<div<\/span> id=<\/span>\"msgDiv\"<\/span>><\/div><\/span><\/pre>\n<\/div>\n
Then there is a JavaScript block where I register event handlers for buttons. I also have a utility function to display messages in \u00a0the msgDiv –<\/p>\n
\n
<script ><\/span>\n\tdocument<\/span>.getElementById(\"setServerURLBtn\"<\/span>).onclick =<\/span> function<\/span>(){\n\t\tvar<\/span> serverUrl =<\/span> \"\"<\/span>;\n\t\tif<\/span> (typeof<\/span> localStorage.serverUrl !==<\/span> \"undefined\"<\/span>)\n\t\t\tserverUrl =<\/span> localStorage.serverUrl;\n\t\tserverUrl =<\/span> prompt(\"Enter Server URL\"<\/span>,serverUrl);\n\t\tif<\/span> (serverUrl !=<\/span> null<\/span>)\n\t\t\tlocalStorage.serverUrl =<\/span> serverUrl;\n\t};\n\n\tdocument<\/span>.getElementById(\"takePictBtn\"<\/span>).onclick =<\/span> function<\/span>(){\n\t\ttakePictureAndUpload();\n\t};\n\n\tfunction<\/span> displayMessage (msg, append)\n\t{\n\t\tvar<\/span> divElm =<\/span> document<\/span>.getElementById(\"msgDiv\"<\/span>);\n\t\tif<\/span> (append !=<\/span> undefined<\/span> &&<\/span> !<\/span>append)\n\t\t\tdivElm.innerHTML =<\/span> \"\"<\/span>;\n\t\tdivElm.innerHTML +=<\/span> msg;\n\t}\n<\/script><\/span><\/pre>\n<\/div>\n
Event handler for the\u00a0setServerURLBtn first checks if server url is already stored in the localStorage. If yes, it\u00a0initializes input field with that url. After user enters the URL, this function sets it to localstorage.serverUrl variable.<\/p>\n
Event handler for\u00a0takePictBtn calls\u00a0takePictureAndUpload function which we will see in the cfclient block later. Note that I am not assigning\u00a0takePictureAndUpload directly to the event handler because when that code is executed by the browser, cfclient block is not initialized yet and so\u00a0takePictureAndUpload function would not be available.<\/p>\n
Remaining\u00a0code in this file is cfclient code. First we enable device APIs (required because we are going to use Camera APIs) in cfclientsettings tag. Then we start cfclient block.<\/p>\n
\n
<cfclientsettings<\/span> enabledeviceapi=<\/span>\"true\"<\/span> ><\/span>\n<cfclient><\/span>\n\t<cfscript><\/span>\n          \/\/TODO: code to take picture and upload to server<\/span>\n         <\/cfscript><\/span>\n<\/cfclient><\/span><\/pre>\n<\/div>\n
We will now add functions in the cfscript block of cfclient. The first function is\u00a0takePictureAndUpload –<\/p>\n
\n
function<\/span> takePictureAndUpload<\/span>()\n{\n\tvar<\/span> imageUrl<\/span> =<\/span> cfclient.camera.getPicture<\/span>();\n\n\tif<\/span> (!<\/span>isDefined<\/span>(\"imageUrl\"<\/span>) ||<\/span> imageUrl.length<\/span> ==<\/span> 0<\/span>)\n\t\treturn<\/span>;\n\n\tdisplayMessage<\/span>(\"Temporary image - \"<\/span> +<\/span> imageUrl<\/span> +<\/span> \"<br><hr>\"<\/span>, false<\/span>);\n\n\t\/\/This file is in a temporary file system. Move it to persistent file system<\/span>\n\tvar<\/span> newFilePath<\/span> =<\/span> copyFileFromTempToPersistentFileSystem<\/span>(imageUrl<\/span>);\n\n\t\/\/Now upload file to the server<\/span>\n\tuploadFileToServer<\/span>(newFilePath<\/span>);\n\n\t\/\/Delete temporary file<\/span>\n\tcfclient.file.remove<\/span>(imageUrl<\/span>);\n\tdisplayMessage<\/span>(\"Deleted temporaty file \"<\/span> +<\/span> imageUrl<\/span> +<\/span> \"<br><hr>\"<\/span>);\n}<\/pre>\n<\/div>\n
cfclient.camera.getPicture() launches device’s camera application. Depending on options passed to this function, it either returns path of the saved picture or picture data in base64 format. In this application I am not passing any options and the API returns path of the picture file.
\nPhoneGap supports two kinds of file system types – persistent and temporary. Files generated by device APIs are generally stored in the temporary file system. As the name suggest, all files stored in this file system are temporary in nature and many not be available later. So I need to move the picture file from temporary file system to \u00a0persistent file system. I will do that in\u00a0copyFileFromTempToPersistentFileSystem that we will see shortly.<\/p>\n
Once I get path of the file (returned by\u00a0copyFileFromTempToPersistentFileSystem)\u00a0in persistent file system, I call another function, uploadFileToServer and then delete temporary file.<\/p>\n
Here is the code for \u00a0copyFileFromTempToPersistentFileSystem function –<\/p>\n
\n
function<\/span> copyFileFromTempToPersistentFileSystem<\/span> (tempFilePath<\/span>)\n{\n\t\/\/save existing file system<\/span>\n\tvar<\/span> oldFileSystem<\/span> =<\/span> cfclient.file.getFileSystem<\/span>();\n\n\t\/\/Get file object from the path<\/span>\n\tvar<\/span> tmpFile<\/span> =<\/span> cfclient.file.get<\/span>(tempFilePath<\/span>);\n\n\t\/\/set persistent file system<\/span>\n\tvar<\/span> persistentfileSystem<\/span> =<\/span> cfclient.file.setFileSystem<\/span>(\"persistent\"<\/span>);\n\n\tvar<\/span> newFilePath<\/span> =<\/span> persistentfileSystem.root.fullPath<\/span> +<\/span> \"\/\"<\/span> +<\/span> tmpFile.name<\/span>;\n\n\t\/\/If file with the same name exists in the persistent file system, then try save<\/span>\n\t\/\/it with different name<\/span>\n\tvar<\/span> count<\/span> =<\/span> 1<\/span>;\n\twhile<\/span> (count<\/span> <<\/span> 10<\/span>)\n\t{\n\t\ttry<\/span>\n\t\t{\n\t\t\tcfclient.file.get<\/span>(newFilePath<\/span>);\n\n\t\t\t\/\/file already exists. Try different file name<\/span>\n\t\t\tcount<\/span>++<\/span>;\n\t\t\tnewFilePath<\/span> =<\/span> persistentfileSystem.root.fullPath<\/span> +<\/span> \"\/\"<\/span> +<\/span> replace<\/span>(tmpFile.name<\/span>,\".\"<\/span>,\"_\"<\/span>) +<\/span> \"_\"<\/span> +<\/span> count<\/span> +<\/span> \".jpg\"<\/span>;\n\t\t}\n\t\tcatch<\/span> (any<\/span> e<\/span>) {\n\t\t\t\/\/Assume file does not exists. Go ahead and copy from temp location to persistent location.\t<\/span>\n\t\t\tconsole.log<\/span>(\"Exception : \"<\/span> +<\/span> e.message<\/span>);\n\t\t\tbreak<\/span>;\n\t\t}\n\t}\n\n\t\/\/Copy file<\/span>\n\tcfclient.file.copy<\/span>(tempFilePath<\/span>,newFilePath<\/span>);\n\tdisplayMessage<\/span>(\"Image file copied to \"<\/span> +<\/span> newFilePath<\/span> +<\/span> \"<br><hr>\"<\/span>);\n\n\t\/\/Restore old file system<\/span>\n\tcfclient.file.setFileSystem<\/span>(oldFileSystem.name<\/span>);\n\n\t\/\/return new file path<\/span>\n\treturn<\/span> newFilePath<\/span>;\n}<\/pre>\n<\/div>\n
And\u00a0uploadFileToServer function –<\/p>\n
\n
function<\/span> uploadFileToServer<\/span>(imageFilePath<\/span>)\n{\n\tif<\/span> (!<\/span>structKeyExists<\/span>(localStorage<\/span>,\"serverUrl\"<\/span>))\n\t{\n\t\tvar<\/span> serverUrl<\/span> =<\/span> prompt<\/span>(\"Enter Server URL\"<\/span>,serverUrl<\/span>);\n\t\tif<\/span> (serverUrl<\/span> !=<\/span> null<\/span>)\n\t\t\tlocalStorage.serverUrl<\/span> =<\/span> serverUrl<\/span>;\n\t\telse<\/span>\n\t\t{\n\t\t\talert<\/span>(\"No file uploaded\"<\/span>);\n\t\t\treturn<\/span>;\n\t\t}\n\t}\n\n\tdisplayMessage<\/span>(\"uploading file to \"<\/span> +<\/span> localStorage.serverUrl<\/span> +<\/span> \"<br><hr>\"<\/span>);\n\n\tvar<\/span> uploadOptions<\/span> =<\/span> {\n\t\tfileKey<\/span>:\"uploadedPicture\"<\/span>,\n\t\tfileName<\/span>:\"uploadedPictured.jpg\"<\/span>\n\t};\n\n\tcfclient.file.upload<\/span>(imageFilePath<\/span>, localStorage.serverUrl<\/span>,\n\t\t\tonFileUploaded<\/span>, uploadError<\/span>, uploadOptions<\/span>\n\t);\n\n\tfunction<\/span> onFileUploaded<\/span>()\n\t{\n\t\tdisplayMessage<\/span>(\"File uploaded successfully\"<\/span>);\n\t}\n\n\tfunction<\/span> uploadError<\/span>(err<\/span>)\n\t{\n\t\t\/\/See error codes at http:\/\/docs.phonegap.com\/en\/3.3.0\/cordova_file_file.md.html#FileTransferError<\/span>\n\t\tif<\/span> (err.code<\/span> ==<\/span> 3<\/span>)\n\t\t\talert<\/span>(\"Error uploading file - Connection error\"<\/span>);\n\t\telse<\/span>\n\t\t\talert<\/span>(\"Error uploading file. Code - \"<\/span> +<\/span> err.code<\/span>);\n\t}\n\n}<\/pre>\n<\/div>\n
This function first checks if user has already entered URL where files is to be uploaded. If it is not set, then it prompts user to enter the URL. Then it sets form field options in\u00a0uploadOptions struct.
\nImage data would be sent in a form field assigned to\u00a0fileKey field. In this application it is “uploadedPicture”. As per PhoneGap docs<\/a>\u00a0fileName field tells \u00a0server the name to be used when saving the uploaded file. But I found that this field is not passed to the server, or server does not save file with the name assigned to this field. I have not investigated if the bug is in PhoneGap or cfclient implementation.<\/p>\n
cfclient.file.upload function actually sends file data to the server. Third and fourth argument to this function are success and error calbacks respectively. In this example those are\u00a0onFileUploaded \u00a0(success callback) and\u00a0uploadError (error callback) functions.<\/p>\n
That completes the client side code. Now let’s see how the server-side code (to receive uploaded file and save it on the server) could be written (it is in fileUploadHandler.cfm in server folder of this project) –<\/p>\n
\n
<!--- Save uploaded file from a mobile application ---><\/span>\n<cfif<\/span> structKeyExists<\/span>(form<\/span>,\"uploadedPicture\"<\/span>)><\/span>\n\t<cftry><\/span>\n\t\t<!--- save file in the current folder ---><\/span>\n\t\t<cfset<\/span> fileInfo<\/span> =<\/span> getFileInfo<\/span>(form.uploadedPicture<\/span>)><\/span>\n\n\t\t<cfset<\/span> path<\/span> =<\/span> getDirectoryFromPath<\/span>(getTemplatePath<\/span>()) &<\/span> \"\/\"<\/span> &<\/span> fileInfo.name<\/span> &<\/span> \".jpg\"<\/span>><\/span>\n\t\t<cffile<\/span> action<\/span>=<\/span>\"copy\"<\/span> destination<\/span>=<\/span>\"#path#\"<\/span> source<\/span>=<\/span>\"#form.uploadedPicture#\"<\/span> ><\/span>\n\t<cfcatch<\/span> type<\/span>=<\/span>\"any\"<\/span> name<\/span>=<\/span>\"e\"<\/span>><\/span>\n\t\t<cflog<\/span> text=<\/span>\"#e.message#\"<\/span> ><\/span>\n\t<\/cfcatch><\/span>\n\t<\/cftry><\/span>\n<\/cfif><\/span><\/pre>\n<\/div>\n
Note that the uploaded file date is stored in the form field “uploadedPicture”, as specified in the client side code in uploadFileToServer function. The above code saves picture file in the same folder as the CFML file processing it.<\/p>\n
I have provided links to download Android application and Thunder project below. If you download the project, you will see that client side code is in the root folder of the project and server-side code is in a subfolder called ‘server’. There is Application.cfm in the root of the project and another one in the ‘server’ folder. It is important that client and server CFML code have their own Application.cfm.
\nI have added Application.cfm in the project root so that I could run this application in the Shell app. But since server folder is a child of project folder, it would use Application.cfm in the project root, if it does not have its own Application.cfm. So I included an empty Application.cfm in the server folder too. It would be better to have client and server code in completely independent folders, but in this case I added server folder in the root of client folder to simplify packaging of the project.<\/p>\n
You will find all uploaded pictures from this application in CFMobilePhotoApp\/server folder on the server.<\/p>\n
When you package the application in Thunder, make sure you select only index.cfm in project properties->ColdFusion Mobile Project->Resource Selection tab.<\/p>\n
Download project<\/a> and Android APK<\/a>\u00a0for this application.<\/p>\n
-Ram Kulkarni<\/p>\n","protected":false},"excerpt":{"rendered":"
In this post I am going to show you how to create a mobile application using ColdFusion Splendor that can take a picture and upload the picture to CF server. This application uses Camera and File APIs. The application is very simple – it has two buttons, one to take picture and the other one … <\/p>\n
Continue reading “CFMobile Example – Taking picture and uploading to ColdFusion server”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false}}},"categories":[32,23,78,17,1],"tags":[94,96,24,13,97],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p2g9O8-iJ","jetpack-related-posts":[],"_links":{"self":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts\/1161"}],"collection":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/comments?post=1161"}],"version-history":[{"count":0,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/posts\/1161\/revisions"}],"wp:attachment":[{"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/media?parent=1161"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/categories?post=1161"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/ramkulkarni.com\/blog\/wp-json\/wp\/v2\/tags?post=1161"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}