YUI Uploader Control Cheat Sheet
YUI Uploader Control Cheat Sheet
5
Instantiating the Uploader Simple Use Case YAHOO.widget.Uploader
Properties:
<div id="myUploader" myUploader.addEventListener("fileSelect", onFileSelect);
style=”width:400px; height:210px”></div> myUploader.browse(false, [{description:"Images", SWFURL (s)
<script> extensions:"*.jpg, *.gif"}]);
var myUploader = new YAHOO.widget.Uploader("myUploader"); function onFileSelect (event:Object) { YAHOO.widget.Uploader
</script> myUploader.uploadAll("YOUR UPLOAD URL");
} Events:
Instantiates a new Uploader object, myUploader, which is bound to a
contentReady
div whose id attribute is 'myUploader'. The result will be a visual Opens the File Select dialog and allows the user to select one file
fileSelect
Uploader display — a console-style window that outputs progress (parameter allowMultiple is set to false) with either jpg or gif uploadStart
messages. To hide the visual display, simply set the size of the extension (the filtering is suggestive, rather than strict – the user can uploadProgress
placeholder div to height:0; width:0; overflow:hidden;. override it by specifying "*.*" in the text input of the File Select dialog. uploadCancel
When files are selected, they are queued and uploaded to the uploadComplete
specified URL. uploadCompleteData
Constructor uploadError
YAHOO.widget.LogReader(str html id);
Solutions YAHOO.widget.Uploader
Arguments: Methods:
(1) HTML element (string or object): A reference to an HTML id Open the File Select dialog with multiple file selection and filters for
string or element object binds the Uploader to an existing page different types of images or videos: browse()
element. This parameter is required. upload()
myUploader.browse(true, [{description:"Images", uploadAll()
extensions:"*.jpg, *.png, *.gif, *.bmp"}, cancel()
Limitations {description:"Videos", extensions:"*.avi, *.mpg, clearFileList()
*.flv, *.mov"}]); removeFile()
(1) The Uploader can only send data to servers in the same security
sandbox as the uploader.swf file. If uploader.swf hosted by Track upload progress and log it in the YUI Logger (must be included
yui.yahooapis.com is used, then the server must contain a on the page):
cross-domain permissions file allowing yui.yahooapis.com to myUploader.addListener("uploadProgress",
upload files. By default, Uploader looks for uploader.swf in the onUploadProgress);
assets directory in the same path as uploader.js, so if you’re function onUploadProgress (event:Object) {
loading Uploader from yui.yahooapis.com you will be affected YAHOO.log(event.id + ": " + event.bytesLoaded +
by this issue. "/" + event.bytesTotal);
(2) Because of a known Flash bug, the Uploader running in Firefox in }
Windows does not send the correct cookies with the upload; Send custom variables in the same POST request as the file
instead of sending Firefox cookies, it sends Internet Explorer’s submission:
cookies for the respective domain. As a workaround, we suggest
either using a cookieless upload method or appending myUploader.upload("file0", "YOUR UPLOAD URL",
"POST", {var1: "foo", var2: "bar", var3: "baz"});
document.cookie to the upload request.
Modify the file form field name from the default “Filedata”:
Dependencies myUploader.upload("file0", "YOUR UPLOAD URL", null,
null, "DifferentFileFieldName");
Uploader requires the Yahoo Global Object, Dom, Event and Element.
The Uploader also uses the uploader.swf file that by default resides Accept the file upload using PHP on the server side:
in the assets directory in the same path as uploader.js. On the <?php
client side, Uploader requires that the user have Flash 9.0.45 or later foreach ($_FILES as $fieldName => $file) {
move_uploaded_file($file['tmp_name'],
installed on their browser.
"./" . $file['name']);
echo (" ");
} exit();?>