React Native - Axios- Expo Image picker - upload image to server not working

Question

I am using expo-image-picker for UI interface to upload images to my app. I am finding some diffuculties when I want to upload the images to backend. The images are not uploaded and I don't get the reason. I have tried everything but nothing seems to work.

1. How I set the data to the image state

      const showImagePicker = async () => {
        Promise.all([ImagePicker.requestMediaLibraryPermissionsAsync(), ImagePicker.requestCameraPermissionsAsync()]).then(result => {
          result.forEach(permission => {
            return !permission.granted;
          });
        });
   
        const result: ImagePicker.ImageInfo = (await ImagePicker.launchImageLibraryAsync({
          base64: true,
        })) as ImagePicker.ImageInfo;
   
        const uriParts = result.uri.split('.');
        const fileType = uriParts[uriParts.length - 1];
   
        if (!result.cancelled) {
          setPickedImagePath({
            uri: Platform.OS === 'android' ? result.uri : result.uri.replace('file://', ''),
            name: `photo.${fileType}`,
            type: `application/${fileType}`,
          });
        }
      };
    };
   

   2. How I append the data to formData

      const createRequestCall = async () => {
        const formData = new FormData();
        formData.append('file', pickedImage.uri);
        formData.append('data2', 'test');
        formData.append('data3', '123');
        formData.append('data4', 'test');
      
        dispatch(uploadPhoto(formData));
      };
      

   3. How I dispatch the request if file is loading.

export const uploadPhoto=
      (photoRequest: FormData) =>
      async (dispatch: Dispatch<Action>): Promise<void> => {
        dispatch({ type: ActionTypes.API_LOADING, payload: apiIsLoading });
        const response = await Apis.requestPhoto(fileRequest);
        dispatch({ type: ActionTypes.API_LOADING, payload: apiIsNotLoading });
      };

4. The request I send to the backend.

async requestPhoto(data: FormData): Promise<IDetails> {
    const response = await http.post<IDetails, AxiosResponse<ITripDetailsResponse>>(${baseURL}/upload/image, data, {
      headers: { 'Content-Type': 'multipart/form-data' },
      transformRequest(formData, headers) {
        return data;
      },
    });
    return response.data;
  },

Answer 1

Found a solution by using fetch instead of axios on my api call