Twitter: raymondcamden


Address: Lafayette, LA, USA

How I debugged a Flash-based uploader issue

07-26-2012 5,444 views Development, Flex, ColdFusion 5 Comments

Since I've been on a 'How I fix things' kick lately I thought I'd share a quick real world example. A reader wrote in stating that he had issues with ColdFusion's multi-file uploader. This is a Flash-based utility that allows you to upload any number of files. On the server side, you handle the file as you wish (copy it to a folder, upload it to S3, whatever), but you are responsible for outputting a JSON string back to the front end that is then interpreted by the Flash application.

My reader was having an issue with the uploader where files were being processed correctly but the front end always reported it as an error. Since the files were handled ok the issue must have been in the communication back to the front end. So how did I debug this?

First off - the Flash network call was a POST but it was not rendered properly in Chrome dev tools. Chrome actually showed the POST but the response wasn't displayed:

Firebug didn't even render the request. So I switched to a lower-level tool I like - Charles. I've often used Charles (and ServiceCapture) for Flash and Flex-based applications since it does a real good job of handling those applications.

Charles monitors pretty much every network request on your box so the first thing you want to do is click Proxy/Recording Settings , go to the Include tab and enter a new record for your testing site. This makes it a lot easier to keep track of the network requests you care about.

I then simply switched over to the browser, uploaded a file via the Flash app, and then popped back into Charles. I selected the individual request and then the Response tab. This is the real result and I bet you can see the error right away:

Yep - extra HTML comments from the server side code (see note for ColdFusion folks below) breaking the JSON. In this case, it was something emitted from earlier in his code in a completely different file but executed during the request.

From start to finish this was probably a 3-5 minute debug for me but something I know he had worked on for some time. As I've been saying recently at conferences, knowing the types of tools you have available to help debug issues is priceless.

p.s. As a special note to ColdFusion users - the mistake above most likely came from accidentally using an HTML comment when a CFML comment was meant instead. It is an easy mistake to make (two dashes instead of three) and something you should watch out for.

5 Comments

  • Jack Poe #
    Commented on 07-26-2012 at 1:46 PM
    Just a public thanks for helping me out with this! Now that I know what to watch out for in future, I will only need to bug you about 1000 times a day instead of 2000 :)
  • Jack Poe #
    Commented on 07-26-2012 at 1:52 PM
    Just checked the CHARLES screens I saved and I was looking right at the error in the response tab - but without knowing what JSON looks like, I had no idea I was looking the error in the face!
  • Commented on 07-26-2012 at 2:54 PM
    Understandable, Jack. In the future, you could check with this online tool:

    http://jsonformatter.curiousconcept.com/
  • JP #
    Commented on 07-27-2012 at 10:06 AM
    I've run into the seemingly black hole of network communication between the browser and Flash many times... I didn't know about Charles. Thanks Ray!!!
  • Commented on 07-30-2012 at 10:43 AM
    For those running Windows, a free alternative is Fiddler Web Debugging Proxy. The tool is still maintained (last update 6/23/2012) and do the job very well: http://www.fiddler2.com/fiddler2/

Post Reply

Please refrain from posting large blocks of code as a comment. Use Pastebin or Gists instead. Text wrapped in asterisks (*) will be bold and text wrapped in underscores (_) will be italicized.

Leave this field empty