Upgrading Uploader to 1.3

Before upgrading the Uploader from Infusion 1.2 or earlier, please refer to the Uploader API documentation and the latest example code. The Fluid Uploader was extensively refactored in the 1.3 release with the introduction of HTML 5 support. The API is expected to fully stabilize to a production level after Infusion 1.4.

Backward Compatibility

Uploader includes automatic backwards compatibility for Infusion 1.2-era options, which can be enabled simply by including the UploaderCompatibility-Infusion1.2.js file your page. If you're not using a custom build of Infusion, you will also need to include the framework's ModelTransformations.js file.

API changes

options

If you do wish to update your code to use the new 1.3-era options, use the following guidelines.

Flash Support

The Uploader now includes support for HTML 5. If you wish to continue to use Flash, you'll likely need to change the following options:

If you used...

You'll now use...

var opts = {
    uploadManager: {
        type: "fluid.swfUploadManager"
        options: {
            flashUrl: <custom URL to Flash>
            <other swfUploadManager options>
        }
    },
    decorators: [{
        type: "fluid.swfUploadSetupDecorator"
        options: {
            flashButtonPeerId: <peer Id>,
            flashButtonAlwaysVisible: <visibility flag>,
            flashButtonTransparentEvenInIE: <transparency flag,
            flashButtonImageURL: <image URL>,
            flashButtonCursorEffect: <cursor effect>,
            debug: <debug flag>
        }
    }],
};

var opts = {
    strategy: {
        type: "fluid.uploader.progressiveStrategy",
        options: {
            flashMovieSettings: {
                flashUrl:  <custom URL to Flash>,
                flashButtonPeerId: <peer Id>,
                flashButtonAlwaysVisible: <visibility flag>,
                flashButtonTransparentEvenInIE: <transparency flag,
                flashButtonImageURL: <image URL>,
                flashButtonCursorEffect: <cursor effect>,
                debug: <debug flag>
            }
        }
    },
    queueSettings: {
        <other swfUploadManager options>
    }
};

Other options remain the same.

On this Page

Dependencies

The Uploader now depends on several of the new Framework files as well as new files specific to the component itself.

Old Dependencies

<!-- Fluid and jQuery Dependencies -->
<script type="text/javascript" src="lib/jquery/core/js/jquery.js"></script>
<script type="text/javascript" src="lib/jquery/ui/js/jquery.ui.core.js"></script>
<script type="text/javascript" src="framework/core/js/jquery.keyboard-a11y.js"></script>
<script type="text/javascript" src="lib/swfobject/js/swfobject.js"></script>
<script type="text/javascript" src="lib/swfupload/js/swfupload.js"></script>
<script type="text/javascript" src="framework/core/js/Fluid.js"></script>
<script type="text/javascript" src="framework/core/js/ProgressiveEnhancement.js"></script>

<!-- Uploader dependencies -->
<script type="text/javascript" src="components/uploader/js/FileQueue.js"></script>
<script type="text/javascript" src="components/uploader/js/DemoUploadManager.js"></script>
<script type="text/javascript" src="components/uploader/js/SWFUploadManager.js"></script>
<script type="text/javascript" src="components/uploader/js/Scroller.js"></script>
<script type="text/javascript" src="components/progress/js/Progress.js"></script>
<script type="text/javascript" src="components/uploader/js/Uploader.js"></script>

New Dependencies

<!-- Fluid and jQuery Dependencies -->
<script type="text/javascript" src="lib/jquery/core/js/jquery.js"></script>
<script type="text/javascript" src="lib/jquery/ui/js/jquery.ui.core.js"></script>
<script type="text/javascript" src="framework/core/js/jquery.keyboard-a11y.js"></script>
<script type="text/javascript" src="lib/swfobject/js/swfobject.js"></script>
<script type="text/javascript" src="lib/swfupload/js/swfupload.js"></script>
<script type="text/javascript" src="framework/core/js/Fluid.js"></script>
<script type="text/javascript" src="framework/core/js/FluidDocument.js"></script>
<script type="text/javascript" src="framework/core/js/FluidView.js"></script>
<script type="text/javascript" src="framework/core/js/DataBinding.js"></script>
<script type="text/javascript" src="framework/core/js/FluidIoC.js"></script>
<script type="text/javascript" src="framework/enhancement/js/ProgressiveEnhancement.js"></script>

<!-- Uploader dependencies -->
<script type="text/javascript" src="components/uploader/js/Uploader.js"></script>
<script type="text/javascript" src="components/uploader/js/FileQueue.js"></script>
<script type="text/javascript" src="components/uploader/js/Scroller.js"></script>
<script type="text/javascript" src="components/progress/js/Progress.js"></script>
<script type="text/javascript" src="components/uploader/js/FileQueueView.js"></script>
<script type="text/javascript" src="components/uploader/js/FlashUploaderSupport.js"></script>
<script type="text/javascript" src="components/uploader/js/Flash9UploaderSupport.js"></script>
<script type="text/javascript" src="components/uploader/js/HTML5UploaderSupport.js"></script>
<script type="text/javascript" src="components/uploader/js/DemoUploadManager.js"></script>