For more information about dropzone, visit this link
I am currently implementing dropzone as my file upload handler with the combination of angularjs and MVC5.
The challenge I'm facing is getting the Http post request to go from the angularjs service to the MVC 5 backend successfully.
My goal is to send not only the files but also other values such as action and a string value named "values".
Check out the code below (in the angularjs service):
sendProductFiles: function (act, file, val) {
return $http.post('/attributes/uploads', $.param({
action: act,
files: file,
values: val
}),
{
transformRequest: angular.identity,
headers: {
'Content-Type': undefined
}
})
}
In the controller (angular):
$scope.intakeUpload = function (files) {
var fd = new FormData();
for (var i = 0; i < files.length; i++)
fd.append('file', files[i]);
AttributionViewService.sendProductFiles("addAttr", fd, $scope.selectedValues).then(function (res) {
}, function (err) {
});
}
Dropzone.options.myAwesomeDropzone = {
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 100,
maxFiles: 100,
// Dropzone settings
init: function () {
var myDropzone = this;
this.element.querySelector("button[type=submit]").addEventListener("click", function (e) {
e.preventDefault();
e.stopPropagation();
myDropzone.processQueue();
});
this.on("sendingmultiple", function (files) {
$scope.intakeUpload(files);
});
this.on("addedfile", function (file) {
file.previewElement.addEventListener("click", function () { this.removeFile(file); });
});
}
}
In the MVC 5 controller:
[HttpPost]
[Route("attributes/uploads")]
public ActionResult AcceptUploads(string action, HttpPostedFile[] files, string values)
{
if (files.Length <= 0)
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
foreach (var file in files)
{
System.Diagnostics.Debug.WriteLine(file.FileName);
}
System.Diagnostics.Debug.WriteLine(values);
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
}
Currently, I am encountering a jQuery error that states Uncaught TypeError: Illegal invocation.
Additionally, I have attempted the following:
Angular Service:
sendProductFiles: function (act, file, val) {
return $http.post('/attributes/uploads', $.param({
action: act,
files: file,
values: val
}), {
headers: {
'Content-Type': 'multipart/form-data'
}
})