upload image from mobile to server and shows JSON is undefined error-Collection of common programming errors

2 years ago
admin
3 minutes

I have req like to upload image from mobile to server. First I am converting the image to base64 and send that data as JSON parameter to the WCF service call. But My issue is the code is always entering to the jQuery ajax error block. If I reduce the size of base64 encoded image size it shows the success message. So is there anything wrong I am doing?

Following is my WCF service. [IMyNewApp.cs]

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.Text;
using System.ServiceModel.Web;
using System.Web.UI.WebControls;

namespace MyApp
{

    [ServiceContract]
    public interface IMyNewApp
    {
          [OperationContract]
        [WebGet(ResponseFormat = WebMessageFormat.Json)]
         void Add(int ID ,  string PIC);

    }
}

[MyNewApp.svc.cs]

using System.Data;
using System.IO;
using System.Drawing;
using System.Drawing.Imaging;
using System.Runtime.Serialization.Formatters.Binary;
using System.Web;
using System.ServiceModel.Web;

namespace MyApp
{
    [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
    public class MyNewApp: IMyNewApp
  {
      public void Add(int ID ,  string PIC)
            {
                    //my code
            }
   }
}
}

my jQueryCode:-

$("#useJSONP").click(function () {
                   var id=4;
                    var pic= "iVBORw0KGgoAAAANSUhEUgAAAC0AAAAtCAYAAAA6GuKaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABVVJREFUeNrsWVtPG1cQnt09voCNwTaCYkAEVTSJlEogFEr72h/Ql771r5WHSn2r+p5W6WPbhAAOIWkgTQ3EhkCw9+IL9nrt3c6ctRHY3sWAl/ghR7J827PnO3O+mW9mVlhZWYH5+fnPVVX9SVGURcMwmCAI0C/DsiwIBAJ6LBb7PRKJfL+wsGAK6+vrs5lMZj2bzUahz0cikdgbHx+/zzRN+5EAB4JBmJqaBp/f33dgy6enkEm/g8PDwzvBYPBXhrRY5ruYnIJQONyXFvajIQVRgL1UCk5OTr5luq5z0yJvesNB0wLTMvlnSZQAeuQeoZBtUMLbU6cjwIODgzA8HMEvALKqgF7RuZWuPwQQEaMJtiEIL+veehaf7DbqdRMtEoKpyYTNxXIZKuUKLitcA6rAAVL0KBaLoMi5s//cQaO1TNPk1hsdjUEYOe8OwALG2Llv1rVsKyKtTLMOhUIBVEXlm7dMswvQBBh3mZj4DEPNBN5I9NzhREHkls3nNbSszE+JW53WPre+I+g67nQykTg7aq/B0iAayAiWQhxywwbbYXQEbSI3h4eHEfTErYCl48/lclAqlUgCHcE6g7aAU4Es7JWck1/QGhi+QEaweeQucZaD7WLNNtDkeNHoCIQxCnhlXVoDVRgw14FazeC/CVfwmY70iEV7k4aQU7Valyjw4eQDOlmZg6VIcdXRBpoo4ff7egJ6NB7HsFU8C5MowZwOtJnrgHW1tNUjKoRCgyBJElSrVTg+PuLR4apU6Bp0TzM0pAFmZ2Ag8JtY99ZAV6sGHGQOuLMJPRQnT2WuXq9zOe516PQUNGH1ItZ7n1B4Ees/gb6lwfoFCDlsU0ClS3IQj0F36YSIdmRkhBcQVCVp+TxmmnVH4B6DtroCTLL+1dISxOMxMAwDHj36DQpcPaXbAU0Anjx5Cqqm8eM2LaurrTVDY/PdbRpz2v1NRi4nY3KUBeaTLpfuhqWtRtuBPtcxdSWONwflL46giU+U4QWDwRsIigDLy0tcwoXuKQ2RSMQGhLz+YcT4xKsD//+huWHj6Eu3e/cASdSqXg+eYLGBwYuIClnR6iwMFo+YLjzTK0e6PGm93M57vwCuBvp6clLGSPHeeT9aiqSWcyrlXP4fv3qBmBttN0JG86nQEdwbcOWVZga+sVqpToWK5QxFzfSEKJenJt82V4gfMD/gAcHx3Dq39ed7xNMrnJ6dFJUTuqCFm7UqnAzs6/EBkKw9DQEI/gR7jI9vYObkZ3lWeSXU3Nw+PHf8D9e/e42JBIUBthe/vN2XwJN7j5fBOv1WB29g4MDAShWCzB27f/8dN0EjnmtjD1Kba2tuz8Fmy+0+/dtAIkJvFu0urqGtKGcUVrmy/YXacUOuXe/h4wiYGB15Cjuqkyc5NT6hOfpxNx9krxVJTstnJDYTvOp8cRBLDRwG9NjjpFHhGTI068YqFwoUlYxXCWR2fk7Vi7rL5pWX55veByTTO1wA3WxXg8/guPCOl3oCgyjxwUfxV0OHqnRxCUNn7MF6WpVd1+KoB4XwsbGxssm80m0+n0g36XbyzJTmdmZhZZMplEuYEv5+bmfkbw3+m6Huy3Z+NIiRoCfhmNRn9YXFx8878AAwBnfOKk/5TZXAAAAABJRU5ErkJggg==";
                    var userData = { "ID": id, "pic": pic};
                    $.ajax({
                        url: "http://myserver/MyApp.svc/Add?callback=?",
                        type: "POST",
                        data: userData,
                        crossDomain: true,
                        contentType: "application/bson; charset=utf-8",
                        dataType: "jsonp",
                        processdata: true,
                        success: function res(msg) {
                            alert("hello" );
                        },
                        error: function error(response) {
                            alert("error");
                            alert(response.responseText);
                            alert(JSON.stringify(response));
                        }
                    });

                  });

            });

Please give me a suggestion. Thanks.

  1. I found the issue.. POST and jsonp are not compatible…So it was using the verb GET, but it has size limitation..that’s why large image is not uploading…

    SO I achieved the cross domain call using method CORS and POST and now I am able to uplaod the image to server…

    Thanks..

Originally posted 2013-11-09 22:55:25.