Skip to main content

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.

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
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.

Popular posts from this blog

The iPhora Journey - Part 8 - Flow-based Programming

After my last post in this series -- way back in September 2022, several things happened that prevented any further installments. First came CollabSphere 2022 and then CollabSphere 2023, and organizing international conferences can easily consume all of one's spare time. Throughout this same time period, our product development efforts continued at full speed and are just now coming to fruition, which means it is finally time to continue our blog series. So let's get started... As developers, most of us create applications through the conscious act of programming, either procedural, as many of us old-timers grew up with, or object-oriented, which we grudgingly had to admit was better. This is true whether we are using Java, LotusScript, C++ or Rust on Domino. (By the way, does anyone remember Pascal? When I was in school, I remember being told it was the language of the future, but for some reason it didn't seem to survive past the MTV era).  But in the last decade, there a...

Creating Twitter Bootstrap Widgets - Part II - Let's Assemble

Creating Twitter Bootstrap Widgets - Part I - Anatomy of a Widget Creating Twitter Bootstrap Widgets - Part II - Let's Assemble Creating Twitter Bootstrap Widgets - Part IIIA - Using Dojo To Bring It Together This is two part of my five part series "Creating Twitter Bootstrap Widgets".   As I mentioned in part one of this series, Twitter Bootstrap widgets are built from a collection standard HTML elements, styled, and programmed to function as a single unit. The goal of this series is to teach you how to create a Bootstrap widget that utilizes the Bootstrap CSS and Dojo. The use of Dojo with Bootstrap is very limited with the exception of Kevin Armstrong who did an incredible job with his Dojo Bootstrap, http://dojobootstrap.com. Our example is a combo box that we are building to replace the standard Bootstrap combo box. In part one, we built a widget that looks like a combo box but did not have a drop down menu associated with it to allow the user to make a select...

The iPhora Journey - Part 3 - Creating an Integrated UI Framework

The iPhora Journey - Part 1 - Reimagining Domino The iPhora Journey - Part 2 - Domino, the Little Engine that Could The iPhora Journey - Part 3 - Creating an Integrated UI Framework There are many ways to create the user interface (UI) for a web application. The HTML page could be created on the server and then pushed out. It could be static with the data generated on the page by the server with JavaScript, providing a more dynamic experience, or the server could generate new HTML content to update portions of the web page. XPages or PHP are good examples of this. Another method is to have the web page partially generated by the server and have JavaScript build the rest of the HTML by pulling data from the server via an API. This is the approach used in the Single Page Application (SPA) model. In all cases, it is still dependent on the web server technology being using.  As mentioned previously in this blog, XPages is dependent on complete integration between form and document, whi...