0

I try to upload an image that is created from an base64 URI. When i want to upload the image my server response with an 400 Status and i dont find my issue...

Can someone please help me?

This is my function to generate the image:

    convertDataUrlToBlob(dataUrl): Blob {
    const arr = dataUrl.split(',');
    const mime = arr[0].match(/:(.*?);/)[1];
    const bstr = atob(arr[1]);
    let n = bstr.length;
    const u8arr = new Uint8Array(n);

    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }

    return new Blob([u8arr], {type: mime});
}

The Image Object:

    ProfileImage: File
lastModified: 1603491333691
lastModifiedDate: Sat Oct 24 2020 00:15:33 GMT+0200 (Mitteleuropäische Sommerzeit) {}
name: "userprofile.png"
size: 1911552
type: "image/png"
webkitRelativePath: ""

This is my function to upload the image

    onPostClick(): void {
    const file = new File([this.convertDataUrlToBlob(this.imageDestination)], "userprofile.png", {type: 'image/png'});
    const data = {
        ProfileImage : file,
        id : this.userId
    }

    this.errorMessage = "";
    if(this.imageDestination != ""){
        this.postService.post(data).subscribe(result=>{
            if(result){
                console.log(result)
            }
        },
        (error:HttpErrorResponse) => {
            alert(error.message);
        })
    }
    this.dialogRef.close();

}

My controller to uploade the image:

[HttpPut]
    [Authorize]
    //[RequestSizeLimit(1_000_000)]
    [Route("UpdateImage")]
    public async Task<IActionResult> UpdateImage(ApplicationUserModel model)
    {
        try
        {
            var user = await _userManager.FindByIdAsync(model.id);
            if (user.ProfileImagePath != null)
            {
                var file = new FileInfo(user.ProfileImagePath);
                file.Delete();
            }
            var uniqueFileName = GetUniqueFileName(model.ProfileImage.FileName);
            var uploads = Path.Combine(hostingEnvironment.WebRootPath, "Images/ProfileImages");
            var filePath = Path.Combine(uploads, uniqueFileName);
            await model.ProfileImage.CopyToAsync(new FileStream(filePath, FileMode.Create));
            user.ProfileImagePath = filePath;

            var result = await _userManager.UpdateAsync(user);

            return Ok(result);

        }
        catch (Exception ex)
        {

            throw ex;
        }
    }

The UserModel

    public class ApplicationUserModel
{
    public string id { get; set; }
    public string UserName { get; set; }
    public string Email { get; set; }
    public string Password { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public DateTime Birthdate { get; set; }
    public DateTime EntryDate { get; set; }
    public string Role { get; set; }
    public IFormFile ProfileImage { get; set; }
    public IFormFile HeaderImage { get; set; }
    public string ProfileImagePath { get; set; }
}
4
  • 1
    Can you show us the ApplicationUserModel class? Commented Oct 23, 2020 at 22:25
  • I have added the Model in my post Commented Oct 23, 2020 at 22:37
  • If you set a breakpoint in the catch block, what is the error? Commented Oct 24, 2020 at 2:20
  • It looks like the POST payload doesn't match the controller method's model. Take a look at this stackoverflow.com/a/47822483/109941 Commented Oct 24, 2020 at 17:24

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.