I faced an issue during implementing file uploading. I use Angular + WebMethod on ASPX page. The problem is that the last File parameter cannot be bound. If I eliminate the last File parameter the request successfully comes to the web method. I think I mess up with content type. This is the error that I have caught:
{
"headers": {
"normalizedNames": {
},
"lazyUpdate": null
},
"status": 500,
"statusText": "Internal Server Error",
"url": "http://app.local/TST/Settings.aspx/Import",
"ok": false,
"name": "HttpErrorResponse",
"message": "Http failure response for http://app.local/TST/Settings.aspx/Import: 500 Internal Server Error",
"error": {
"Message": "No parameterless constructor defined for type of 'System.Byte[]&'.",
"StackTrace": " at System.Web.Script.Serialization.ObjectConverter.ConvertDictionaryToObject(IDictionary`2 dictionary, Type type, JavaScriptSerializer serializer, Boolean throwOnError, Object& convertedObject)\r\n at System.Web.Script.Serialization.ObjectConverter.ConvertObjectToTypeInternal(Object o, Type type, JavaScriptSerializer serializer, Boolean throwOnError, Object& convertedObject)\r\n at System.Web.Script.Services.WebServiceMethodData.StrongTypeParameters(IDictionary`2 rawParams)\r\n at System.Web.Script.Services.RestHandler.InvokeMethod(HttpContext context, WebServiceMethodData methodData, IDictionary`2 rawParams)\r\n at System.Web.Script.Services.RestHandler.ExecuteWebServiceCall(HttpContext context, WebServiceMethodData methodData)",
"ExceptionType": "System.MissingMethodException"
}
}
Angular part
import.component.html
<div>
<input type="file" (change)="uploadImportFile($event)">
</div>
import.component.ts
public uploadImportFile(event: any) {
const files = event.target.files;
const fData: FormData = new FormData;
for (var i = 0; i < files.length; i++) {
fData.append('file' + i, files[i], 'import-file-' + i);
}
this.importSettings(this.userId, this.code, fData).subscribe(response => {
// TODO: Handle success result
}, error => {
// TODO: Handle the error
});
}
public importSettings(userId: string, code: string, file: any): Observable<any> {
const body = {UserId: userId, Code: code, File: file};
return this.http.post<any>(`${this.websiteUrl}/TST/Settings.aspx/Import`, body);
}
ASPX part
Settings.aspx.vb
Partial Public Class Settings
<System.Web.Services.WebMethod(CacheDuration:=0)>
<System.Web.Script.Services.ScriptMethod(ResponseFormat:=Script.Services.ResponseFormat.Json)>
Public Shared Sub Import(ByVal UserId As String, ByVal Code As String, ByRef File As Byte())
// TODO: Do something
End Sub
End Class
Is it possible to implement file uploading in a way I have? According to this answer File upload not working with angular and webmethod I have to create a custom HTTP handler.