Not able to upload image in jpg or png format

I am trying to submit image in post api, but somehow I am not able to do it.

Currently I am using react-native-image-picker package.

On click of image selecting button, below function is being called. which is working fine.

    const handleImagePicker = async (item: string) => {
        const options: ImageLibraryOptions = {
          mediaType: 'photo',
        };
    
        try {
          const response = await launchImageLibrary(options);
    
          if (response.didCancel) {
            console.log('User cancelled image picker');
            return;
          }
    
          if (response.assets && response.assets.length > 0) {
            const {uri} = response.assets[0];
    
            if (item == 'Profile') {
              setSelectedProfileImage(uri);
              setProfilePictureEmpty(false);
            } else {
              setSelectedBannerImage(uri);
            }
          }
        } catch (error) {
          console.error('Error picking image:', error);
        }
      };

Then, On click of submit button below function is called.

 const addBusiness = async () => {
    const getUserId = async () => {
      try {
        const userId = await AsyncStorage.getItem('id');
        return userId;
      } catch (error) {
        return null;
      }
    };
    if (selectedProfileImage == '') {
      setProfilePictureEmpty(true);
      setErrMsg(string.enter_profile_picture);
    } else {
      var profileImg = {
        uri: selectedProfileImage,
      };
      var bannerImg = {
        uri: selectedBannerImage,
      };
      const userId = await getUserId();
      uploadImages(
        uploadImageAPI,
        businessDetails?.id,
        profileImg,
        bannerImg,
        (response: any) => {
          console.log(response)
          setSecondScreenEnabled(false);
        },
        (error: any) => {
          console.log('error', error);
        },
      );
    }
  };

here I am using custom API function. i.e., uploadImages.

Please find that function below:

export const uploadImages = async (
  url,
  Id,
  ProfilePicture,
  BannerPicture = null,
  onSuccess,
  onError,
) => {
  const formData = new FormData();
  instance.defaults.baseURL = Config.BASE_URL;

  const appendImage = (image, name) => {
    const { uri } = image;
    const fileType = uri.split('.').pop();
    formData.append(name, {
      uri: uri,
      type: `image/${fileType}`,
      name: `${name}.${fileType}`,
    });
  };

    formData.append('Id', Id);
 
  if (ProfilePicture) {
    appendImage(ProfilePicture, 'ProfilePicture');
  }

  if (BannerPicture) {
    appendImage(BannerPicture, 'BannerPicture');
  }

  try {
    const authToken = await getAuthToken();

    const config = {
      headers: {
        'Content-Type': 'multipart/form-data',
      },
    };

    if (authToken) {
      config.headers.Authorization = `Bearer ${authToken}`;
    }

    console.log('FormData:', formData);
    instance
        .put(url, formData, config)
        .then(function (response) {
          onSuccess(response.data);
        })
        .catch(function (error) {
          onError(error);
        });

    const response = await instance.put(url, formData, config);
    onSuccess(response.data);

  } catch (error) {
    if (error.response) {
      console.error('Response error:', error.response.data);
      console.error('Response status:', error.response.status);
      console.error('Response headers:', error.response.headers);
    } else if (error.request) {
      console.error('Request error:', error.request);
    } else {
      console.error('Error:', error.message);
    }
    onError(error);
  }
};

I am getting below error while submitting the image.

Request error: {"DONE": 4, "HEADERS_RECEIVED": 2, "LOADING": 3, "OPENED": 1, "UNSENT": 0, "_aborted": false, "_cachedResponse": undefined, "_hasError": true, "_headers": {"accept": "application/json", "authorization": "my_token"_responseType": "", "_sent": true, "_subscriptions": [], "_timedOut": false, "_trackingName": "unknown", "_url": "my_url", "readyState": 4, "responseHeaders": undefined, "status": 0, "timeout": 60000, "upload": {}, "withCredentials": true}

If anyone had face this thing and solved it then please help me out.

Thanks in advance 🙂