CODEWITHSUNDEEP
angularasp.net-core
Mohammad Daliri
Mohammad Daliri

Reputation: 1406

Angular upload by Asp.net core error: System.Text.DecoderFallbackException: Unable to translate bytes [FF] at index

I want to upload a file with Angular 7 and Asp.net core 2.2
In Angular web service append file and append a property Name
When calling WebSerice by Angular show this error in Asp.net core log .
I've read this question and added utf-8 in Content-Type but show the error again.
How can I solve it? Is the problem of Content-Type?

Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware:Error: An unhandled exception has occurred while executing the request.

System.Text.DecoderFallbackException: Unable to translate bytes [FF] at index 144 from specified code page to Unicode.
   at System.Text.DecoderExceptionFallbackBuffer.Throw(Byte[] bytesUnknown, Int32 index)
   at System.Text.DecoderExceptionFallbackBuffer.Fallback(Byte[] bytesUnknown, Int32 index)
   at System.Text.DecoderFallbackBuffer.InternalFallback(Byte[] bytes, Byte* pBytes, Char*& chars)
   at System.Text.UTF8Encoding.FallbackInvalidByteSequence(Byte*& pSrc, Int32 ch, DecoderFallbackBuffer fallback, Char*& pTarget)

Asp.net Core:

[HttpPost("[action]")]
[AllowAnonymous]
public async Task<ReturnFromSpDto> AddFileInsertAsync(Test1 name)
{ .. }

Test1 class:

public class Test1
{
    public string Name { get; set; }
}

Angular Html:

<input #file type="file" multiple (change)="upload(file.files)" />

Angular:

  upload(files) {
    if (files.length === 0)
      return;
    const formData = new FormData();

    formData.append(files[0].name, files[0]);

    const headers = new HttpHeaders({ "Content-Type": "application/json; charset=utf-8" });
    headers.append('Accept', 'application/json');
    formData.append('Name', 'ads');
    console.log('formData', formData);

    const uploadReq = new HttpRequest('POST',
      `${this.appConfig.apiEndpoint}/api/doc/AddFileInsertAsync`, formData, {
        headers: headers,
        reportProgress: true,
      });

    this.httpClient.request(uploadReq).subscribe(event => {
      if (event.type === HttpEventType.UploadProgress)
        this.progress = Math.round(100 * event.loaded / event.total);
      else if (event.type === HttpEventType.Response)
        this.message = event.body.toString();
    });
  }

Upvotes: 0

Views: 380

Answers (2)

Ryan
Ryan

Reputation: 20116

Try to remove headers directly and the use below code to send post request

upload(files) {
  if (files.length === 0)
  return;
  const formData: FormData = new FormData();
  formData.append('name', 'ads');
  formData.append('file', files[0], files[0].name);
  this.httpClient.post( `${this.appConfig.apiEndpoint}/api/doc/AddFileInsertAsync`, formData).subscribe(result => {
    console.log(result);
  }, error => console.error(error));
}

Model:

public class Test1
{
    public string Name { get; set; }
    public IFormFile File { get; set; }      
}

Action:

[HttpPost("[action]")]
[AllowAnonymous]
public async Task<ReturnFromSpDto> AddFileInsertAsync([FromForm]Test1 test)
{ .. }

Upvotes: 1

KavehG
KavehG

Reputation: 323

when appending a file to formData use:

formData.append('file', file, file.name);

You're using your filename as form field name which might cause problems, 2nd. Don't set the Content-Type to application/json, let it remain x-www-form-urlencoded.

Upvotes: 0

Related Questions