Experimenting with Plupload

Fun with the plupload

by manoj

HTML

<script src="https://rawgithub.com/moxiecode/plupload/master/js/plupload.full.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/foundation/4.1.6/css/foundation.css">
<h3>Custom example</h3>

<div id="container">
    <div id="filelist" class="panel">No runtime found.</div>
    <br />	<a id="pickfiles" href="#">[Select files]</a>
	<a id="uploadfiles" href="#">[Upload files]</a>

</div>

JavaScript

$(function () {
    var uploader = new plupload.Uploader({
        runtimes: 'html5,html4',
        browse_button: 'pickfiles',
        container: 'container',
        max_file_size: '1gb',
        multipart: false,
        url: '/echo/json/',
        chunks: {
            size: '1mb',
            send_chunk_number:true
        }
    });

    uploader.bind('Init', function (up, params) {
        $('#filelist').html("<div>Current runtime: " + params.runtime + "</div>");
    });

    $('#uploadfiles').click(function (e) {
        uploader.start();
        e.preventDefault();
    });

    uploader.init();

    uploader.bind('FilesAdded', function (up, files) {
        $.each(files, function (i, file) {
            $('#filelist').append(
                '<div id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b>' +
                '</div>');
        });

        up.refresh(); // Reposition Flash/Silverlight
    });
    
    uploader.bind('ChunkUploaded', function(u,f,r){
        //console.log(r);
    });

    uploader.bind('UploadProgress', function (up, file) {
        $('#' + file.id + " b").html(file.percent + "%");
        //console.log(up);
    });

    uploader.bind('Error', function (up, err) {
        $('#filelist').append("<div>Error: " + err.code +
            ", Message: " + err.message + (err.file ? ", File: " + err.file.name : "") +
            "</div>");

        up.refresh(); // Reposition Flash/Silverlight
    });

    uploader.bind('FileUploaded', function (up, file) {
        $('#' + file.id + " b").html("100%");
    });
});