Question

I need some help with jQuery uploadify. When uploading, I want to add two fields (name and description) in the form, and I want to receive this data on the upload.php file. I think this can be done by using scriptData but I dont understand how I can send the values of these two fields and receive on the upload.php file.

<script type="text/javascript">

$(document).ready(function() {
    $("#fileUpload").fileUpload({
        'uploader': 'uploadify/uploader.swf',
        'cancelImg': 'uploadify/cancel.png',
        'script': 'uploadify/upload.php',
        'folder': 'files',
        'multi': false,
        'displayData': 'speed'
    });


});

</script>

And here is upload form with the fields:

<fieldset>
        <h2>File Upload</h2>
        Name:<input type="text" name="name"><br />
        Description: <textarea rows="5" cols="20" name="desc" >Enter Description</textarea>:<br /> 
        <div id="fileUpload">You have a problem with your javascript</div>
        <a href="javascript:$('#fileUpload').fileUploadStart()">Start Upload</a> |  <a href="javascript:$('#fileUpload').fileUploadClearQueue()">Clear Queue</a>
        <p></p>
    </fieldset>

I will be very thankful for any help.

Answer 1

First define a function called upload:

<script type="text/javascript">

$(document).ready(function() {
    $("#fileUpload").fileUpload({
        'uploader': 'uploadify/uploader.swf',
        'cancelImg': 'uploadify/cancel.png',
        'script': 'uploadify/upload.php',
        'folder': 'files',
        'multi': false,
        'displayData': 'speed'
    });


});

    function upload(){
        var ipName = $("input[name='name']").val();
        var ipDesc = $("textarea[name='desc']").val();
        var data = {name:ipName, desc:ipDesc};
        $('#fileUpload').uploadifySettings("scriptData", data).fileUploadStart();
    }



</script>

Then change your upload anchor to as follows:

<fieldset>
        <h2>File Upload</h2>
        Name:<input type="text" name="name"><br />
        Description: <textarea rows="5" cols="20" name="desc" >Enter Description</textarea>:<br /> 
        <div id="fileUpload">You have a problem with your javascript</div>
            <a href="javascript:upload()">Start Upload</a> |
            <a href="javascript:$('#fileUpload').fileUploadClearQueue()">Clear Queue</a>
        <p></p>
    </fieldset>