Phine Solutions web work notes

Uploading files through a web page is supported in HTML, but with some serious limitations. Usually we set up a Multi-part html form which has an input field that automatically comes with a “browse” button for end users to select a file from local file system to upload, but only one at a time. During which the page will pretty much hang until the web server complete the uploading process and returns the next page. Certainly you can provide multiple input fields to add a little bit of convenience, but there is really no way to upload multiple files at once using just html, and it is quite a tedious process if there are a lot of photos to upload.

Recently I wanted to make uploading photos easier one my site. I want my user to be able to upload any number of photos all at once, and be able to view the uploading progress as well. Since the basic html does not provide this kind of capability and nor does the client side script like JavaScript, “plugins” have to be used. I basically have two options to use: Java Applet or Adobe Flash. Microsoft Silverlight is another tool which can create rich client on the browser, but since it is still a relatively new player in the field I didn’t put a lot of considerations in it.

Two real life examples are Flickr’s photo uploading tool and Facebook’s photo application. Flickr uses Flash and Facebook uses Java Applet respectively. Both of the uploaders are integrated nicely to match the style and flavor of their sites and most importantly are easy to use. In a quick comparison, Flickr’s uploader is light and straightforward. You can select multiple files and see the actual progress during uploading. But the Facebook counterpart lets you to view your computer’s file system from the tool so making file selection is easier. Plus it has some simple photo manipulation functionality like rotating the photos in place.

Flickr’s photo uploader

Facebook’s Photo Uploader

To choose which technology to use we have to look at pros and cons, which probably varies in individual situations. I’ll try to provide some key areas that I found useful to take into consideration when making the decision. Although I ended up choosing the Applet, the decision was largely based on the fact that I’m more familiar with Java and there is really no time for me to pick up Flash and go from there. For some, Flash might be a better choice.

Browser compatibility Plugin technology

Almost all the modern browsers today support Java and Flash. And there is no need to write different versions of application to deal with the browser issues. However, due to the fact that Java and Flash themselves are constantly being upgraded it is necessary to watch the code and make sure it is supported by different Java or Flash versions out there. I think when Adobe released Flash 10 there was some security implementation that broke a lot of Flash app. Sun has been very good on making the newer version of Java backward compatible. Although the newest Java technology is at version 1.6, it is backward compatible to 1.4 and 1.5, which pretty much covers all Java versions out there on user’s machines.

Both Java Applet and Flash requires the plugins to be installed so browsers can display them correctly. Sometimes they come with the browser installation by default. I don’t have any data but it seems both Java plugin and Adobe Flash plugin have good penetration on the popular browsers today (Firefox, IE etc.).

The slowness when loading Applet, at least the very first time.

Applet is slow to load because the browser has to start Java JVM first then start the Applet. A user’s machine may be hung for a few seconds to get over this. So if an applet is a beast and a user has a slow internet connection it won’t look to well. I would say this was a more serious problem a couple of years ago than now. Sun has been improving the Java browser plugin technology and the loading time has been much better with the modern browsers today. I noticed a significant difference between Firefox 3.5 and IE6 on the same machine, with FF beating IE hands down.

Flash, on the other hand feels much lighter, probably due to the fact that Flash is a smaller tool. But the smaller size also comes with limitations in terms of the application capabilities.

Nonetheless I’ll give Flash one point here.

Application capability

Since Applet is written in Java language it pretty much has everything that Java provides — minus those restricted by the security constraints of course. The rich GUI interface and user interactions and programming APIs are extensive. So it definitely has more capabilities than Flash can provide. Using the file uploader as an example, with Java I can develop GUI interface that user can only view and select multiple files from harddrive, but also drag and drop files to a certain destination, which is a pretty regular task on a desktop. With the rich image libraries available Applet can also have a lot more “pre-processing” power like reducing image size, rotating image to a certain orientation and converting images or adding watermarks, etc. Although it is debatable whether whether we should put this kind of the processing functionality on the client side, because it will most certainly make the client heavy to load and expensive to run, the capability is there. Choosing wisely, they are great additions to your web site.

Since Flash is lacking the capability on interacting with desktop things listed above are impossible to be implemented. So I give Applet a point here.

Code development and IDE

Java is a mature programming language and the development support reflects this. Learning the language aside, it is quite easy to set up a development environment and start coding. Flash on the other hand, has a smaller developer base and there is less information on the web that I can use to pick up this tool quickly. I might have a little bias here since I’m more familiar with Java. Flash to me, is a lot like a designer’s tools.

So I give my bias point to Java.

Available products

There are products already developed in both camps. Some of them are free and some of them require a fee. Nothing can beat free, but you get what you paid for. Especially for web apps, a nice demo is far from production. The paid product usually goes through better testing by the developer than Joe’s little free app.

I listed the ones that I found with good quality and support tracking record below.

- Applet

The free jUploader

The jUploader is developed by William JinHua Kwong and it can be downloaded from SourceForge. It seems to be actively maintained. The jar file for basic version is about 370k in size. I’m sure it can be reduced with Java bytecode obfuscator and shrinker software.

The app itself is quite good and documentation is sufficient. However the GUI interface is not as polished as the next candidate: JumpLoader.

JumpLoader – can be free, but will cost if you want the source

JumpLoader is developed by jmaster and it is the best I have seen so far. Depending on your requirement you can have a just simple file uploader or quite sophisticated pre-uploading image processor, you can see the demos here. The app itself it very customizable from the functionality to user interface. But it comes with a price. The “small” version is over 500k in size, which is still too large in my opinion.

- Flash

SWFUpload

This is the free Flash uploader that I like. And it looks similar to the one in Flickr. If you have the Flash development and don’t mind putting some work you might want to seriously consider this one.

Element-IT  MultiPowUpload

I didn’t download and try the product out myself. But based on the demo I like the features that MultiPowUpload provides. Notice that with the base code was under 100k in size. With some plugin, the Flash code is still in the 100k to 200k range.

Like I mentioned I generally prefer the paid version unless the software has enough open source developer support.

As web evolves the difference between a browser and a desktop application is less and less noticeable. Hopefully you find this post helpful to make a decision if you are in a similar situation. Also feel free to make a comment if I missed something here.