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: https://api.eng-dev-1.trilloapps.com/foldersvc/cloudstorage/upload

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: