YUI Library Examples: Uploader: Single File Upload with GET and POST Vars Submission and Server Data Return

Uploader: Single File Upload with GET and POST Vars Submission and Server Data Return

Single File Upload with GET and POST Vars Submission and Server Data Return

Adding Functionality to Single File Upload

Please read the "Single 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>

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

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").setContent("Data returned from the server:<br>" + event.data);
}

function uploadCompleteData (event) {
	Y.one("#result").setContent("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"});
}

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