Tuesday, October 26, 2010

Using Dojo to Create a Domino File Upload Control

I having been doing research for the past couple of months on how I can create an file uploader control for my UX Pages Project which now has involved to become the iPhora Application Designer. Again Jake Howlett's Codestore.net and a couple of other blogs were great starting points. There was four different ways I could create a Domino file uploader:

- Embedding a traditional file upload control into a Domino form
- Creating a separate HTML form and referencing in the name of the Domino FUC on a traditional Domino form
- Using XPages and create a FUC
- Set DominoDisableFileUploadChecks=1 in the Notes.ini file and create a HTML Form that does a ?createdocument on a traditional Domino form (that I learned from Jake Howlett's blog)

All these techniques will work in creating a Domino File Uploader control. However, each of these techniques have limitations that I do not like. Since I am a strong believer of the total separation of form and data the use of traditional Domino FUC and XPages is totally out. The setting of the notes.ini file leaves a big security hole on the Domino server. Therefore, the creation of a separate HTML form which we do in UX Pages and referencing the name of the Domino FUC on a traditional Domino form was the closes option for me. However, since Domino 6 the name of the Domino FUC consist of %%File.DBRepID.FormID.$Body.0.??? that is unique. There is no guarantee that the name will not change. If you copy the database to another server, the name will change. I was frustrated with the whole thing and drop the whole concept a month ago. As I was listening to music, I suddenly realize the solution was extremely simple and with Dojo it is even simpler. It can be done without Dojo using traditional Ajax, but Dojo makes it so more flexible.

I needed a way to get the name of the Domino FUC on the traditional Domino form. I assume that it will be dynamic and unknown to the separate HTML Form. First assume the name of the traditional Domino form with the FUC in this case is called "fileuploader". If you look at the source of the form when you display it in a web browser you can locate and grab the FUC name and put it in your HTML form. However, I guarantee if will change if you copy the database.

Instead, I use the Dojo xhrPost or xhrGet HTTP service call, handle as text, to get the html of the form "fileuploader".



The data is now only text. Next I parse out the name of FUC and create the FUC using Javascript and place the location of the FUC into any location I want in the form. The StrLeft and StrRight are Javascript functions that does the same functionality as the Lotusscript StrLeft and StrRight.

During the dojo.addOnLoad() you can run the code to generate the FUC using Javascript onto the HTML form using dojo.byId().innerHTML based on the FUC name that you have parsed.

Now regardless of where the database is moved to the separate HTML form with your FUC will always reference the Domino FUC on the Domino form. I believe this technique will also work with a Adobe Flex upload control. Since we are using Dojo this technique works in both IE and Firefox.

I will be presenting at the virtual LTAP 2010 conference this week and I will demonstrates this technique as part of my presentation. So if you get a chance attend my session.

2 comments:

Mark Leusink said...

Hi Richard,

I've used the method of first retrieving a valid file upload control name in a demo application to do file uploads using a Flash based uploader. See this blog entry for details. The method works good, but a disadvantage is that you need to be able to set the name by which the filedata is sent to the server.

Recently I also found a way to POST files to an XPage directly and process them in the beforeRenderResponse event. That way, the name of the file upload control isn't relevant anymore and it makes uploading much easier.

I'm currently finishing a rewrite of my original demo app that is completely build using XPages and also features a demo of a HTML5 based uploader that includes drag-n-drop support.

Regards,
Mark

Richard Moy said...

Mark,

I took a look at your blog and I am impressed with the Flash based uploader. In regards to getting and setting the name of the file, you should be able to do that using dojo.connect to the onSubmit. I will enchance the demo to include that. I have not had a chance to look at your XPages code that you published, but it looks good.