YUI 3 UploaderFlash not firing 'upload' events
-
07-06-2021 - |
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?
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' });
});
OTHER TIPS
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