Search code examples
flashyui3yui-uploader

YUI 3 UploaderFlash not firing 'upload' events


I've set up a very simple prototype to test out the YUI Uploader. (flash version) The file is making it to the server which is sending a simple Ajax response. However, the only event being triggered are fileselect and uploadstart. uploadcomplete, uploaderror, and uploadprogress are never triggered. This is with YUI 3.5.1.

HTML and JS

<!DOCTYPE html>
<html>
<head>
    <title>Uploader Bizness</title>
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></script>
</head>
<body>
    <div id="upload"></div>
    <div id="progress"></div>
    <script>
        'use strict';
        YUI().use('uploader', 'uploader-flash', function (Y) {
            Y.Uploader = Y.UploaderFlash;
            var uploader = new Y.Uploader({
                width: '150px',
                height: '40px',
                swfURL: '/flashuploader.swf'
            }).render('#upload');

            uploader.on('fileselect', function (G) {
                var firstFile = G.fileList[0];
                uploader.upload(firstFile, 'http://localhost:28107/home/upload', { postvar1: 'foo', postvar2: 'bar' });
            });

            uploader.on('uploadstart', function () {
                console.log('Upload started');
            });

            uploader.on('uploadcomplete', function (e) {
                console.log('Upload completed successfully', e);
            });

            uploader.on('uploaderror', function (e) {
                console.log('Upload error', e);
            });

            uploader.on('uploadprogress', function (file, bytesloaded, bytesTotal, percentLoaded, e) {
                $('#progess').html(percentLoaded);
            });
        });
    </script>
</body>
</html>

Server side code

public JsonResult Upload()
{
    var result = new JsonResult();
    result.Data = new {message = "great success"};
    return result;
}

What am I doing wrong here?


Solution

  • Change

    <script src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></script>
    

    to

    <script src="http://yui.yahooapis.com/3.6.0pr2/build/yui/yui-min.js"></script>
    

    and subscribe to the events on the file objects instead of the uploader object:

    uploader.on('fileselect', function (G) {
        var firstFile = G.fileList[0];
        firstFile.on('uploadstart', function (event) {
            console.log('Upload started');
            // var file = event.currentTarget;
        });
        uploader.upload(firstFile, 'http://localhost:28107/home/upload', { postvar1: 'foo', postvar2: 'bar' });
    });