CODEWITHSUNDEEP
c#javascriptjqueryajaxwcf
Clinton Ward
Clinton Ward

Reputation: 2511

Working example of AJAX file upload to WCF service

I'm looking for an example of an ajax call for streaming data to a WCF service. I am always getting an error. Any help appreciated, or even links to blogs with a solution. This is my WCF service class

[ServiceBehavior(InstanceContextMode = InstanceContextMode.PerCall)]
public class Images : IImages
{
    string IImages.UploadImage(string fileKey, Stream imageStream)
    {
        using (var fileStream = File.Create(@"Images\" + fileKey))
        {
            imageStream.CopyTo(fileStream);
        }
        return "done";
    }
}

and my contract is 

[OperationContract(Name = "UploadImage")]
[WebInvoke(UriTemplate = "?file_key={fileKey}", Method = "POST", ResponseFormat = WebMessageFormat.Json, BodyStyle = WebMessageBodyStyle.Bare)]
string UploadImage(string fileKey, Stream imageStream);

I have web.config stream binding

<binding name="PublicStreamBinding"
        maxReceivedMessageSize="2000000000" transferMode="Streamed">
    <security mode="None" />
</binding>

my ajax client call is like this

var data = '{"image":"' + uri + '"}'
$.ajax({
    url: GetServerUrl()+"images.svc/?file_key="+options.fileKey,
    type: "POST",
    contentType: "application/json",
    data: data,
    success: function (result) {
        console.log("SUCCESS");
    },
    error: function (jqXHR, textStatus, errorThrown) {
        console.log("error in transfer::" + jqXHR.responceText);
    }
});

Upvotes: 0

Views: 4489

Answers (2)

LarsK
LarsK

Reputation: 11

Install Fiddler ( www.telerik.com/fiddler ). Launch it. Make the web service call. Click on the record of the call in Fiddler. Click on the 'Raw' tabs for request and response. It will be enlightening and you will see exactly what is passed between server and client. Perhaps some addition WCF troubleshooting data as well in the response.

Also, don't forget to check your Application event log on the machine running the WCF service. You can also add a Global.asax to the WCF project (if its a web project) and put logging code in the Application_Error method. Something like this:

    protected void Application_Error(object sender, EventArgs e)
    {       
        Exception ex = Server.GetLastError();

        if (ex is ThreadAbortException)
        {
            // Nothing to do here. The thread abended.
        }
        else
        {
            activityMgr.Add(System.Reflection.MethodBase.GetCurrentMethod(), ex);
        }
    }

Upvotes: 0

Beetroot-Beetroot
Beetroot-Beetroot

Reputation: 18078

I can't comment on the server-side code, but client-side :

  • the data variable should be a plain javascript object, not a JSON representation
  • url shouldn't need the GetServerUrl() prefix; try a leading "/" instead
  • for a POST request it's more normal to include all parameters in the data object rather than tacking them onto the URL, which is the GET approach. It depends what the server-side code is set up to expect but as far as I can tell, it expects file_key to be in the POST.

You should end up with something like this :

var data = {
    image: uri,
    file_key: options.fileKey
};
$.ajax({
    url: "/images.svc/",//probably
    type: "POST",
    contentType: "application/json",
    data: data,
    success: function (result) {
        console.log("SUCCESS");
    },
    error: function (jqXHR, textStatus, errorThrown) {
        console.log("errror in transfer::" + jqXHR.responceText);
    }
});

Upvotes: 1

Related Questions