Uploadify IO Error in Chrome

Question

I'm trying to get a basic example set up with Uploadify and my code works in all browsers except for Chrome.

Basically, all I'm trying to do is let a user pick an image to be embedded in the page. The user chooses a file, and on selecting one, the file is sent, via Uploadify, to my C# handler which converts the image to a base-64 encoded string, and sends it back to be placed into the src of the target img.

Here's my JS:

<link rel="stylesheet" href="Content/Uploadify/uploadify.css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="Content/Uploadify/jquery.uploadify.js"></script>
<script type="text/javascript">

   $(function () {
      $("#fileUpload").uploadify({
         'swf': 'Content/Uploadify/uploadify.swf',
         'uploader': 'ImageHandler.ashx',
         'onUploadSuccess': function (file, data, response) {
            $("#theImage").attr("src", data);
          },
          'onUploadError': function (file, errorCode, errorMsg, errorString) {
             alert('The file ' + file.name + ' could not be uploaded: ' + errorString);
          }
       });
    });
</script>

HTML:

<input type="file" id="fileUpload" />
<img id="theImage" height="300" width="300"/>

And here's my handler code:

public void ProcessRequest(HttpContext context)
{
   if (context.Request.Files.Count > 0)
   {
      byte[] bytes = null;
      using (var binaryReader = new BinaryReader(context.Request.Files[0].InputStream))
      {
         bytes = binaryReader.ReadBytes(context.Request.Files[0].ContentLength);
         var base64 = Convert.ToBase64String(bytes);

         var imgSource = "data: " + context.Request.ContentType + ";base64," + base64;

         context.Response.ContentType = "text/plain";
         context.Response.Write(imgSource);
      }
   }

   context.Response.ContentType = "text/plain";
   context.Response.Write("");

}

As you can see, it is very simple and works in FF, IE (even the IE 5 emulator w/ IE 11!), Safari, but when in Chrome (v. 31.0.1650.63 m) the onUploadError function gets hit and the error variables are as follows:

1. file: [file Object]
2. errorCode: -220
3. errorMsg: Error #2038
4. errorString: IO Error

I'm using the latest version of Uploadify (just downloaded from Uploadify.com last night, v. 3.2.1).

Has anyone seen this before or know what I'm doing wrong?

UPDATE:

After doing some Google searches, it appears that some users have gone the route of disabling Flash in Chrome and I can verify this works but I do not like this as a solution. If you go to the Chrome Plugins page there are 2 versions installed:

If I disable the first one in the list, my Uploadify works fine but I wouldn't expect my users to have to do this.

SOLUTION:

Since the entire point of me using Uploadify was to send the image to a handler, and use the response of the handler without a page refresh, and that handler is only converting the image to a base64 encoded string, I would use HTML 5's FileReader where available. So for Chrome, FF, IE 10 & up, Uploadify won't even be used. Here is my new code that works across browsers:

$(function () {
   if (Modernizr.filereader) {
      var $fileUpload = $("#fileUpload");
      $fileUpload.on("change", function (e) {
         var files = e.target.files;
         if (files.length) {
            var reader = new FileReader();
            reader.onload = function (e) {
               $("#theImage").attr("src", reader.result);
            }
            reader.readAsDataURL(files[0]);
         }
      });
   } else {
      // browser doesn't support the HTML 5 file reader api, so fall back to Uploadify:
      $("#fileUpload").uploadify({
         'swf': 'Content/Uploadify/uploadify.swf',
         'uploader': 'ImageHandler.ashx',
         'onUploadSuccess': function (file, data, response) {
            $("#theImage").attr("src", data);
         },
         'onUploadError': function (file, errorCode, errorMsg, errorString) {
            alert('The file ' + file.name + ' could not be uploaded: ' + errorString);
         }
      });
   }
});

Answer 1

The solution for now will be to use Modernizr to detect if the HTML 5 File API is available (specifically the FileReader). If available, I'll use the FileReader to convert the image to a base 64 encoded string and use that in the img's src attribute.

$(function () {
   if (Modernizr.filereader) {
      var $fileUpload = $("#fileUpload");
      $fileUpload.on("change", function (e) {
         var files = e.target.files;
         if (files.length) {
            var reader = new FileReader();
            reader.onload = function (e) {
               $("#theImage").attr("src", reader.result);
            }
            reader.readAsDataURL(files[0]);
         }
      });
   } else {
      // browser doesn't support the HTML 5 file reader api, so fall back to Uploadify:
      $("#fileUpload").uploadify({
         'swf': 'Content/Uploadify/uploadify.swf',
         'uploader': 'ImageHandler.ashx',
         'onUploadSuccess': function (file, data, response) {
            $("#theImage").attr("src", data);
         },
         'onUploadError': function (file, errorCode, errorMsg, errorString) {
            alert('The file ' + file.name + ' could not be uploaded: ' + errorString);
         }
      });
   }
});