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

// Function to handle file upload
async function handleFileUpload(e) {
   const fileInput = e.target;
   const functionParam = {
       userId: userDetails.id
   };
   const formData = new FormData();
   formData.append('file', fileInput.files[0]);
   formData.append('folder', 'public/images');
   formData.append('makePublic', true);
   formData.append('functionName', 'AddUserImage');
   formData.append('functionParam', JSON.stringify(functionParam));


   try {
       const response = await apiService.uploadImage(formData);


       if (response) {
           updateProfilePictures(response);
       } else {
           showToast(response.message, 'danger');
       }
   } catch (error) {
       showToast(error.message, 'danger');
   }
}

Code Description

This async JavaScript function, handleFileUpload manages the uploading of files in an application environment. It processes file submissions, ensures secure handling, and may involve interactions with a server for storage or further processing.

Event Handling

The function is triggered by an event, presumably a file input change event (e).

User Details

Retrieves the userDetails.id to associate the file upload with a specific user.

Prepare Form Data

Creates a FormData object, formData, to handle the file upload.

Appends various parameters to the form data:

• 'file': The actual file from the file input.

• 'folder': Specifies the folder for storing the uploaded file ('public/images' in this case).

• 'make public': A boolean indicating whether the file should be made public (set to true).

• 'functionName': Specifies the name of the function to be called on the server ('AddUserImage').

• 'functionParam': The function parameters, including the userId.

• Upload Image:

Makes an asynchronous call to apiService.uploadImage with the prepared form data.

The await keyword is used to wait for the asynchronous operation to complete.

Handle API Response

If the upload is successful (the response is truthy), it calls the updateProfilePictures function, presumably to update the user's profile pictures.

If there's an issue with the upload, it displays an error toast using showToast with a danger alert.

Error Handling

Catches any errors that occur during the API call and displays an error toast.