HTML Large File Uploader

Summary

The HTML Large file uploader is an applet-based replacement for the normal HTML file input type to address its various shortcomings.

Background

One problem that web developers often run into is the limited file sizes that can be uploaded through HTTP.

Typically there are a number of different server configurations options that need to be tweaked to convince your environment to let you upload files larger than a few MB. Unfortunately, most of these settings are quite sensible by default and should not be modified.

Another disadvantage is that the user is given little feedback on the progress of their upload when using HTTP. The page just sort of sits there and “hangs” while the file is uploaded as part of the process of requesting the next page for the user. This can lead to frustration and a poor user experience.

Java Applets have been a part of the web for years, and thanks to a rich API with decent TCP/IP support we can create a nice little FTP client. There are a number of FTP applet clients out there, however most of them try to be an entire FTP client with functionality similar to what you would find on a non-web based client.

The HTML Large File Uploader aims to be a simple replacement for the HTML file input type. You can configure where the file is to end up with some simple parameters and the user gets feedback on the progress of the file upload so they are not sitting there waiting.

View a demo.

A Word on Signed Applets

In order for the applet to be able to access files on your computer to upload, the applet needs to be signed with a digital certificate and the user needs to accept this certificate at runtime. Essentially, this allows the applet to run with full privileges, as if it were just another application on your computer.

The compiled JAR release has been signed with a “Demo” certificate. It is recommended that you download the source release, compile it and sign it with your own certificate before using it. I have included a batch file to help with the generating of a certificate and signing, just open it up in notepad and review before running it. Should be a similar deal for the linux et al users.

Download:

Usage:

Before you start:

Remember that FTP is an insecure protocol and your password will be easily available to anyone who has access to your system.

To use this uploader applet correctly you should create a public FTP account to upload to and then move the file when the form is submitted. Do not use your normal hosting FTP account as the login details will be easily viewable by reading the source code of the page.
Write your form as normal.
JVM detection code:

Of course, it’s no good if the user does not have the correct java virtual machine installed. To prevent them seeing a useless form, we have to do some trickery to determine if they have the required JVM.

Add this code into your <head> or add it to an external .js file and link it in:
<script type="text/javascript"> /** * check to see if the JVM supports the file uploader... */ function isValidJVM() { var checker = document.getElementById("checker"); return (checker.getVersion != null && checker.getVendor != null && checker.getVendor().indexOf("Sun") > -1 && checker.getVersion().substr(0,3) == "1.5") } /** * check to see if the file has been uploaded... */ function checkFileUploaded() { var uploader = document.getElementById("uploader"); if (!uploader.hasUploaded()) { alert("Please upload the file before submitting the form"); return false; } else { return true; } } </script>
Then put the detector applet somewhere in the body of the HTML document (preferably before the form).
<applet code="Checker.class" width="0" height="0" id="checker"></applet>
Replace your <input type="file" ... > field with the following:
<div id="error"> Please download and enable the latest java runtime environment from www.java.com </div> <script type="text/javascript"> // if we have a valid virtual machine, we print out the code for the applet... if (isValidJVM()) { document.write('<applet code="Uploader.class" archive="Uploader.jar,Net.jar" width="430" height="29" id="uploader">'); document.write(' <param name="address" value="192.168.0.1" />'); document.write(' <param name="username" value="username" />'); document.write(' <param name="password" value="password" />'); document.write(' <param name="uploadedFileName" value="/home/rjohnson/abc123" />'); document.write(' <param name="backgroundColor" value="#FFFFFF" />'); document.write(' <param name="foregroundColor" value="#000000" />'); document.write('</applet>'); document.getElementById("error").style.display = "none"; } </script>
This script checks to see if the user has the required JVM and if it does, it prints out the required HTML to run the applet.
Modify the parameters in the javascript to suit your environment:

address – the hostname or IP address of your server

username – the FTP username to use

password – the FTP password to use

uploadedFileName – the file name to upload to, note existing files are overwritten.

backgroundColor – The background colour of the applet to fit in with your website

foregroundColor – The text colour of the applet to fit in with your website
Add validation to the form to ensure the file has been uploaded before the user can submit the form:

You can do this by adding the following onsubmit action handler to your form tag (or modify your existing validation to include it):
<form action="" method="get" onsubmit="return checkFileUploaded();">
Modify your script to use the ftp uploaded file rather than any files uploaded through HTTP.
Test
Done!

Known Problems:

JVM detection and form submission causes Firefox to pause for a few seconds. This is due to the way java and javascript communicate on Firefox and cannot be helped

To Do:

It is possible to have the file start uploading and then submit the form automatically once finished when the submit button is pressed, rather than have 2 buttons in the applet. Look out for this in future releases.

Thanks to the Apache group for writing the FTP client libraries that made writing this applet rather straight forward.