I'm following this blog post which details how to use plupload with google appengine and the blobstore api. I am wondering how to add a custom field to the upload. I've changed the enc type to multipart/form-data
<form method="POST" enctype="multipart/form-data">
<select id="adventure" name="adventure">
<option value = "collection-A">Collection A</option>
<option value = "collection-A">Collection B</option>
</select>
<div id="html5_uploader">
<p>You browser doesn't have Flash, Silverlight, Gears, BrowserPlus or HTML5 support.</p>
</div>
</form>
After reading about multipart not working in the docs with webkit browsers (I'm on chrome) I've decided to use the flash based version rather than html5 which I started with. Using different examples and discussions on this forum I've put together the following.
<script type="text/javascript">
$(function() {
uploader = $("#html5_uploader").pluploadQueue({
// General settings
runtimes : 'html5',
max_file_size : '10mb',
chunk_size : '1mb',
multipart : true,
unique_names : true,
// Flash settings
flash_swf_url : '/static/plupload/plupload.flash.swf'
}).pluploadQueue();
uploader.bind('BeforeUpload', function (up, file)
{
$.extend(up.settings.multipart_params, {
'adventure': $('#adventure').val()
});
});
uploader.bind('UploadFile', function(up, file) {
$.ajax({
url: '/generate_upload_url',
async: false,
success: function(data) {
up.settings.url = data;
},
});
});
})
</script>
Everything works on the file upload side, however the select fields options are not sent and:
self.request.get("adventure")
doesn't pick up anything serverside. I am using the most recent version of plupload (not Nick's altered version).
I'm following this blog post http://blog.notdot/2010/04/Implementing-a-dropbox-service-with-the-Blobstore-API-part-3-Multiple-upload-support which details how to use plupload with google appengine and the blobstore api. I am wondering how to add a custom field to the upload. I've changed the enc type to multipart/form-data
<form method="POST" enctype="multipart/form-data">
<select id="adventure" name="adventure">
<option value = "collection-A">Collection A</option>
<option value = "collection-A">Collection B</option>
</select>
<div id="html5_uploader">
<p>You browser doesn't have Flash, Silverlight, Gears, BrowserPlus or HTML5 support.</p>
</div>
</form>
After reading about multipart not working in the docs with webkit browsers (I'm on chrome) I've decided to use the flash based version rather than html5 which I started with. Using different examples and discussions on this forum I've put together the following.
<script type="text/javascript">
$(function() {
uploader = $("#html5_uploader").pluploadQueue({
// General settings
runtimes : 'html5',
max_file_size : '10mb',
chunk_size : '1mb',
multipart : true,
unique_names : true,
// Flash settings
flash_swf_url : '/static/plupload/plupload.flash.swf'
}).pluploadQueue();
uploader.bind('BeforeUpload', function (up, file)
{
$.extend(up.settings.multipart_params, {
'adventure': $('#adventure').val()
});
});
uploader.bind('UploadFile', function(up, file) {
$.ajax({
url: '/generate_upload_url',
async: false,
success: function(data) {
up.settings.url = data;
},
});
});
})
</script>
Everything works on the file upload side, however the select fields options are not sent and:
self.request.get("adventure")
doesn't pick up anything serverside. I am using the most recent version of plupload (not Nick's altered version).
Share Improve this question edited Feb 14, 2012 at 8:46 user714852 asked Feb 13, 2012 at 23:44 user714852user714852 2,1545 gold badges31 silver badges52 bronze badges 5- Does the form gets submitted? – Laur Ivan Commented Feb 14, 2012 at 11:47
- The data (file) ends up serverside and is successfully stored - so in that sense yes, the form does get submitted. However the additional attribute "adventure" is not submitted. – user714852 Commented Feb 14, 2012 at 15:50
- afaik the ajax/flash call is equivalent to a "return false" on form submission. In other words, JS generates its own POST request for data uploading, but the form stored in your HTML doesn't generate anything. IMO you need to add the extra value as a GET parameter to your submitted URL – Laur Ivan Commented Feb 14, 2012 at 16:41
- I've realised that what I do to the form itself doesn't really have an effect. I've had a read through the api docs <plupload./plupload/docs/api/…> but I just cannot seem to find anything to help. I'm not clear on how to implement your suggestion of: " the extra value as a GET parameter to your submitted URL" - I thought that that's what I was doing by using $.extend() – user714852 Commented Feb 14, 2012 at 21:07
-
I'm not sure how plupload works, but it looks like you upload to a certain URL. You could try adding parameters to the url (
?param=value), but you need to escape them if needed. Basically, instead of submitting tohttp://some.url/for/upload, you submit tohttp://some.url/for/upload?param=value. You might be able to do that via plupload's api though... – Laur Ivan Commented Feb 14, 2012 at 22:54
2 Answers
Reset to default 5So after struggling with this for a while I switched back to the html5 version and instead of using BeforeUpload I've now "hard-coded" the value in, but it works for my implementation..
var adventure_name = $('#adventure').val();
$('#adventure').change(function(){
adventure_name = $('#adventure').val();
});
// Setup html5 version
$(function() {
uploader = $("#html5_uploader").pluploadQueue({
// General settings
runtimes : 'html5',
max_file_size : '10mb',
url : '{{ upload_url }}',
multipart : true,
multipart_params : {'adventure': adventure_name},
unique_names : true,
// Flash settings
}).pluploadQueue();
uploader.bind('UploadFile', function(up, file)
{
$.ajax({
url: '/generate_upload_url',
async: false,
success: function(data) {
up.settings.url = data;
},
});
});
});
I think this is the problem: up.settings.multipart_params === undefined when this code run:
$.extend(up.settings.multipart_params, {
'adventure': $('#adventure').val()
});