Building the DC-X client as a „pure“ web application (only HTML, CSS, JavaScript, no Flash, Silverlight or Java) has its advantages. But uploading files through the web browser sucks: Often no progress bars, no drag & drop of files to upload, tiresome selection of multiple files…

(Back in another age, we played with the Windows XP Web Publishing Wizard integration based on code from the Gallery project – but that was a hack that never got off. And I’m not on Windows anymore.)

Lots of applications are using Flash-based upload tools, and I’m trying to learn Flex anyway. So when Fredrik Davidsson (@fdqps) from our Norwegian partners Teknograd AS sent me the source code of his Flex 3-based upload tool, I experimented with it and built a prototype of a DC-X „uploader“ running in Adobe AIR.

He also allowed me to share the source code, see below – here’s some screenshots:



It doesn’t do much but it is working; you can drag & drop files or folders directly onto the list of files to upload, or open a dialog for adding them. You can see the upload progress for each file. Upload URL, username and password and some DC-X specific stuff is entered in a settings dialog. (Note to customers and sales people: Yes, it’s just a prototype, not ready for production use – yet…)

I wouldn’t have been able to build this without the help of Fredrik and lots of other examples on the web, so I’d like to share the source code with you. Use it under a BSD-style license (i.e., no guarantees, don’t lie, don’t be greedy, reuse it without any further restrictions). Please note that I’m a Flex newbie so there’s certainly bad coding practices you don’t want to learn from me, and many important things are missing (like error handling, documentation, security?, garbage collection?)!

Most of this was quite easy to put together, Flex really delivered „rapid application development“ in this case. Only FileReference::upload() not supporting HTTP authentication or access to HTTP request headers (Stack Overflow and flexcoders helped me figure this out, but it’s in the docs as well) cost me a few hours. (That’s why I was unable to use the standard AtomPub API of DC-X, I had to create a custom upload PHP script instead.) And the progress bars are randomly broken, I don’t know why yet.

Here’s the two source code files: main.mxml and main-app.xml. Or download the whole Flex 3 project directory as a Zip file.

The PHP backend is quite specific to DC-X, just upload to something like this and watch the PHP error_log to see which variables you can access:

<?php error_log(print_r($_FILES, true)); error_log(print_r($_REQUEST, true)); ?>

Thanks to Fredrik and everyone else for sharing their code, have fun!

4 Responses to Labs: Building an upload tool for DC-X with Adobe AIR and Flex
  1. Tweets die Labs: Building an upload tool for DC-X with Adobe AIR and Flex @ Digital Collections Blog erwähnt -- Topsy.com 25. September 2009 at 17:34

    […] Dieser Eintrag wurde auf Twitter von Tim Strehle erwähnt. Tim Strehle sagte: Built an upload tool in Flex / Adobe AIR, want to embed this into Adobe Bridge using PatchPanel. Any examples? […]

  2. Avatar

    Nice work!

    As you know I reported some proxy issue with larger files. It was not connected to a proxy that we first believed but to a network issue. It seems that Flex is more sensitive to network timeouts.

    Have not yet received the final feedback from the customer/network specialist but will keep you updated.

  3. Avatar

    I was looking at your code and trying to do something similar. However, I can’t seem to get the progress bars to work. If I use your exact code without changing anything the progress bars don’t work. I was wondering if you could point me in the right direction.

  4. Avatar

    Hi Scott,

    we’re having some issues with the progress bars as well. They seem broken for smaller files. We’ll have to look into this…

    Have you tried uploading larger files?


Leave a Reply