I am having a heck of a time trying to submit additional form data in the jQuery File Upload plugin. It is described here https://github.com/blueimp/jQuery-File-Upload/wiki/How-to-submit-additional-Form-Data but it doesn’t go into any detail about how to retrieve and use that data in the UploadHandler.php. Below is what I have:
index.php (the form):
<form id="fileupload" action="<?php echo $this->config->item('base_url'); ?>/cool_upload/server/php/" method="POST" enctype="multipart/form-data">
<input type="hidden" id="userID" value="<?php echo $this->session->userdata('id'); ?>">
<!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
<div class="row fileupload-buttonbar">
<div class="span7">
<!-- The fileinput-button span is used to style the file input field as button -->
<span class="btn btn-success fileinput-button">
<i class="icon-plus icon-white"></i>
<span>Add files...</span>
<!-- REMOVED MULTIPLE FROM HERE TO ONLY ALLOW ONE FILE AT A TIME!!!! -->
<input type="file" name="files[]">
</span>
<button type="submit" class="btn btn-primary start">
<i class="icon-upload icon-white"></i>
<span>Start upload</span>
</button>
<button type="reset" class="btn btn-warning cancel">
<i class="icon-ban-circle icon-white"></i>
<span>Cancel upload</span>
</button>
<button type="button" class="btn btn-danger delete">
<i class="icon-trash icon-white"></i>
<span>Delete</span>
</button>
<input type="checkbox" class="toggle">
</div>
</div>
<!-- The global progress information -->
<div class="span5 fileupload-progress fade">
<!-- The global progress bar -->
<div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
<div class="bar" style="width:200%;"></div>
</div>
<!-- The extended global progress information -->
<div class="progress-extended"> </div>
</div>
<!-- The loading indicator is shown during file processing -->
<div class="fileupload-loading"></div>
<br>
<!-- The table listing the files available for upload/download -->
<table role="presentation" class="table table-striped"><tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody></table>
</form>
<br>
<!-- The template to display files available for upload -->
<script id="template-upload" type="text/x-tmpl">
<tr class="template-upload fade">
<td colspan="2" class="preview"><span class="fade"></span></td>
<td class="changeFileName"><input type="text" name="changeFileName" class="changeFileName" style="width: 110px;" placeholder="New File Name?" maxlength="25" />
<select class="selectCat" name="selectCategory" style="width: 130px;">
<option selected="selected" value="0">Select Category:</option>
<?php
foreach ($fileCategory as $t)
{
echo '<option value="'.$t['id'].'">'.$t['name'].'</option>';
}
?>
<option value="3">Other...</option>
</select>
</td>
<td colspan="2" class="name" width="20"><span>{%=file.name%}</span></td>
<td colspan="2" class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
{% if (file.error) { %}
<td class="error" colspan="2"><span class="label label-important">Error</span> {%=file.error%}</td>
{% } else if (o.files.valid && !i) { %}
<td>
<div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="bar" style="width:0%;"></div></div>
</td>
<td class="start">{% if (!o.options.autoUpload) { %}
<button class="btn btn-primary">
<i class="icon-upload icon-white"></i>
<span>Start</span>
</button>
{% } %}</td>
{% } else { %}
<td colspan="2"></td>
{% } %}
<td class="cancel">{% if (!i) { %}
<button class="btn btn-warning">
<i class="icon-ban-circle icon-white"></i>
<span>Cancel</span>
</button>
{% } %}</td>
<td rowspan="2"></td>
</tr>
{% } %}
</script>
main.js:
$('#fileupload').bind('fileuploadsubmit', function (e, data) {
data.formData = $('form').serializeArray();
});
UploadHandler.php:
-Here is my edit to the post function:
public function post($print_response = true) {
if (isset($_REQUEST['_method']) && $_REQUEST['_method'] === 'DELETE') {
return $this->delete($print_response);
}
$upload = isset($_FILES[$this->options['param_name']]) ?
$_FILES[$this->options['param_name']] : null;
// Parse the Content-Disposition header, if available:
$file_name = isset($_SERVER['HTTP_CONTENT_DISPOSITION']) ?
rawurldecode(preg_replace(
'/(^[^"]+")|("$)/',
'',
$_SERVER['HTTP_CONTENT_DISPOSITION']
)) : null;
// Parse the Content-Range header, which has the following form:
// Content-Range: bytes 0-524287/2000000
$content_range = isset($_SERVER['HTTP_CONTENT_RANGE']) ?
preg_split('/[^0-9]+/', $_SERVER['HTTP_CONTENT_RANGE']) : null;
$size = $content_range ? $content_range[3] : null;
$files = array();
// IF THERE ARE MULTIPLE FILES
if ($upload && is_array($upload['tmp_name'])) {
// param_name is an array identifier like "files[]",
// $_FILES is a multi-dimensional array:
foreach ($upload['tmp_name'] as $index => $value) {
$files[] = $this->handle_file_upload(
$upload['tmp_name'][$index],
$file_name ? $file_name : $upload['name'][$index],
$size ? $size : $upload['size'][$index],
$upload['type'][$index],
$upload['error'][$index],
$index,
$content_range,
isset($_REQUEST['userID']) ? $_REQUEST['userID'] : null,
null
);
}
} else {
// param_name is a single object identifier like "file",
// $_FILES is a one-dimensional array:
$files[] = $this->handle_file_upload(
isset($upload['tmp_name']) ? $upload['tmp_name'] : null,
$file_name ? $file_name : (isset($upload['name']) ?
$upload['name'] : null),
$size ? $size : (isset($upload['size']) ?
$upload['size'] : $_SERVER['CONTENT_LENGTH']),
isset($upload['type']) ?
$upload['type'] : $_SERVER['CONTENT_TYPE'],
isset($upload['error']) ? $upload['error'] : null,
null,
$content_range,
isset($_REQUEST['userID']) ? $_REQUEST['userID'] : null,
null
);
}
return $this->generate_response(array('files' => $files), $print_response);
}
-I added the parameter to handle_file_upload
protected function handle_file_upload($uploaded_file, $name, $size, $type, $error,
$index = null, $content_range = null, $userID) {
When I try to use $userID I get nothing because it is empty. How can I use the userID from the form? Also in index.php, in the template display area how can I use those added inputs too? For instance, I have an input to changeFilerName and a select to select the category. I’ve read the documentation, but I’m still not sure how things are being passed to the UploadHandler.
First of all make sure that $userID is populated in the hidden form field by viewing the source of your page. The hidden form field needs a name like this:
On the PHP side the value of that input will be available in the $_POST array
You should also observe the request / response of the Ajax request in the developer tools console that comes with your browser or a tool like Firebug.