Page Comparison

...

Section

Column

width	65%

Fluid's Uploader can be integrated into a learning content management system, such as ATutor. Files are uploaded for several purposes such as uploading images for teaching material, student-submitted assignments, and audio tutorial files. The integration of Fluid's Uploader improves the user experience by allowing for multiple file uploads along with the progress bar and pause/resume features. ATutor aims to integrate Fluid's Uploader into its File Manager and have it ready for its next release (ATutor 1.6.2).

Implementation

Fluid's Uploader script is called by the File Manager which is used in several places in ATutor, such as:

(logged in to an instructor account)

Manage -> File Manager

Content Editor -> File Manager
Manage -> Tests -> Edit -> File Manager

Starting from ATutor 1.6.2, the entire source code of the Fluid Package is installed under /jscripts/fluid-components in the ATutor installation directory. In previous releases, only files from /fluid-components/js were installed directly in /jscripts and did not include folders such as /css and /swfupload.

Initialization

When using the Fluid scripts, they need to be loaded and initialized in the header of the page. This is done by saving the necessary tags to the $_custom_head variable (in /tools/filemanager/index.php), which gets passed to /tools/filemanager/top.php to be written from the appropriate header include file. Most of the HTML code being used is borrowed from the sample-code provided by the Fluid Package in /sample-code/uploader/inline/uploader.html with changes made to paths and settings.

Code Block

$fluid_dir = 'jscripts/fluid-components/';
$current_path = AT_CONTENT_DIR.$_SESSION['course_id'].'/';
$pathext = urldecode($_GET['pathext']);
$_custom_head .= '
    <link href="'.$fluid_dir.'css/infusion-theme.css" rel="stylesheet" type="text/css" />
    <link href="'.$fluid_dir.'css/Uploader.css" rel="stylesheet" type="text/css" />

    <script src="'.$fluid_dir.'js/jquery/jquery-1.2.3.js" type="text/javascript"></script>
    <script src="'.$fluid_dir.'js/jquery/jquery.tabindex.js" type="text/javascript"></script>
    <script src="'.$fluid_dir.'js/jquery/jARIA.js" type="text/javascript"></script>
    <script src="'.$fluid_dir.'js/jquery/jquery.dimensions.js" type="text/javascript"></script>
    <script src="'.$fluid_dir.'js/jquery/ui.base.js" type="text/javascript"></script>
    <script src="'.$fluid_dir.'js/jquery/jquery.keyboard-a11y.js" type="text/javascript"></script>
    <script src="'.$fluid_dir.'js/swfupload/swfupload.js" type="text/javascript"></script>
    <script src="'.$fluid_dir.'js/fluid/Fluid.js" type="text/javascript"></script>
    <script src="'.$fluid_dir.'js/fluid/Uploader.js" type="text/javascript"></script>

    <script language="JavaScript" type="text/javascript">
       
        // set to empty to use demo upload js code instead actual server side upload handlers
        var uploadURL = "include/lib/upload.php?path='.urlencode($current_path.$pathext).'";  // relative to the swf file
        var flashURL = "jscripts/fluid-components/swfupload/swfupload_f9.swf";
       
        var settings =   {
            whenDone: "'.$_SERVER['PHP_SELF'].'?pathext=' . urlencode($pathext)
. SEP .                               .SEP.'popup=' . $popup . SEP . 'framed=' . $framed . SEP . 'msg=FILEUPLOAD_DONE",
            whenCancel: function(){},
            whenFileUploaded: function(fileName, serverResponse) {},
            continueAfterUpload: true,
            debug: false
        };
       
        var myUpload; // mostly used for testing
        $(document).ready(function() {
            myUpload = new fluid.Uploader("single-inline-fluid-uploader", uploadURL, flashURL, settings);
        });
    </script>

    <style type="text/css">
        .fluid-uploader {
            margin-top: 2em;
            padding: 1em 2em;
            display: block;
            clear: both;
        }
    </style>
';

The Uploader script also needs to call a file handler (/include/lib/upload.php) which handles files as necessary after they have been uploaded. This file handler is borrowed from the sample code provided in the Fluid Package (/sample-code/uploader.php) with a few alterations, namely the save path of the uploaded files:

Code Block
$save_path = urldecode($_GET['path']);

The url of the file uploader (relative to /jscripts/fluid-components/swfupload/swfupload_f9.swf) must be passed to the Uploader:

Code Block
var uploadURL = "include/lib/upload.php?path='.urlencode($current_path.$pathext).'";

For a more detailed reference of settings that can be configured for the Uploader, please refer to the Uploader API Wiki.

Display

After initializing the Fluid scripts, the Uploader gets displayed through /include/html/filemanager_display.inc.php. Most of the HTML code being used is borrowed from the sample-code provided by the Fluid Package in /sample-code/uploader/inline/uploader.html

Upon opening the File Manager, the Uploader itself is initially hidden in order to save space and keep the page simple. When needed, the user can click on the "Upload Files" button to display Fluid's Uploader interface.

From the Uploader, the "Cancel" button can be clicked to hide the interface and toggle back to the original view of the File Manager.

This toggle feature is a simple Javascript function defined in /include/html/filemanager.inc.php that gets called through the "onclick" attribute of the "Uploade Files" and "Cancel" button.

Code Block

function toggleform(id, link) {
    var obj = document.getElementById(id);
    var btn = document.getElementById(link);

    if (obj.style.display == "none") {
        //show object
        obj.style.display='';   
        obj.focus();
        //hide button
        btn.style.display = 'none';
    } else {
        //hide object
        obj.style.display='none';
        //show button
        btn.style.display = '';
    }
}

For information on the Uploader interface itself, please refer to the Uploader Wireframes Wiki.

Flash Detection

The current Uploader of the Fluid Package (v0.4beta1) partly relies on Flash for its interface. This poses a problem for an ATutor user who may not have Flash installed. Therefore, it is necessary to provide an alternative method for uploading files when Flash cannot be detected from the user's browser. The current implementation in ATutor does so by providing a simple single-file uploader.

Note that the Flash detection handler will most likely be improved at a later time. For now, the Flash detection takes place outside of the Fluid scripts in /include/vitals.inc.php . If a later version of the Fluid Package implements its own Flash detector and non-Flash script, the current implementation can be easily removed.

Code Block

if(isset($_COOKIE["flash"])) {
    $_SESSION['flash'] = $_COOKIE["flash"];

    //delete the cookie
    setcookie("flash",'',time()-3600);
}

if (!isset($_SESSION["flash"])) {
    $_custom_head .= '
        <script type="text/javascript">
        <!--
            //VB-Script for InternetExplorer
            function iExploreCheck()
            {
                document.writeln("<scr" + "ipt language=\'VBscript\'>");
                //document.writeln("\'Test to see if VBScripting works");
                document.writeln("detectableWithVB = False");
                document.writeln("If ScriptEngineMajorVersion >= 2 then");
                document.writeln("   detectableWithVB = True");
                document.writeln("End If");
                //document.writeln("\'This will check for the plugin");
                document.writeln("Function detectActiveXControl(activeXControlName)");
                document.writeln("   on error resume next");
                document.writeln("   detectActiveXControl = False");
                document.writeln("   If detectableWithVB Then");
                document.writeln("      detectActiveXControl = IsObject(CreateObject(activeXControlName))");
                document.writeln("   End If");
                document.writeln("End Function");
                document.writeln("</scr" + "ipt>");
                return detectActiveXControl("ShockwaveFlash.ShockwaveFlash.1");
            }

            var plugin = (navigator.mimeTypes && navigator.mimeTypes["application/x-shockwave-flash"]) ?
                               navigator.mimeTypes["application/x-shockwave-flash"].enabledPlugin : false;
            if(!(plugin) && (navigator.userAgent && navigator.userAgent.indexOf("MSIE")>=0
                            && (navigator.appVersion.indexOf("Win") != -1))) {
                if (iExploreCheck()) {
                    flash_detect = "flash=yes";
                } else {
                    flash_detect = "flash=no";
                }
            } else if(plugin) {
                flash_detect = "flash=yes";
            } else {
                flash_detect = "flash=no";
            }

            writeCookie(flash_detect);

            function writeCookie(value)
            {
                var today = new Date();
                var the_date = new Date("December 31, 2099");
                var the_cookie_date = the_date.toGMTString();
                var the_cookie = value + ";expires=" + the_cookie_date;
                document.cookie = the_cookie;
            }
        //-->
        </script>
';
}

In the current implementation, a Flash detection script gets inserted into the header when a user initially accesses any page on ATutor. The script returns a value of "yes" or "no", which gets saved in a cookie ($_COOKIE["flash"]) then sent to the server to be saved as a session variable ($_SESSION['flash']). Once the session variable is set, the cookie is removed and the Flash detection script no longer gets called for the remainder of the session. When accessing the filemanager, the php script (/include/html/filemanager_display.inc.php) generates the appropriate uploader depending on the value of the variable.

Code Block
if (isset($_SESSION['flash']) && $_SESSION['flash'] == "yes") { /* Display Fluid Uploader / } else { / Display non-Flash single file uploader */ }

Demo

A working demo of the current Fluid Uploader integrated into ATutor is available at:

http://www.atutor.ca/atutor/fluidtest/
login: fluid
password: fluid

Column

width	35%

Panel

borderColor	#566b30
bgColor	#fff
titleBGColor	#D3E3C4
title	On this Page
borderStyle	solid

Table of Contents

minlevel	2

Screenshots

...

Versions Compared

Old Version 29

New Version 30

Key

Implementation

Initialization

Display

Flash Detection

Demo

Screenshots