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; }
}