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; }
}
Léon Zimmermann
  • 123
  • 1
  • 14

0 Answers0