Example: Single File Upload with Additional Data

This example extends the single file upload example and shows how to submit GET and POST variables along with the file upload request, and how to receive data from the server. The uploader is set up to filter extensions of uploaded files to only allow common image and video formats.

Please note: This example will not work when run from a local filesystem because Flash only allows ExternalInterface communication with pages loaded from the network. If you’d like to run this example locally, set up a local web server and launch it from there.

Also note: The uploader is not supported on iOS devices (iPhone and iPad), because Flash player is not available on that system. This example will not function on such devices.

File selected:

Percent uploaded:

Sending via GET: foo='bar', foo1='bar1'

Sending via POST: bar='bazz', bar1='bazz1'

Data returned from the server:

Adding Functionality to Simple File Upload

Please read the "Simple File Upload" example tutorial first, since this example builds on top of it.

Additional UI

In addition to the UI for selecting files, uploading them, and reporting on the upload progress, add the container to output the data returned from the server:

<div id="result">Data returned from the server:</div>

Event Binding for `uploadcompletedata`

When declaring uploader event bindings, add a handler for the uploadcompletedata event, which carries the output returned by the server:

uploader.on("uploadcompletedata", uploadCompleteData);

Handling `uploadcompletedata`

Add a handler for the uploadcompletedata event. In the handler, set the content of the result container to the server's response to the request, carried in the event payload:

function uploadCompleteData (event) {
	Y.one("#result").setHTML("Data returned from the server:<br>" + event.data);
}

Change Upload Method

Finally, modify the uploadAll() method call to specifically set the variable transmission method to POST and to add the variables to be carried in the POST request:

function uploadFile (event) {
	uploader.uploadAll("http://www.yswfblog.com/upload/upload.php?foo=bar&foo1=bar1", "POST", {bar:"bazz", bar1:"bazz1"});
}

Full Source Code For this Example

<style type="text/css">
    .uploadButton a {
        display:block;
        width:100px;
        height:40px;
        text-decoration: none;
    }

    .uploadButton a {
        background: url("../assets/uploader-deprecated/uploadFileButton.png") 0 0 no-repeat;
    }

    .uploadButton a:visited {
        background-position: 0 0;
    }

    .uploadButton a:hover { 
        background-position: 0 -40px;
    }

    .uploadButton a:active {
        background-position: 0 -80px;
    }
</style>

<div id="selectButton" style="width:100px;height:40px"></div> 
<div class="uploadButton"><a href="#" id="uploadButtonLink"></a></div>

<div id="filename">
File selected:
</div>
<div id="percent">
Percent uploaded:
</div>
<div>Sending via GET: foo='bar', foo1='bar1'</div>
<div>Sending via POST: bar='bazz', bar1='bazz1'</div>
<div id="result">Data returned from the server:</div>

<script>

YUI({filter:"raw"}).use('uploader-deprecated', function (Y) {

 
var swfURL = Y.Env.cdn + "uploader-deprecated/assets/uploader.swf";


if (Y.UA.ie >= 6) {
    swfURL += "?t=" + Y.guid();
}

var uploader = new Y.Uploader({boundingBox:"#selectButton", 
                               buttonSkin:"../assets/uploader-deprecated/selectFileButton.png",
                               transparent: false,
                               swfURL: swfURL
                               });  

uploader.on("uploaderReady", setupUploader);
uploader.on("fileselect", fileSelect);
uploader.on("uploadprogress", updateProgress);
uploader.on("uploadcomplete", uploadComplete);
uploader.on("uploadcompletedata", uploadCompleteData);

Y.one("#uploadButtonLink").on("click", uploadFile);


function setupUploader (event) {
    uploader.set("multiFiles", false);
    uploader.set("log", true);
    
    var fileFilters = new Array({description:"Images", extensions:"*.jpg;*.png;*.gif"},
                       {description:"Videos", extensions:"*.avi;*.mov;*.mpg"}); 
    
    uploader.set("fileFilters", fileFilters);
}


function fileSelect (event) {
    var fileData = event.fileList;  

    for (var key in fileData) {
        var output = "File selected: " + fileData[key].name;
        Y.one("#filename").setHTML(output);
    }
}

function updateProgress (event) {
    Y.one("#percent").setHTML("Percent uploaded: " + Math.round((100 * event.bytesLoaded / event.bytesTotal)) + "%");
}

function uploadComplete (event) {
    Y.one("#percent").setHTML("Upload complete!");
}

function uploadCompleteData (event) {
    Y.one("#result").setHTML("Data returned from the server:<br>" + event.data);
}

function uploadFile (event) {
    uploader.uploadAll("http://www.yswfblog.com/upload/upload.php?foo=bar&foo1=bar1", "POST", {bar:"bazz", bar1:"bazz1"});
}


});

</script>