This is just driving me nuts. The scenario is this, I added a drop down box, for photo category, this value gets applied to all photo uploads in the database. The select tag is inside the form tag of BlueImp's uploader, NOT in the java template.
I have tried the example on the GitHub to add additional data, and it seems not to be binding when "data.formdata" gets serialized. I read many posts here on SO, seems to be a popular topic, but all those failed for me too.
Here is what I have tried so far, the ID of the dropdown is "PhotoCat":
tried using file->Category = $_Post['PhotoCat'] in the handle_form_data function - not get the value from post, then tried with "@", and $_Request, with and without "@".
Tried using $_Post['PhotoCat'] in the function where the data writes to the DB - No value there.
I can get it to work, if I hard code a value to file->Category.
So it seems the issue is, I am not hitting the right spot to grab the post data.
I will post code if that will help, but I do not think it is a code problem, but rather where can I grab and use the Dropdown value.
Thanks,
Dave
Added to Main.js
$(function () {
'use strict';
// Initialize the jQuery File Upload widget:
$('#fileupload').fileupload({
// Uncomment the following to send cross-domain cookies:
//xhrFields: {withCredentials: true},
url: 'server/php/'
});
// Enable iframe cross-domain access via redirect option:
$('#fileupload').fileupload(
'option',
'redirect',
window.location.href.replace(
/\/[^\/]*$/,
'/cors/result.html?%s'
)
);
$('#fileupload').fileupload({
// Uncomment the following to send cross-domain cookies:
//xhrFields: {withCredentials: true},
url: 'server/php/',
disableImageResize: /Android(?!.*Chrome)|Opera/
.test(window.navigator && navigator.userAgent),
imageMaxWidth: 800,
imageMaxHeight: 600,
imageCrop: false // Force cropped images
});
$('#fileupload').bind('fileuploadsubmit', function (e, data) {
// The example input, doesn't have to be part of the upload form:
data.formData = {"example": 'ADDED THIS'};
});
$('#fileupload').fileupload({
url: 'server/php/'
}).on('fileuploadsubmit', function (e, data) {
data.formData += data.context.find(':input').serializeArray();
});
index.php
$options = array(
'delete_type' => 'POST',
'db_host' => DB_HOST,
'db_user' => DB_USER,
'db_pass' => DB_PASS,
'db_name' => DB_NAME,
'db_table' => 'files'
);
error_reporting(E_ALL | E_STRICT); require('UploadHandler.php');
class CustomUploadHandler extends UploadHandler {
protected function initialize() {
$this->db = new mysqli(
$this->options['db_host'],
$this->options['db_user'],
$this->options['db_pass'],
$this->options['db_name']
);
parent::initialize();
$this->db->close();
}
protected function handle_form_data($file, $index) {
$file->title = @$_REQUEST['title'][$index];
$file->description = @$_REQUEST['description'][$index];
$file->DropD = $_REQUEST['PhotoCat'];
}
protected function handle_file_upload($uploaded_file, $name, $size, $type, $error,
$index = null, $content_range = null) {
$file = parent::handle_file_upload(
$uploaded_file, $name, $size, $type, $error, $index, $content_range
);
if (empty($file->error)) {
$sql = 'INSERT INTO `'.$this->options['db_table']
.'` (`name`, `size`, `type`, `title`, `description`)'
.' VALUES (?, ?, ?, ?, ?)';
$query = $this->db->prepare($sql);
$query->bind_param(
'sisss',
$file->name,
$file->size,
$file->type,
$file->DropD,
$file->description
);
$query->execute();
$file->id = $this->db->insert_id;
}
return $file;
}
protected function set_additional_file_properties($file) {
parent::set_additional_file_properties($file);
if ($_SERVER['REQUEST_METHOD'] === 'GET') {
$sql = 'SELECT `id`, `type`, `title`, `description` FROM `'
.$this->options['db_table'].'` WHERE `name`=?';
$query = $this->db->prepare($sql);
$query->bind_param('s', $file->name);
$query->execute();
$query->bind_result(
$id,
$type,
$title,
$description
);
while ($query->fetch()) {
$file->id = $id;
$file->type = $type;
$file->title = $title;
$file->description = $description;
}
}
}
public function delete($print_response = true) {
$response = parent::delete(false);
foreach ($response as $name => $deleted) {
if ($deleted) {
$sql = 'DELETE FROM `'
.$this->options['db_table'].'` WHERE `name`=?';
$query = $this->db->prepare($sql);
$query->bind_param('s', $name);
$query->execute();
}
}
return $this->generate_response($response, $print_response);
}
}
$upload_handler = new CustomUploadHandler($options);
index.html (form section)
<form id="fileupload" method="POST" enctype="multipart/form-data">
<!-- Redirect browsers with JavaScript disabled to the origin page -->
<noscript><input type="hidden" name="redirect" value="https://blueimp.github.io/jQuery-File-Upload/"></noscript>
<!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
<div class="row fileupload-buttonbar">
<div class="col-lg-7">
<!-- The fileinput-button span is used to style the file input field as button -->
<span class="btn btn-success fileinput-button">
<i class="glyphicon glyphicon-plus"></i>
<span>Add files...</span>
<input type="file" name="files[]" multiple>
</span>
<button type="submit" class="btn btn-primary start">
<i class="glyphicon glyphicon-upload"></i>
<span>Start upload</span>
</button>
<button type="reset" class="btn btn-warning cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel upload</span>
</button>
<button type="button" class="btn btn-danger delete">
<i class="glyphicon glyphicon-trash"></i>
<span>Delete</span>
</button>
<input type="checkbox" class="toggle">
<!-- The global file processing state -->
<span class="fileupload-process"></span>
</div>
<!-- The global progress state -->
<div class="col-lg-5 fileupload-progress fade">
<!-- The global progress bar -->
<div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-bar-success" style="width:0%;"></div>
</div>
<!-- The extended global progress state -->
<div class="progress-extended"> </div>
</div>
</div>
<div>
<select id="PhotoCat" name="PhotoCat">
<option value="cat1">Cat 1</option>
<option value="cat2">Cat 2</option>
</select>
</div>
<!-- The table listing the files available for upload/download -->
<table role="presentation" class="table table-striped"><tbody class="files"></tbody></table>
</form>
I have it working, but seems like there would be a better way. The code example is dirty, but works for testing. There is still a couple of bumps yet to go, such as when the category changes, query the DB, and filter by category, but that is not too bad.
What I did was add a hidden input field in the upload template area, along with some coding:
{%
var ListObj = document.getElementById("PhotoCat");
var Cat = ListObj.options[ListObj.selectedIndex].value;
%}
<input name="Category[]" class="form-control" hidden value="{%=Cat%}">
In my select tag, I add an onchange to a function that goes through and changes the input fields.
function UpdateCategory()
{
var x = document.getElementsByName("PixArea[]");
var ListObj = document.getElementById("PhotoCat");
var Cat = ListObj.options[ListObj.selectedIndex].value;
for (var i = 0; i < x.length; i++) {
x[i].value = Cat;
}
}
Now you can just follow the example on GitHub
Long time but,
Surprisingly, we dont need to add an on change event. Just add in the hidden fields in the template form. Keep the actual select in the uploader form and submit, no formData: is required. post params will be available with the name of your uploader form select.