1 (edited by wxzhuo 2010-04-16 03:43:00)

Topic: Mootools Quickstart

First off, thanks for plupload, good stuff. Noticed that all the documentations and examples are in JQuery. So, here's the example that should get all Mootoolers out there started. I've literally translated the example from JQuery to Mootools, so you don't have to do the dirty work...

<script type="text/javascript" src="js/mootools124core.js"></script>
<script type="text/javascript" src="js/plupload.min.js"></script>
<script type="text/javascript" src="js/plupload.html5.min.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
    // (0) CREATE PLUPLOADER OBJECT
    var uploader = new plupload.Uploader({
        runtimes : 'html5',
        browse_button : 'pickFiles',
        container : 'container',
        drop_element : 'dropList',
        url : 'upload.php',
        max_file_size : '10mb',
        unique_names : true,
        chunk_size : '1mb'
    });

    // (1) INIT ACTIONS
    uploader.bind('Init', function(up, params){
        // FORCEFULLY NUKE GRACEFUL DEGRADING FALLBACK ON INIT
        $('fallback').destroy();
        $('container').removeClass("hidden");
    });

    // (2) ON FILES ADDED ACTION
    uploader.bind('FilesAdded', function(up, files){
        files.each(function(file, idx){
            $('dropList').adopt(
                new Element('div', {
                    id: file.id,
                    html: "Name : " + file.name + " Size : " + file.size + "<span id='progress" + file.id + "'></span>"
                })
            );
        });
    });

    // (3) ON FILE UPLOAD PROGRESS ACTION
    uploader.bind('UploadProgress', function(up, file){
        $('progress'+file.id).set("html", file.percent + "%");
    });

    // (4) UPLOAD FILES FIRE STARTER
    $('uploadFiles').addEvent('click', function(e){
        e.stop();
        uploader.start();
    });

    // (5) KICK-START PLUPLOAD
    uploader.init();
});
</script>

<!-- UPLOAD CONTAINER -->
<div id="container" class="hidden">
    Drop files below :
    <div id="dropList"></div>
    <br />
    <a id="pickFiles" href="#">[Select files]</a>
    <a id="uploadFiles" href="#">[Upload files]</a>
</div>

<!-- FALLBACK; SHOULD LOADING OF PLUPLOAD FAILS -->
<div id="fallback">
    Opps. Still on dinosaur technology? Time to update.<br />
    Place old school upload form here.
</div>

<style type="text/css">
.hidden{ display:none; }
#dropList{ background:#aaa; width:500px; height:500px; }
</style>

Re: Mootools Quickstart

Thanks, ill put this in sticky for a while.

Re: Mootools Quickstart

Did anyone actually get this to work? I'm trying the code above (with slight modification in "runtimes : 'flash'" and "flash_swf_url : 'plupload/plupload.flash.swf'") and it doesn't do anything - there's no errors, but the page stays on fallback.

Re: Mootools Quickstart

Nice stuff. I haven't applied these codes yet. I hope it will work successfully.

Re: Mootools Quickstart

I'm also working on it.

It seems there is a bug for the flash runtime with the code above.
The Init method would not fire, perhaps because the container is hidden (so the fallback is visible even if the plupload is working).

Re: Mootools Quickstart

When element is hidden flash runtime wouldn't work. That's not a bug of runtime, it's rather a security feature of the flash smile

If you want to see your issue fixed, do not report it here, do it on - GitHub.

Re: Mootools Quickstart

How to solve if not working in the JQUERY?

Re: Mootools Quickstart

Thanks, I am going to try it right now. Really hope it works. smile

Re: Mootools Quickstart

Great, Thank you. I hope it works!

Re: Mootools Quickstart

I think this topic really needs an update smile Anyone willing to do it with enough mootools knowledge?

If you want to see your issue fixed, do not report it here, do it on - GitHub.

Re: Mootools Quickstart

Nice stuff. I haven't applied these codes yet. I hope it will work successfully.

Thank you very much