Functional Example?

[mgeorgy]

Any chance you can point me at the functional example using this module?

Thanks.

[ryanolson]

I haven't really worked on this in a while. I'm not sure I'll be able to do much in the next few weeks. I'll add it on my calendar to look at in November.

[mgeorgy]

Thanks Ryan. I think I've managed to get it working. Only question (related to plupload) is how would I force a page refresh after an upload has succeeded? My web page that contains the plupload panel also lists the files uploaded -- which would only be visible after a page refresh.

On 10/3/14 7:06 PM, Ryan Olson wrote:

I haven't really worked on this in a while. I'm not sure I'll be able to do much in the next few weeks. I'll add it on my calendar to look at in November.

— Reply to this email directly or view it on GitHub https://github.com/ryanolson/flask-plupload/issues/1#issuecomment-57876711.

[ryanolson]

Use Plupload's Javascript API, here is a good example: http://www.plupload.com/examples/events

For reference, I copied and pasted the source below. You can refresh your UI any of the events, in particular, you can use the FileUploaded event.

FileUploaded: function(up, file, info) {
    // Called when file has finished uploading
    log('[FileUploaded] File:', file, "Info:", info);
},

<link href="http://rawgithub.com/moxiecode/plupload/master/js/jquery.plupload.queue/css/jquery.plupload.queue.css" type="text/css" rel="stylesheet" media="screen">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js" type="text/javascript"></script>
<script src="http://rawgithub.com/moxiecode/plupload/master/js/plupload.full.min.js" type="text/javascript"></script>
<script src="http://rawgithub.com/moxiecode/plupload/master/js/jquery.plupload.queue/jquery.plupload.queue.min.js" type="text/javascript"></script>

<div id="uploader">
    <p>Your browser doesn't have Flash, Silverlight or HTML5 support.</p>
</div>

<script type="text/javascript">
// Convert divs to queue widgets when the DOM is ready
$(function() {

    $("#uploader").pluploadQueue({
        // General settings
        runtimes : 'html5,flash,silverlight,html4',
        url : '/examples/upload',
        chunk_size : '1mb',
        unique_names : true,

        // Resize images on client-side if we can
        resize : {width : 320, height : 240, quality : 90},

        filters : {
            max_file_size : '10mb',

            // Specify what files to browse for
            mime_types: [
                {title : "Image files", extensions : "jpg,gif,png"},
                {title : "Zip files", extensions : "zip"}
            ]
        },

        // Flash settings
        flash_swf_url : '/plupload/js/Moxie.swf',

        // Silverlight settings
        silverlight_xap_url : '/plupload/js/Moxie.xap',

        // PreInit events, bound before any internal events
        preinit : {
            Init: function(up, info) {
                log('[Init]', 'Info:', info, 'Features:', up.features);
            },

            UploadFile: function(up, file) {
                log('[UploadFile]', file);

                // You can override settings before the file is uploaded
                // up.setOption('url', 'upload.php?id=' + file.id);
                // up.setOption('multipart_params', {param1 : 'value1', param2 : 'value2'});
            }
        },

        // Post init events, bound after the internal events
        init : {
            PostInit: function() {
                // Called after initialization is finished and internal event handlers bound
                log('[PostInit]');

                document.getElementById('uploadfiles').onclick = function() {
                    uploader.start();
                    return false;
                };
            },

            Browse: function(up) {
                // Called when file picker is clicked
                log('[Browse]');
            },

            Refresh: function(up) {
                // Called when the position or dimensions of the picker change
                log('[Refresh]');
            },

            StateChanged: function(up) {
                // Called when the state of the queue is changed
                log('[StateChanged]', up.state == plupload.STARTED ? "STARTED" : "STOPPED");
            },

            QueueChanged: function(up) {
                // Called when queue is changed by adding or removing files
                log('[QueueChanged]');
            },

            OptionChanged: function(up, name, value, oldValue) {
                // Called when one of the configuration options is changed
                log('[OptionChanged]', 'Option Name: ', name, 'Value: ', value, 'Old Value: ', oldValue);
            },

            BeforeUpload: function(up, file) {
                // Called right before the upload for a given file starts, can be used to cancel it if required
                log('[BeforeUpload]', 'File: ', file);
            },

            UploadProgress: function(up, file) {
                // Called while file is being uploaded
                log('[UploadProgress]', 'File:', file, "Total:", up.total);
            },

            FileFiltered: function(up, file) {
                // Called when file successfully files all the filters
                log('[FileFiltered]', 'File:', file);
            },

            FilesAdded: function(up, files) {
                // Called when files are added to queue
                log('[FilesAdded]');

                plupload.each(files, function(file) {
                    log('  File:', file);
                });
            },

            FilesRemoved: function(up, files) {
                // Called when files are removed from queue
                log('[FilesRemoved]');

                plupload.each(files, function(file) {
                    log('  File:', file);
                });
            },

            FileUploaded: function(up, file, info) {
                // Called when file has finished uploading
                log('[FileUploaded] File:', file, "Info:", info);
            },

            ChunkUploaded: function(up, file, info) {
                // Called when file chunk has finished uploading
                log('[ChunkUploaded] File:', file, "Info:", info);
            },

            UploadComplete: function(up, files) {
                // Called when all files are either uploaded or failed
                log('[UploadComplete]');
            },

            Destroy: function(up) {
                // Called when uploader is destroyed
                log('[Destroy] ');
            },

            Error: function(up, args) {
                // Called when error occurs
                log('[Error] ', args);
            }
        }
    });

    function log() {
        var str = "";

        plupload.each(arguments, function(arg) {
            var row = "";

            if (typeof(arg) != "string") {
                plupload.each(arg, function(value, key) {
                    // Convert items in File objects to human readable form
                    if (arg instanceof plupload.File) {
                        // Convert status to human readable
                        switch (value) {
                            case plupload.QUEUED:
                                value = 'QUEUED';
                                break;

                            case plupload.UPLOADING:
                                value = 'UPLOADING';
                                break;

                            case plupload.FAILED:
                                value = 'FAILED';
                                break;

                            case plupload.DONE:
                                value = 'DONE';
                                break;
                        }
                    }

                    if (typeof(value) != "function") {
                        row += (row ? ', ' : '') + key + '=' + value;
                    }
                });

                str += row + " ";
            } else {
                str += arg + " ";
            }
        });

        var log = $('#log');
        log.append(str + "\n");
        log.scrollTop(log[0].scrollHeight);
    }
});
</script>

[ym13349140]

excuse me, could you please show me how you make it work? I've finished the Web page using plupload,but I don't know how to use flask_upload in the Server.Can you show me how to use this package on the Server? or can you show me how to process the request in the Server?Thanks!Hope for your reply~ @mgeorgy