Search code examples
reactjsreduxaxioses6-promise

How to convert Promise to String? I used Axios and return the data to my react Component

I have an API call to Cloudinary after the image was uploaded it returns a promise instead of a string. I wanted to to get the URL on my uploaded image to be saved on my database.

Here is the return screenshot:

Debug return result

Here is my Axios code:

export const uploadImage = imageUpload => async dispatch => {
  try {

    const formData = new FormData();
    formData.append('file', imageUpload);

    const res = await axios.post(
      'https://api.cloudinary.com/v1_1/frank/image/upload',
      formData
    );

    return res.data.secure_url;
  } catch (err) {
    const errors = err.response.data.error;
  }
};

I also tried using .then(), but my variable returns undefined.

Solution

  • Okay so I dispatch my res through my redux thunk 

    dispatch({
  type: UPLOAD_SUCCESS,
  payload: res.data.secure_url
});

    Then on my Component I used useEffect hook to set my formData. I also used useState hook for my props

    const [formData, setFormData] = useState({photo: '', imgURL: ''});

    If the the dispatch is triggered

    useEffect(() => {
  setFormData({ ...formData, photo: image });
}, [image]);

    Now my photo is set to a String. Thanks for sharing you ideas. It helped.