Redux Form: How to add image url before submitting form request?

Question

JavaScript

I have a form with uploading an image to Cloudinary as a separate request from the form. What I want to do is to hook the url from the response object with Cloudinary, pass this url to my redux form and together with the rest of the form values ​​(post author, post title and post body) send a request to my server and store it in the database.
So far the request looks like this:

onChange(event) {
   let formData = new FormData();
   formData.append('file', event.target.files[0]);
   formData.append('upload_preset', UPLOAD_PRESET);

  axios({
    url: `${COUDINARY_ROOT_URL}`,
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    data: formData
    }).then((res) => {
     console.log(res);

   }).catch((err) => {
     console.err(err);
   });

The essence of the question is how to pass the url from the Cloudinary response to the form in order to submit it to the server?
If this is not a very good way, I would be very grateful for advice as well. Thank you!

Answer 1

Form redux works like view → action → middlewares → reducers → state → view. What is stopping you from collecting data about the file and putting it in the State. And then, when submitting the form, collect all the data in a heap and write one action. I wrote a form for sending a photo with a description to the server, and I think it will differ from yours in the fields and api of the server. I have all the data passed to the action. In the action, the first thing is that the picture is uploaded to the server and in the response I get its id. And then do what you want with the id of the picture.