I just started learning Angular and decided to create a profile page. But, I encountered an error while trying to upload a profile image. The error message that I received was POST http://localhost:3000/api/v1/users/avatar/jja 500 (Internal Server Error). Upon checking the network tab, it showed me this message: {"error":"No file found"}.
Below you'll find the code snippet:
profile.ts
public onFormSubmit({ value, valid }: { value: any, valid: boolean }) {
let profile = JSON.parse(localStorage.getItem("profile"));
this.accountDetails = profile.user;
this.user = value;
this.api.post("/users/avatar/" + this.accountDetails.username, value, true)
.subscribe((response) => {
this.api.get("/users/" + this.accountDetails.username, true)
.subscribe((response) => {
profile.user = response.data
console.log(this.accountDetails.username)
localStorage.setItem("profile", JSON.stringify(profile))
this.accountDetails = profile.user;
this.user = this.accountDetails;
console.log("2", this.user)
location.href = "/profile"
}, (err) => {
alert("Update failed " + err);
})
}, (err) => {
alert("Update failed " + err);
})
}
profile.html
<div class="col-md-3">
<form novalidate (ngSubmit)="onFormSubmit(imageUpload)" #imageUpload="ngForm">
<div class="profile-pic" style="background-image: url('http://www.sheffield.com/wp-content/uploads/2013/06/placeholder.png')"
>
{{accountDetails.avatarUrl}}
</div>
<input type="file"
placholder="Change Image"
name="avatarUrl"
[(ngModel)] = "user.avatarUrl"
#avatarUrl = "ngModel">
<p class="form-submit ">
<input type="submit" value="Update" class="button color small submit">
</p>
</form>
</div>