Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

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

$
0
0

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}`,       });     }   }; };
    1. 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));};
    2. 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 });      };
  1. 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;  },

Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>