Header

User Edit Profile Icon

• This icon adds a visual representation of the user and helps in quick identification.

Edit User Profile Icon

Click the Edit icon on a profile picture to upload a new profile picture.

User Profile Icon

• Upload the 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

Below is the Header code snippet.

const handleFileChange = (e) => {
   let userId = JSON.parse(localStorage.getItem('userDetails'));
   // setUserd(userId.id)
   let functionParam = {
     userId: userId?.id
   }
   const formData = new FormData();
   formData.append('file', e.target.files[0]);
   formData.append('folder', 'public/images');
   formData.append('makePublic', true);
   formData.append('functionName', 'AddUserImage');
   formData.append('functionParam', JSON.stringify(functionParam));
   // Example using fetch:
   fetch('https://api.eng-dev-1.trilloapps.com/foldersvc/cloudstorage/upload', {
     method: 'POST',
     headers: {
       'Accept': '*/*',
       'x-app-name': 'main',
       'x-org-name': 'cloud',
       // 'content-type': 'application/json',
       'Authorization': 'Bearer ' + localStorage.getItem('accessToken'),
     },
     body: formData,
   })
     .then((response) => response.json())
     .then((data) => {
       console.log('File uploaded successfully', data);
       setUserProfile(data.pictureUrl)
       toast.success('Picture updated successfully!', {
         position: 'top-right',
         autoClose: 3000,
         hideProgressBar: false,
         closeOnClick: true,
         pauseOnHover: true,
         draggable: true,
       });
     })
     .catch((error) => {
       console.error('Error uploading file', error);
     });
 }

Code Description

This function, handleFileChange, is designed to handle a file change event, associated with a file input in a form. Here's a breakdown of its functionality:

Retrieve User ID

• Retrieves the user ID from localStorage using localStorage.getItem('userDetails').

• Parses the user details as JSON and extracts the user ID.

Function Parameters

• Creates a functionParam object containing the user ID as a parameter.

Form Data Preparation

Creates a new FormData object (formData).

• Appends various parameters to the FormData:

• '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 user ID.

File Upload Using Fetch API

• Makes an asynchronous call to the 'https://api.eng-dev-1.trilloapps.com/foldersvc/cloudstorage/upload' endpoint using the Fetch API.

• Configures the request with method 'POST', necessary headers, and the prepared FormData.

• Uses the 'Authorization' header to include the user's access token from localStorage.

Response Handling

• Parses the response as JSON.

• If the response indicates success:

• Logs a success message to the console.

• Updates the user profile with the new picture URL.

• Displays a success toast notification.

Error Handling

• Catches any errors that occur during the file upload process.

• Logs an error message to the console.