FancyUpload

<script type="text/javascript" src="js/mootools-1.2.1-core.js"></script>
<script type="text/javascript" src="js/Swiff.Uploader.js"></script>
<script type="text/javascript" src="js/Fx.ProgressBar.js"></script>
<script type="text/javascript" src="js/FancyUpload2.js"></script>
 <script type="text/javascript">
 /* <![CDATA[ */

window.addEvent('load', function() {

    // For testing, showing the user the current Flash version.
  // document.getElement('h3 + p').appendText(' Detected Flash ' + Browser.Plugins.Flash.version + '!');

    var swiffy = new FancyUpload2($('demo-status'), $('demo-list'), {
        url: $('form-demo').action,
        fieldName: 'photoupload',
        path: 'js/Swiff.Uploader.swf',
        limitSize: 2 * 1024 * 1024, // 2Mb
        onLoad: function() {
            $('demo-status').removeClass('hide');
            $('demo-fallback').destroy();
        },
        // The changed parts!
        debug: true, // enable logs, uses console.log
        target: 'demo-browse' // the element for the overlay (Flash 10 only)
    });

    /**
     * Various interactions
     */

    $('demo-browse').addEvent('click', function() {
        /**
         * Doesn't work anymore with Flash 10: swiffy.browse();
         * FancyUpload moves the Flash movie as overlay over the link.
         * (see opeion "target" above)
         */
        swiffy.browse();
        return false;
    });

    /**
     * The *NEW* way to set the typeFilter, since Flash 10 does not call
     * swiffy.browse(), we need to change the type manually before the browse-click.
     */
    $('demo-select-images').addEvent('change', function() {
        var filter = null;
        if (this.checked) {
            filter = {'Images (*.jpg, *.jpeg, *.gif, *.png)': '*.jpg; *.jpeg; *.gif; *.png'};
        }
        swiffy.options.typeFilter = filter;
    });

    $('demo-clear').addEvent('click', function() {
        swiffy.removeFile();
        return false;
    });

    $('demo-upload').addEvent('click', function() {
        swiffy.upload();
        return false;
    });

});
/* ]]> */

    </script>
</head>
<form action="/project/fancyupload/2-0/showcase/photoqueue/script.php" method="post" enctype="multipart/form-data" id="form-demo">
    <fieldset id="demo-fallback">
        <legend>File Upload</legend>
        <p>
            Selected your photo to upload.<br />
            <strong>This form is just an example fallback for the unobtrusive behaviour of FancyUpload.</strong>
        </p>
        <label for="demo-photoupload">
            Upload Photos:
            <input type="file" name="photoupload" id="demo-photoupload" />
        </label>
    </fieldset>

    <div id="demo-status" class="hide">
        <p>
            <a href="#" id="demo-browse">Browse Files</a> |
            <input type="checkbox" id="demo-select-images" /> Images Only |
            <a href="#" id="demo-clear">Clear List</a> |
            <a href="#" id="demo-upload">Upload</a>
        </p>
        <div>
            <strong class="overall-title">Overall progress</strong><br />
            <img src="../../assets/progress-bar/bar.gif" class="progress overall-progress" />
        </div>
        <div>
            <strong class="current-title">File Progress</strong><br />
            <img src="../../assets/progress-bar/bar.gif" class="progress current-progress" />
        </div>
        <div class="current-text"></div>
    </div>

    <ul id="demo-list"></ul>

</form>

    <script type="text/javascript" src="mootools-trunk.js"></script>
    <script type="text/javascript" src="Swiff.Uploader.js"></script>
    <script type="text/javascript" src="Fx.ProgressBar.js"></script>
    <script type="text/javascript" src="FancyUpload2.js"></script>

    <script type="text/javascript">
        /* <![CDATA[ */

window.addEvent('load', function() {

    var swiffy = new FancyUpload2($('demo-status'), $('demo-list'), {
        'url': $('form-demo').action,
        'fieldName': 'photoupload',
        'path': 'Swiff.Uploader.swf',
        'onLoad': function() {
            $('demo-status').removeClass('hide');
            $('demo-fallback').destroy();
        }
    });

    /**
     * Various interactions
     */

    $('demo-browse-images').addEvent('click', function() {
        swiffy.browse({'Images (*.jpg, *.jpeg, *.gif, *.png)': '*.jpg; *.jpeg; *.gif; *.png'});
        return false;
    });

    $('demo-clear').addEvent('click', function() {
        swiffy.removeFile();
        return false;
    });

    $('demo-upload').addEvent('click', function() {
        swiffy.upload();
        return false;
    });

});
        /* ]]> */
    </script>




<form action="script.php?map=<?php echo $_GET['map']; ?>" method="post" enctype="multipart/form-data" id="form-demo">
    <div id="demo-status" class="hide">
        <p>
            <a href="#" id="demo-browse-images">Foto's Selecteren</a> |
            <a href="#" id="demo-clear">Lijst Schoonmaken</a> |
            <a href="#" id="demo-upload">Uploaden</a>
        </p>
        <div>
            <strong class="overall-title">Vooruitgang van uploaden de bestanden:</strong><br />
            <img src="bar.gif" class="progress overall-progress" />
        </div>
        <div>
            <strong class="current-title">Bestands Vooruitgang:</strong><br />
            <img src="bar.gif" class="progress current-progress" />
        </div>
        <div class="current-text"></div>
    </div>
 
    <ul id="demo-list"></ul>
 
</form>