YUI 3 UploaderFlash not firing 'upload' events

Question

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?

Was returning JSON by any chance confusing the Flash upload? I'm running into a `__flash__toXML` problem, just like [here](http://stackoverflow.com/questions/7235631/yui3-uploader-rails-rjs). — Arjan, Sep 11 '12 at 21:16

Willem Joosten · Answer 1 · 2012-05-19T16:39:22.803

You probably have a 'same domain policy' problem. The target of the upload should be the same as the source of swfuploader.swf

Your upload target uses port 28107; are your page and the swfuploader.swf served from that same port or the default http port? If not you need to make sure they are or place a crossdomain.xml file on your server. See http://yuilibrary.com/yui/docs/uploader/ for notes on how to write one.

Also note the remark about the Flash bug in IE which you can fix by appending a random parameter to your swfuploader url.

[edit:] I tested your file on my server and although it looks perfectly ok it fails here as well. Even the uploadstart event would not fire at random times. Seems to be a bug in YUI 3.5.1.

Workaround is to use the 3.4.1 uploader using uploader-deprecated. I tested this version and it works:

<script>
'use strict';
YUI().use('uploader-deprecated', function (Y) {

    var uploader = new Y.Uploader({
        boundingBox: '#upload', // use boundingBox attribute instead of render('uploader')
        // width: '150px', set width & height using css 
        // height: '40px',
        swfURL: 'ENTER_PATH/uploader.swf',
        simLimit: 2
    }); // no .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.upload('file0', 'http://localhost:28107/stackupload.php', 'POST', { });
    });

    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);
    });
 /* not tested see below 
    uploader.on('uploadprogress', function (file, bytesloaded, bytesTotal, percentLoaded, e) {
        $('#progess').html(percentLoaded);
    });
*/
});

The event signature for the 'uploadprogress' event is different as well. Code I use:

    uploader.on('uploadprogress', function(event){
        var progress = Math.round(100 * event.bytesLoaded / event.bytesTotal);
        progressBar.set("progress", progress);
    });

You also need to style your button yourself. See http://yuilibrary.com/yui/docs/uploader-deprecated/index.html

Yes, it is served from the same http server on the same port. The flash plugin is allowing me to select files and is sending them to the server. It's just not firing events on the client in the process. — Craig M, May 19 '12 at 14:51

Korneel · Accepted Answer · 2012-06-14T09:53:40.697

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' });
});

YUI 3 UploaderFlash not firing 'upload' events

2 Answers2