Pass value into dropzone sending option after ajax is complete - php

Question

So I am working with dropzone, and everything uploads fine, but now I am to the part of adding the image paths to a database. What I am having a problem with is I first want to submit a form with ajax, after that successfully completes I would like to pass the newly created ID on the database into the sending option of dropzone. Everything works separately, but I can not figure out how to get the new ID into the sending option of dropzone. Here are my 2 pieces of code that are relevant.
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone("#dropzonePreview", {
url: "list/post-image",
parallelUploads: 6,
autoProcessQueue: false,
processing: function(){
this.options.autoProcessQueue = true;
},
sending: function(file, xhr, formData) {
formData.append("_token", $('[name=_token]').val());
}
});
and here is the ajax call. I thought I would try the myDropzone.options.sending, but I can figure out how to attach the formData like in the above code.
var form = $('form', wizard).serialize();
$.ajax({
type: "POST",
url: 'list',
data: form,
success: function(data) {
if (data.success)
{
myDropzone.options.sending(null, null, formData)
{
formData.append("propertyID", $('[name=propertyID]').val(data.propertyID));
}
}
}
});
hopefully it is just something small that I am missing. Thanks for your help in advance.

Answer 1

I just did some tinkering around, and some google searching and I found the answer. Instead of using the sending option, there is an option for params which makes a hidden field. Here is my ajax piece of code that got it working.
$.ajax({
type: "POST",
url: 'list',
data: form,
success: function(data) {
if (data.success)
{
myDropzone.options.params = {'propertyID': data.propertyID};
}
myDropzone.processQueue();
}
});

Answer 2

You have to put ur dropzone proceess queue out of the ajax succeess: like this:
Dropzone.options.dropzoneJsForm = {
autoProcessQueue: false,
acceptedFiles: ".png,.jpg,.gif,.bmp,.jpeg,.pdf,.rar,.zip",
maxFilesize: 2,
maxFiles: 5,
addRemoveLinks: true,
init: function () {
var submitButton = document.querySelector("#btnReg");
myDropzone = this; //closure
submitButton.addEventListener("click", function () {
var coursenameID = $('#coursenameID').val();
var coursetypecodeID = $('#courseTypeCodeID').val();
var hdcourseexecuterID = $('#hdCourseExecuterID').val();
//var coursecreationDateID = $('#courseCreationDateID').val();
var selectedpersons = [];
$("#doublerow input:checked").each(function () { selectedpersons.push($(this).val()) });
$.ajax({
url: '#Url.Action("InsertToDB", "Course")',
type: "POST",
dataType: "json",
traditional: true,
data: { "coursenameID": coursenameID, "coursetypecodeID": coursetypecodeID, "hdcourseexecuterID": hdcourseexecuterID, "selectedpersons": selectedpersons },
beforeSend: function () {
$('#savingdata').addClass('show');
},
success: function (Response) {
console.log(Response);
if (Response > 0) {
courseid = Response;
console.log(Response);
$('#savingdata').addClass('hide');
}
}
});
myDropzone.options.params = { 'propertyID': courseid };
myDropzone.processQueue();
});
}
};