FileCatalyst Applets: Persisting File Transfers Across Site

posted in: Applets

Overview

The FileCatalyst JavaScript API offers the ability to implement an accelerated file transfer application from within a web browser. Using the API, you are able to customize the end-user’s file transfer experience, integrating the file transfer into your site (in terms of both functionality and UI) in a way not necessarily possible with the default configuration alone.

However, there is a trade-off when compared to using a browser plug-in. Java Applets live within a browser document, and therefore when a page is destroyed (closing a tab, navigating to a different page), the applet is destroyed as well. No applet, no file transfer. But there is a way to have your cake and eat it, too!

The Quick Version

The short answer is this: do not destroy the document entirely. Load the applet in a non-destroyed portion and do whatever you want with the rest.

The Longer Version: Upload Panel Example

In your FileCatalyst Applet archive, you will find a sample page called ajax_sample.html and a related subfolder called ajax_sample which will contain related resources.

Stripping away other ornamentation and required elements, the most important chunk of HTML simply looks like this:



...

One of the navigation elements comes “preselected” by identifying it with the class current. Then there’s an empty div called content which will be the ONLY element that gets further manipulated. The applet lives in its own div elsewhere on the page.

Navigation is handled by listening for clicks on the navigation item, getting their HREF value, and flying the content in via Ajax. The clicked item also has the class current applied to it. A few scoped variables and utility methods are omitted from the below, but the full code is available in the applet download package:

  $('#navigation ul').delegate('li', 'click', function(e) {
    placeholder = $(this);
    if ( !(placeholder.hasClass('current')) ) {
      /* update the navigation classes to show new page highlighted */
      fcapp.current.toggleClass('current');
      placeholder.toggleClass('current');
      fcapp.current = placeholder;

      /* load new page content using our Ajax fetching function*/
      fcapp.loader();
    }
  })

// ...

fcapp.loader = function() {
  fcapp.currentHTML = fcapp.current.find('a').attr('href');
  fcapp.contentArea.load(fcapp.currentHTML, function(){
    // Bind button actions only if you are on "uploads.html" page as defined in the demo.
    // Change appropriately if building on this example.
    if(fcapp.currentHTML.indexOf('uploads.html') != 0 )  {
      fcapp.bindUploadClicks()
    }
    
  });
}

To reiterate: navigation is updated, new content is flown in, but the applet is untouched!

Conclusion

Accelerated File Transfer from within a browser that persists across your entire site or application IS possible! The solution is ideal when beginning development so that you can design the site to be Ajax’d from the ground up. But many sites can be retrofitted for Ajax’d content, and even WordPress (which uses a more traditional PHP method) can be modified via custom code or plugins to use Ajax. Worst-case scenario, you might need to create the applet in its own “File Transfer Tab” document.