Uploading multiple content to Cloudinary React js

Question

I'm building this website where users can sometimes upload one audio or one image and sometimes both at the same time to cloudinary. I'm able to upload from the front-end (react.js) one or the other (image or audio) but not both at the same time.

I saw this post that says that it is not possible except if we "write a script and use multi-threads (up to 10 threads) to upload many files at once. " I have no idea what it means in the context of react.js | JavaScript.

My code is the following:

I first call the handleUploadCloudinary with its parameter. The function is being called once the data is ready to be published.

  const publishTheEntry = () => {
    const {
      mainText,
      mediaAudio,
      mediaImg
    } = formData;

    if(mediaAudio !== ""){
      handleUploadCloudinary("audio");
    };
     if(mediaImg !== ""){
      handleUploadCloudinary("image");
    };
  };

The handleUploadCloudinary() is the following:

const handleUploadCloudinary = (mediaType) => {

    const {
      mediaAudio,
      mediaImg
    } = formData;

    const formDataCloudinary = new FormData();  
    formDataCloudinary.append("upload_preset", my_var_here);
    formDataCloudinary.append("timestamp", (Date.now() / 1000) | 0);

    if(mediaType === "img"){

      formDataCloudinary.append("file", mediaImg);
      axios.post(
        "https://api.cloudinary.com/v1_1/sismographie-cloud/image/upload", 
        formDataCloudinary
      ).then((response) => {
        console.log(response);
        let url = response.data.secure_url;
        setFormData({...formData, mediaImg: url});
      })  

    }else if(mediaType === "audio"){

      formDataCloudinary.append("file", mediaAudio); 
      axios.post(
        "https://api.cloudinary.com/v1_1/sismographie-cloud/upload", 
        formDataCloudinary
      ).then((response) => {
        let url = response.data.secure_url;
        setFormData({...formData, mediaAudio: url});
      }) 

    }
  }; 

Even if, for when both audio + image are stored into the state, I can console.log() both of the conditions, the state won't bot update the formData with both. One will successfully sate the state with a new cloudinary link while the other one will remain a buffer.

Answer 1

You can loop through your resources list and upload assets one by one, or create new threads at the backend (best practice).

This link is a demo for uploading multiple files using Axios and React: https://codesandbox.io/s/chunked-client-side-upload-forked-vqx6mp?file=/src/CldCustUploadLgRestApi.js