# Header
#### User Edit Profile Icon
* This icon adds a visual representation of the user and helps in quick identification.
User Edit Profile Icon
* Click the Edit icon on a profile picture to upload a new profile picture
User Profile Icon
* Upload call after selecting the profile picture
* Request URL:
**Payload:**
Header Payload
**Preview:**
Header Preview
**Edit Profile Code Snippet**
```
onFileSelect(event) {
const selectedFiles: FileList = event.target.files as FileList;
const validFileTypes = ["image/png", "image/jpeg", "image/jpg"];
const invalidFiles = Array.from(selectedFiles).filter(
(file) => !validFileTypes.includes(file.type)
);
this.filesToUpload = event.target.files;
this.uploadFiles();
this.filename = "";
if (event.target.files && event.target.files.length > 0) {
this.file = event.target.files[0];
this.filename = this.file.name;
}
}
uploadFiles() {
let functionParam = {
userId : this.userDetails.id
}
for (const file of this.filesToUpload) {
const formData: FormData = new FormData();
formData.append("file", file);
formData.append("folder", "public/images");
formData.append("makePublic", "true");
formData.append("functionName", "AddUserImage");
formData.append("functionParam", JSON.stringify(functionParam));
this.DataService.ProfileFileUpload(formData).subscribe({
next: (response) => {
this.userProfileImage= response.pictureUrl
},
error: (error) => {
console.error(error)
console.error(error);
},
complete: () => { },
});
}
}
```
#### Code Description
**File Selection**
* Captures the selected files from the input event.
**File Type Validation**
* Checks the file types against a predefined list of valid image types ("image/png", "image/jpeg", "image/jpg").
* Filters out any files with invalid types and stores them in the invalidFiles array.
* Handling API Response:
**File Upload Initialization**
Stores the selected files in the filesToUpload property.
**Filename Initialization**
* Resets the filename property.
**Single File Handling**
If files are selected
* Takes the first file from the selected files.
* Retrieves and stores its name in the filename property.
**File Upload Execution**
Invokes the uploadFiles method to handle the actual file upload.
**File Upload:**
**Function Parameter Preparation**
Constructs a functionParam object containing the userId retrieved from this.userDetails.id.
File Iteration:
Loops through each file in this.filesToUpload.
**FormData Preparation**
Creates a FormData object and appends file-related information:
* 'File': Appends the file itself with the key "file".
* 'Folder': Specifies the target folder as "public/images".
* 'makePublic': Sets the visibility of the file as public ("makePublic": "true").
* 'functionName': Specifies the intended function name as "AddUserImage".
* 'functionParam': Appends the function parameters as a JSON string.
**File Upload API Call**
Calls the ProfileFileUpload method from this.DataService with the prepared formData.
Subscribes to the observable returned by the API call.
**Handling API Response**
In the next block, update this.userProfileImage with the URL of the uploaded picture from the API response.
**Error Handling**
In the error block, logs and displays any errors that occur during the file upload process.
Completion:
