passing custom variables to formstone - php

Question

I'm using formstone drag and drop file upload in my ajax powered form. using $(".uploadImage").upload("start") and $(".uploadDocs").upload("start") for initializing upload section for image and document separately after ajax function response. Each function working but I want to pass a custom variable, something like folder name to formstone and create a folder with that name and upload image and doc to that folder. how to do that?
Ajax function in which the insertion happens and return the id
$.ajax({
type: 'POST',
url: base_url + 'innovation/addProcess',
dataType: "html",
data: $('#add_innovation').serialize(),
success: function(result) {
var res = result.split("#");
if (res[0] == 'success') {
$(".uploadImage").upload("start",postData: {"ideaId":10});// sending custom value to formstone, which is not working as of now
$(".uploadDocs").upload("start",postData: {"ideaId":10});
} else {
showNotification('alert-danger', result);
}
},
error: function(error) {
console.log('error');
}
});
Formstone initialization
Formstone.Ready(function() {
$(".uploadImage").upload({
maxSize: 1073741824,
beforeSend: onBeforeSend,
autoUpload: false,
//postData: {"ideaId":50} // this is working. but don't want this here
}).on("start.upload", onStart)
.on("complete.upload", onComplete)
.on("filestart.upload", onFileStart)
.on("fileprogress.upload", onFileProgress)
.on("filecomplete.upload", onFileComplete)
.on("fileerror.upload", onFileError)
.on("queued.upload", onQueued);
$(".uploadDocs").upload({
maxSize: 1073741824,
beforeSend: onBeforeSend,
autoUpload: false,
}).on("start.upload", onStart)
.on("complete.upload", onComplete)
.on("filestart.upload", onFileStart)
.on("fileprogress.upload", onFileProgress)
.on("filecomplete.upload", onFileComplete)
.on("fileerror.upload", onFileError)
.on("queued.upload", onQueued);
});
function onCancel(e) {
console.log("Cancel");
var index = $(this).parents("li").data("index");
$(this).parents("form").find(".upload").upload("abort",
parseInt(index, 10));
}
function onCancelAll(e) {
console.log("Cancel All");
$(this).parents("form").find(".upload").upload("abort");
}
function onBeforeSend(formData, file) {
console.log(formData.get("ideaId")); // here i need the posted data. currently its not getting here
formData.append("ideaId", ideaId);
return ((file.name.indexOf(".jpg") <= -1) && (file.name.indexOf(".png") <= -1)) ? false : formData; // cancel all jpgs
}
function onQueued(e, files) {
console.log("Queued");
var html = '';
for (var i = 0; i < files.length; i++) {
html += '<li data-index="' + files[i].index + '"><span class="content"><span class="file">' + files[i].name + '</span><span class="cancel">Cancel</span><span class="progress">Queued</span></span><span class="bar"></span></li>';
}
$(this).parents("form").find(".filelist.queue")
.append(html);
}
function onStart(e, files) {
$(this).parents("form").find(".filelist.queue")
.find("li")
.find(".progress").text("Waiting");
}
function onComplete(e) {
console.log("Complete");
// All done!
}
function onFileStart(e, file) {
console.log("File Start");
$(this).parents("form").find(".filelist.queue")
.find("li[data-index=" + file.index + "]")
.find(".progress").text("0%");
}
function onFileProgress(e, file, percent) {
console.log("File Progress");
var $file = $(this).parents("form").find(".filelist.queue").find("li[data-index=" + file.index + "]");
$file.find(".progress").text(percent + "%")
$file.find(".bar").css("width", percent + "%");
}
function onFileComplete(e, file, response) {
console.log("File Complete");
if (response.trim() === "" || response.toLowerCase().indexOf("error") > -1) {
$(this).parents("form").find(".filelist.queue")
.find("li[data-index=" + file.index + "]").addClass("error")
.find(".progress").text(response.trim());
} else {
var $target =
$(this).parents("form").find(".filelist.queue").find("li[data-index=" + file.index + "]");
$target.find(".file").text(file.name);
$target.find(".progress").remove();
$target.find(".cancel").remove();
$target.appendTo($(this).parents("form").find(".filelist.complete"));
}
}
function onFileError(e, file, error) {
console.log("File Error");
$(this).parents("form").find(".filelist.queue")
.find("li[data-index=" + file.index + "]").addClass("error")
.find(".progress").text("Error: " + error);
}
HTML where i used formstone control
<div class="uploadImage" style="height:100px;border:1px dashed #000;" data-upload-options='{"action":"<?php echo base_url();?>innovation/uploadImage","chunked":true}'></div>
<div class="uploadDocs" style="height:100px;border:1px dashed #000;" data-upload-options='{"action":"<?php echo base_url();?>innovation/uploadDocs","chunked":true}'></div>

Answer 1

Try this...
.ajax({
type: 'POST',
url: base_url + 'innovation/addProcess',
dataType: "html",
data: $('#add_innovation').serialize(),
success: function(result) {
var res = result.split("#");
if (res[0] == 'success') {
$(".uploadImage").upload("defaults", {postData: {"ideaId":10}});
$(".uploadImage").upload("start");
$(".uploadDocs").upload("defaults", {postData: {"ideaId":10}});
$(".uploadDocs").upload("start");
} else {
showNotification('alert-danger', result);
}
},
error: function(error) {
console.log('error');
}
});
Before you call the method "start" you need to add the option "postData". As what I understand from the documentation the "start" method doesn't allow additional params.

Answer 2

CodyKL's solution works using the defaults method, or you can append extra params with the beforeSend callback:
// Var to store ID of inserted item
var resultId;
// Insertion AJAX
$.ajax({
...
success: function(result) {
// Get the id from the result
resultId = result;
// Start the upload
$(".uploadImage").upload("start");
},
...
});
// Initialize Upload
$(".uploadImage").upload({
...
beforeSend: onBeforeSend,
...
});
// Modify upload form data
function onBeforeSend(formData, file) {
formData.append('ideaId', resultId); // add resultID obtained in insertion AJAX above to form data
return formData; // Return modified formData
}
You should read up on how JS and the FormData API work: https://developer.mozilla.org/en-US/docs/Web/API/FormData.