FGUpload: A Better Real Studio WebFileUploader
I recently purchased a new license for Real Studio Web Edition as I have an idea for a web app that I’ve been meaning to build for quite some time. The app in mind will require the uploading of multiple image files of various sizes to the server. Whilst mocking up the uploading interface with the excellent Balsamiq Mockups tool I thought I had better quickly explore the file uploading controls available in Web Edition. I was frankly horrified by the lack of functionality of the only file uploading control available to Web Edition – the WebFileUploader.
The native WebFileUploader has several limitations:
- Ugly UI. You are essentially stuck with a listbox with two buttons, “+” and”-”
- No events to inform of the live progress of uploads
- No information on file size
- No drag and drop support
- File sizes are limited as the entire file is written to the RAM of your server
Almost all of these limitations were show stoppers for my nascent project and I needed a workaround. Searching on the forums and through feedback reports revealed many other people with the same complaints but it seems that RS is aware of the limitations but can’t rectify things without changing the underlying HTTP framework.
I did some research and came across a Javascript plugin / library called Plupload which provides a framework for uploading files to a server using a combination of javascript and PHP. It uses several runtimes to achieve this and will gracefully look for whatever runtime is available on the browser (either Flash, Silverlight, Google Gears, HTML 5 or good old HTML 4).
After a lot of tinkering / reading and swearing, I have managed to get a nice working framework to incorporate Plupload into your web apps and I thought I’d share the code and steps required to do this. I call the framework – FGUpload.
Summary
Firstly, download the required files.
Within your web app, instead of the user clicking on a WebFileUploader control you present them with an appropriately sized WebHTMLViewer (I find using a modal dialog works well). The WebHTMLViewer points to a URL which contains Plupload. The user interacts with Plupload through the WebHTMLViewer (of course they don’t realise this, they think they are still within your web app) and upload the files they want. Once the upload is complete, Plupload redirects the user to a special URL which is handled by the App.HandleSpecialURL() event.
First of all, upload the entire contents of the [UPLOAD CONTENTS TO SERVER] folder to the server location of your choosing. Next, within the FGUpload Real Studio project, change the value of dlgUpload.UploadURL to the URL of the uploaded index.html file.
The URL that the WebHTMLViewer points to is the location of the Plupload installation (index.html within the included folder). Appended to this URL is a single parameter (id) containing the session identifier. For example, if the URL of your Plupload installation is www.example.com/upload.html and the session identifier is ABCDEF123, the WebHTMLViewer.URL property should be: www.example.com/upload.html?id=ABCDEF123.
You need to edit the index.html file within the download specifying the URL of your web app. Set the variable ‘webapp_url‘ to the URL of your web app (it’s near the top of the file). In the example, it’s set up for local debugging. Within index.html, there is a line that says: unique_names : false. By default, Plupload will leave the filename of uploads alone but you can set this to true to have it rename them to a unique name. The reason this is false by default is that I haven’t (yet) figured out a way to get the new name of the file.
Finally, you may want to edit the included upload.php file to specify the folder that uploaded files should be saved. The line to change is $targetdir = ‘uploads’;
When Plupload has completed uploading the selected files, it will redirect the WebHTMLViewer to webapp_url/special/upload and pass several parameters. The first parameter is id and this contains the ID of the session that called Plupload. Subsequent parameters are the names of the files uploaded. E.g: mywebapp.com/special/upload?id=ABCDEF123&name0=pic1.jpg&name1=anotherpic.png.
There’s a lot more that can be done by tinkering with this and this is far from a completely functional application but it should serve an illustrative purpose. Please let my know your thoughts in the comments.
