Geek Answers Handbook

Loading an image using Phonegap: InvalidCastException

I am trying to upload a file to my server using Phonegap. I am currently stuck when an error appears that says:

InvalidCastException Failed to deserialize WP7CordovaClassLib.Cordova.Commands.FileTransfer+UploadOptions[] with JSON value :: ["{\"filePath\":\"/CapturedImagesCache/PhotoChooser-51766419-c657-46db-a53d-f09bee300a89.jpg\",\"server\":\"http://server.myapp.srv.co.nz/pages/fileupload\",\"fileKey\":\"file\",\"fileName\":\"PhotoChooser-51766419-c657-46db-a53d-f09bee300a89.jpg\",\"mimeType\":\"image/jpg\",\"params\":\"value1=test&value2=param\",\"chunkedMode\":false}"]

HTML + Javascript

 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="format-detection" content="telephone=no" /> <title>File Transfer Example</title> </head> <body> <button id="uploadPhotoButton">Upload a Photo</button> <script type="text/javascript" src="cordova-2.2.0.js"></script> <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="js/jquery.mobile-1.2.0.min.js"></script> <script type="text/javascript" src="js/camera.js"></script> <script type="text/javascript"> $(document).one("pause", function () { console.log('Paused.'); }); $(document).one("resume", function () { console.log('Resumed.'); }); $(document).one("deviceready", function () { console.log('Device is ready.'); }); $(document).one("backbutton", function () { console.log('Back button pressed.'); }); $(document).ready(function () { console.log('DOM is ready.'); $(document).on("click", "#uploadPhotoButton", function (e) { console.log('clicked button'); getImage(); }); function getImage() { // Retrieve image file location from specified source navigator.camera.getPicture(uploadPhoto, function (message) { alert('get picture failed'); }, { quality: 50, destinationType: navigator.camera.DestinationType.FILE_URI, sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY } ); } function uploadPhoto(imageURI) { var options = new FileUploadOptions(); options.fileKey = "file"; options.fileName = imageURI.substr(imageURI.lastIndexOf('/') + 1); options.mimeType = "image/jpeg"; var params = new Object(); params.value1 = "test"; params.value2 = "param"; options.params = params; options.chunkedMode = false; var ft = new FileTransfer(); ft.upload(imageURI, "http://my.server.co.nz/pages/fileupload", win, fail, options); } function win(r) { console.log("Code = " + r.responseCode); console.log("Response = " + r.response); console.log("Sent = " + r.bytesSent); alert(r.response); } function fail(error) { alert("An error has occurred: Code = " = error.code); } }); </script> </body> </html>

Complete error log.

 GapBrowser_Navigated :: /app/www/index.html#/app/www/uploadtest.html Log:"clicked button" The thread '<No Name>' (0xf55026a) has exited with code 0 (0x0). The thread '<No Name>' (0xe3f0326) has exited with code 0 (0x0). INFO: AppDeactivated INFO: AppActivated Log:"Paused." The thread '<No Name>' (0xf1a02e6) has exited with code 0 (0x0). Log:"Resumed." The thread '<No Name>' (0xf2a01d2) has exited with code 0 (0x0). options = ["{\"filePath\":\"/CapturedImagesCache/PhotoChooser-51766419-c657-46db-a53d-f09bee300a89.jpg\",\"server\":\"http://my.server.co.nz/pages/fileupload\",\"fileKey\":\"file\",\"fileName\":\"PhotoChooser-51766419-c657-46db-a53d-f09bee300a89.jpg\",\"mimeType\":\"image/jpg\",\"params\":\"value1=test&value2=param\",\"chunkedMode\":false}"] A first chance exception of type 'System.InvalidCastException' occurred in System.ServiceModel.Web.dll A first chance exception of type 'System.InvalidCastException' occurred in System.ServiceModel.Web.dll InvalidCastException Failed to deserialize WP7CordovaClassLib.Cordova.Commands.FileTransfer+UploadOptions[] with JSON value :: ["{\"filePath\":\"/CapturedImagesCache/PhotoChooser-51766419-c657-46db-a53d-f09bee300a89.jpg\",\"server\":\"http://server.myapp.srv.co.nz/pages/fileupload\",\"fileKey\":\"file\",\"fileName\":\"PhotoChooser-51766419-c657-46db-a53d-f09bee300a89.jpg\",\"mimeType\":\"image/jpg\",\"params\":\"value1=test&value2=param\",\"chunkedMode\":false}"] A first chance exception of type 'System.NullReferenceException' occurred in Lion.MyApp.dll The thread '<No Name>' (0xfdc025e) has exited with code 0 (0x0). Log:"Error in error callback: FileTransfer1325332352 = ReferenceError: Invalid left-hand side in assignment" The thread '<No Name>' (0xfa60286) has exited with code 0 (0x0).

Does anyone have an idea on how to make this work?

Thanks!

W

+6
source share
4 answers

I think you are violating the meaning of your options. Do you need to pass JSON or the actual object?

Right now you are passing an array with text in it.

 options = ["{\"filePath\":\"/CapturedImagesCache/PhotoChooser-51766419-c657-46db-a53d-f09bee300a89.jpg\",\"server\":\"http://my.server.co.nz/pages/fileupload\",\"fileKey\":\"file\",\"fileName\":\"PhotoChooser-51766419-c657-46db-a53d-f09bee300a89.jpg\",\"mimeType\":\"image/jpg\",\"params\":\"value1=test&value2=param\",\"chunkedMode\":false}"]

The error appears to be related to deserialization issues.

+1
source

Put your getImage, uploadImage, win, fail outside of the call to $ (document) .ready inline.

The link to win and fail actually closes, and the gap in the phone gets it as null when it tries to access these methods directly. Phonegap probably expects a global function instead of a hidden function inside the function.

PhoneGap executes its javascript context outside the code, which may work in a true javascript module, and may not work correctly with telephone communications.

+1
source

I had a problem similar to yours. I solved this by changing the mimeType parameter to "text / plain".

Do you use parameters for sending? If this is a lie, I think you need to send empty parameters.

0
source

I had this problem before, first try to prepare the image in html, and do not take it directly from the navigator, it may not save the taken photo in it in cash;)

In my solution, I assume that I have an image with id id = 'camera_image'

img id = 'camera_image' ...

Then I set all the image variables in it and load it (as you will see in the following code).

2 functions are used here:

 function takephoto(){ navigator.camera.getPicture( function(uri){ $('#camera_image').show(); var img = document.getElementById('camera_image'); img.style.visibility = "visible"; img.style.display = "block"; img.src = uri; uploadPhoto(img); alert("Success"); }, function(e) { console.log("Error getting picture: " + e); }, { quality: 50, destinationType: navigator.camera.DestinationType.FILE_URI }); // Get URI of picture to upload var img = document.getElementById('camera_image'); var imageURI = img.src; if (!imageURI || (img.style.display == "none")) { alert("Take picture or select picture from library first."); return; } }

To select an existing photo:

  function choosephoto(){ navigator.camera.getPicture( function(uri) { $('#camera_image').show(); var img = document.getElementById('camera_image'); img.style.visibility = "visible"; img.style.display = "block"; img.src = uri; uploadPhoto(img); }, function(e) { console.log("Error getting picture: " + e); }, { quality: 50, destinationType: navigator.camera.DestinationType.FILE_URI, sourceType: navigator.camera.PictureSourceType.SAVEDPHOTOALBUM }); // Get URI of picture to upload var img = document.getElementById('camera_image'); var imageURI = img.src; if (!imageURI || (img.style.display == "none")) { alert("please select a pic first"); return; } }

in the upload function: function uploadPhoto (img) {imageURI = img.src ...

ps: sorry for formatting my code, it does not fix well.

0
source

More articles:


All Articles