How to upload file by using Angular and WebMethod on ASPX page?

Viewed 39

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.

0 Answers
Related