I recently created an AJAXUpload method within a cshtml file in my C# MVC project:
function AjaxUpload(url, method, data, successFunction, errorFunction, skipErrorDlg) {
$.ajax({
contentType: false,
processData: false,
url: url,
data: data,
type: method,
dataType: 'json',
beforeSend: function (xhr) {
xhr.setRequestHeader('Authorization', GlobalAuthToken);
},
success: function (data) {
successFunction(data);
},
error: function (event, jqxhr, settings, thrownError) {
console.log(thrownError);
}
});
}
Below is the snippet of HTML code for my file component:
<input type="file" class="file" id="attachment" style="display: none;" onchange="fileSelected(this)" accept=".csv"/>
In my Javascript code, I am making use of the above-defined method like this:
function fileSelected(input) {
console.log("Chosen file: " + input.files[0].name);
var data1 = new FormData();
data1.append("ImportedFile", input.files[0]);
AjaxUpload('/Zetes.ZWS.Processes.Rest/api/importbundles',
'POST',
data1,
function () {
console.log("Import completed");
});
}
Unfortunately, I keep encountering an undefined error when trying to execute this AJAX call.
I experimented with different options and discovered that setting processData: false results in the undefined exception.
Removing that line altogether led to an Illegal Invocation Exception.
Any thoughts or suggestions on how to resolve this issue?