uploader-withvars.mustache revision c1cc0c913c4ed9ac3de73aaadd3d0db93d2240df
<div class="intro">
<p>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.</p>
<p><strong>Please note:</strong> 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. </p>
<p><strong>Also note:</strong> 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.</p>
</div>
<div class="example yui3-skin-sam">
{{>uploader-withvars-source}}
</div>
<h2>Adding Functionality to Simple File Upload</h2>
<p>Please read the "Simple File Upload" example tutorial first, since this example builds on top of it.</p>
<h2>Additional UI</h2>
<p>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:</p>
```
<div id="result">Data returned from the server:</div>
```
<h2>Event Binding for `uploadcompletedata`</h2>
<p>When declaring uploader event bindings, add a handler for the `uploadcompletedata` event, which carries the output returned by the server:</p>
```
uploader.on("uploadcompletedata", uploadCompleteData);
```
<h2>Handling `uploadcompletedata`</h2>
<p>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:</p>
```
function uploadCompleteData (event) {
Y.one("#result").setContent("Data returned from the server:<br>" + event.data);
}
```
<h2>Change Upload Method</h2>
<p>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:</p>
```
function uploadFile (event) {
uploader.uploadAll("http://www.yswfblog.com/upload/upload.php?foo=bar&foo1=bar1", "POST", {bar:"bazz", bar1:"bazz1"});
}
```
<h2>Full Source Code For this Example</h2>
```
{{>uploader-withvars-source}}
```