Daniel Daniel - 2 months ago 31x
C# Question

Dropzone JS Upload to WCF Getting Wrong Data

First of all, I'm new to both WCF services and dropzone JS, but I'm trying to combine the two to create a simple image uploader. I've got my WCF working correctly for the metadata that I've uploaded to through it (so I know it's passing things cross domain correctly), but the Stream that I've captured from Dropzone doesn't match the image that I dropped. In fact, every single image dropped results in the same encoded string server-side ...

For example, I've used this star image as a test, and by uploading the image to a base64 online converter, I can see that the beginning of the base64 string looks like this:


However, when I debug my WCF code, the base64 converted string looks like this:


This string above is the same one for created for every image that I try to send.

So now for all the applicable code pieces. I've got a simple webpage in one project and the WCF related files in another project in the same solution.


<div class="col-lg-12">
<form action="http://localhost:39194/ImageRESTService.svc/AddImageStream/"
Dropzone.options.dropzone = {
maxFilesize: 10, // MB


/* Stores a new image in the repository */
[WebInvoke(Method = "POST",
ResponseFormat = WebMessageFormat.Json,
UriTemplate = "AddImageStream/")]
void AddImageStream(Stream img);

AddImageStream implementation:

public void AddImageStream(Stream img)
//try to save image to database
byte[] buffer = new byte[10000];
int bytesRead, totalBytesRead = 0;
string encodedData = "";

bytesRead = img.Read(buffer, 0, buffer.Length);
encodedData = encodedData + Convert.ToBase64String(buffer,
totalBytesRead += bytesRead;
} while (bytesRead > 0);

Webconfig applicable pieces:

<service name="ImageRESTService.ImageRESTService" behaviorConfiguration="serviceBehavior">
<endpoint address="" behaviorConfiguration="web" contract="ImageRESTService.IImageRESTService" binding="webHttpBinding" bindingConfiguration="webHttpBinding"></endpoint>
<behavior name="serviceBehavior">
<serviceMetadata httpGetEnabled="false" />
<serviceDebug includeExceptionDetailInFaults="false" />
<behavior name="web">
<webHttp />
<standardEndpoint name="" helpEnabled="true" automaticFormatSelectionEnabled="true" maxReceivedMessageSize="2147000000" />

<binding crossDomainScriptAccessEnabled="true" name="ImagesBinding" closeTimeout="00:10:00" openTimeout="00:10:00" receiveTimeout="00:10:00" sendTimeout="00:10:00" maxBufferSize="2147483647" maxBufferPoolSize="2147483647" maxReceivedMessageSize="2147483647" />
<binding name="webHttpBinding" transferMode="Streamed" maxReceivedMessageSize="2147483647" maxBufferSize="10485760" closeTimeout="00:01:00" openTimeout="00:01:00"
receiveTimeout="00:10:00" sendTimeout="00:01:00">
<readerQuotas maxStringContentLength="2147483647" maxArrayLength="1000000" />

The problem is visible when I break on the encodedString piece and it doesn't match what I'm expecting. If I copy the entire string into another online image that generates images from base64 strings, it's not a valid image. At this point I'm stuck and haven't been able to determine why I can't read from dropzone.


For anyone else looking to configure a WCF service to catch dropzone images, be aware that dropzone sends multipart/form-data that looks like:

Content-Disposition: form-data; name="data"; filename="DSCF0001.JPG"
Content-Type: image/jpeg

<file bytes>

There isn't a built-in way to parse this data that I found, however this blog post goes into more details and provides a codeplex MultipartParser class that worked perfectly for this scenario.

Simplified WCF code now looks like:

public string AddImageStream(Stream img)
        MultipartParser parser = new MultipartParser(img);

        string encodedString = "";

        if (parser.Success)
            // Save the file
            encodedString = SaveFile(parser.Filename, parser.ContentType, parser.FileContents);

        return encodedString;