Blueimp jQuery file upload, passing extra form data

Question

I could use some help... I've managed to make blueimp jQuery file upload work for me but I'm still definitely a newbie at this, I know very little about jQuery etc so please try to give it to me as clear and simple as possible. I'll try to be specific.

Ok... What I'd like to achieve with this is that people can upload photos, and with each photo select additional options (via drop down menu) and add extra details (via text input box). These additional form fields would be passed in array(s) along with the array of files which are uploaded. Each of the filenames along with their corresponding menu selection and details would ultimately be stored in a dynamically generated XML or text file alongside the uploaded photos.

I know similar questions have come up before on github and I've seen solutions such as this one (https://github.com/blueimp/jQuery-File-Upload/wiki/How-to-submit-additional-Form-Data) but I'm using the latest version plugin and can't find the equivalent code to that in any of my files.

So far I have added:

<td><b>Package:</b> 
<select name="package[]"><option value="0">Basic</option><option value="1">Advanced</option><option value="2">Restoration</option></select>
</td>
<td>
<input type="text" name="notes[]">
</td>

to in the index.html file (after the 'Delete' button code), and moved the closing form tag to after the template-upload script to include these fields. I know that's not much progress.

Here is most of index.html

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/base/jquery-ui.css" id="theme">
<link rel="stylesheet" href="../jquery.fileupload-ui.css">
<link rel="stylesheet" href="style.css">
<h2>File Upload</h2>
<div id="fileupload">
    <form action="upload.php" method="POST" enctype="multipart/form-data">
        <div class="fileupload-buttonbar">
            <label class="fileinput-button">
            <span>Add files...</span>
            <input type="file" name="files[]" multiple>
        </label>
        <button type="submit" class="start">Start upload</button>
        <button type="reset" class="cancel">Cancel upload</button>
        <button type="button" class="delete">Delete files</button>
    </div>
//</form> originally here, moved below
<div class="fileupload-content">
    <table class="files"></table>
    <div class="fileupload-progressbar"></div>
</div>
</div>
<script id="template-upload" type="text/x-jquery-tmpl">
<tr class="template-upload{{if error}} ui-state-error{{/if}}">
    <td class="preview"></td>
    <td class="name">${name}</td>
    <td class="size">${sizef}</td>
    {{if error}}
        <td class="error" colspan="2">Error:
            {{if error === 'maxFileSize'}}File is too big
            {{else error === 'minFileSize'}}File is too small
            {{else error === 'acceptFileTypes'}}Filetype not allowed
            {{else error === 'maxNumberOfFiles'}}Max number of files exceeded
            {{else}}${error}
            {{/if}}
        </td>
    {{else}}
        <td class="progress"><div></div></td>
        <td class="start"><button>Start</button></td>
    {{/if}}
    <td class="cancel"><button>Cancel</button></td>
</tr>
</script>
<script id="template-download" type="text/x-jquery-tmpl">
<tr class="template-download{{if error}} ui-state-error{{/if}}">
    {{if error}}
        <td></td>
        <td class="name">${name}</td>
        <td class="size">${sizef}</td>
        <td class="error" colspan="2">Error:
            {{if error === 1}}File exceeds upload_max_filesize (php.ini directive)
            {{else error === 2}}File exceeds MAX_FILE_SIZE (HTML form directive)
            {{else error === 3}}File was only partially uploaded
            {{else error === 4}}No File was uploaded
            {{else error === 5}}Missing a temporary folder
            {{else error === 6}}Failed to write file to disk
            {{else error === 7}}File upload stopped by extension
            {{else error === 'maxFileSize'}}File is too big
            {{else error === 'minFileSize'}}File is too small
            {{else error === 'acceptFileTypes'}}Filetype not allowed
            {{else error === 'maxNumberOfFiles'}}Max number of files exceeded
            {{else error === 'uploadedBytes'}}Uploaded bytes exceed file size
            {{else error === 'emptyResult'}}Empty file upload result
            {{else}}${error}
            {{/if}}
        </td>
    {{else}}
        <td class="preview">
            {{if thumbnail_url}}
                <a href="${url}" target="_blank"><img src="${thumbnail_url}"></a>
            {{/if}}
        </td>
        <td class="name">
            <a href="${url}"{{if thumbnail_url}} target="_blank"{{/if}}>${name}</a>
        </td>
        <td class="size">${sizef}</td>
        <td colspan="2"></td>
    {{/if}}
    <td class="delete">
        <button data-type="${delete_type}" data-url="${delete_url}">Delete</button>
    </td>
<td><b>Package:</b> 
<select name="package[]"><option value="0">Basic</option><option value="1">Advanced</option><option value="2">Restoration</option></select>
</td>
<td>
<input type="text" name="notes[]">
</td>
</tr>
</script>
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script src="../jquery.iframe-transport.js"></script>
<script src="../jquery.fileupload.js"></script>
<script src="../jquery.fileupload-ui.js"></script>
<script src="application.js"></script>

I can't make a lot of sense of upload.php though, of where the files[] array is parsed for filenames etc, and am not sure where to receive the package[] and notes[] arrays as well, iterate through them, and how to put all that info into a text/XML file.

Can anyone with a little patience and some experience with this plugin / these issues walk me through the next steps? Thanks so much for your help.

Hanforrd

Answer 1

I found this resource helpful with passing extra form data through with the uploaded files:

https://github.com/blueimp/jQuery-File-Upload/wiki/How-to-submit-additional-Form-Data

Sorry that I don't have the time to write a more detailed answer.

Assam

Someone asked (in a now deleted comment) why I answered this question with a link to a resource that the OP included in their original question. Given that this was answered so long ago, I can only surmise that I overlooked this when originally answering. I will leave my answer here as it seems to be of value to some people given the upvotes (possibly because it makes that resource more visible). – Assam

Answer 2

For passing extra form data you could do something similar to:

    $('[name=files\\[\\]]').fileupload({
        //...your initialization of the file uploader here
    }).bind('fileuploadsubmit', function (e, data) {
        data.formData = {
            'package': $('[name=package\\[\\]]').val(),
            'notes': $('[name=notes\\[\\]]').val()
        };
    });

On the PHP side, you can look in the $_POST array for the submitted 'package' and notes' data.

I would avoid using '[]' in your form element names when the data being submitted is not going to be array data (like checkboxes where multiple values are submitted).

Fitting

I was having this issue.. But u helped me sort it thank u @jasonjonesutah – Erinaceous

Answer 3

I also needed to pass an extra parameter and found that the formData option can be used to set additional form data programmatically.

$('#fileupload').fileupload({
    formData: {
                    param1: 'test'
                    ,param2: "value2"
                    ,param3: "yasseshaikh"
              }
});

Source : Adding additional form data programmatically

Benthos

Careful with that: If the uploaded file is bigger than post_max_size or upload_max_filesize (in php.ini) your form data may get lost. You always should also add the maxChunkSize-Parameter (e.g. maxChunkSize:10*1024*1024) so that large files will be split to small 10MB-Chunks that include the formData. – Handler

Answer 4

In upload.php - To find the parameters that you are looking for try checking in the global variables $_REQUEST, $_GET, or $_POST http://php.net/manual/en/reserved.variables.request.php

So for example if you are sending a 'package[]' parameter to upload.php you could access it inside upload.php using $_REQUEST['package[]']

Hope this helps.

Proprietor