Multiple file uploads to Cloudinary with Axios in React

Question

I have tried implementing the superagent way of uploading multiple files in axios. But somehow, I'm getting an error in console

Failed to load https://api.cloudinary.com/v1_1/xxxx/image/upload: Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response.

My upload handler looks like this

  uploadFile(){
      const uploaders = this.state.filesToBeSent.map(file => {
             const formData = new FormData();
             formData.append("file", file);
             formData.append("upload_preset", "xxxxx"); 
             formData.append("api_key", "xxxxx");
             formData.append("timestamp", (Date.now() / 1000) | 0);

             return axios.post(url, formData, {
               headers: { "X-Requested-With": "XMLHttpRequest" },
             }).then(response => {
               const data = response.data;
               const fileURL = data.secure_url 
               console.log(data);
             })
         });

    // Once all the files are uploaded
    axios.all(uploaders).then(() => {
      // ... perform after upload is successful operation
      console.log("upload completed ", uploaders);
    });
  }

I have got this example from here

Another thing is confusing to me. In superagent we can attach parameters to the request field which includes API Secret Key of Cloudinary like this:

     const paramsStr = 'timestamp='+timestamp+'&upload_preset='+uploadPreset+secretKey;
     const signature = sha1(paramsStr);

      const params = {
        'api_key': 'xxxx',
        'timestamp': timestamp,
       'upload_preset': uploadPreset,
        'signature': signature
     }

      Object.keys(params).forEach(key => {
        uploadRequest.field(key, params[key])
      });

But in that example, it is not mentioned how to append the secret key and other params to axios.

rcstraus rcstraus · Accepted Answer · 2018-01-19T11:00:27

You will need to generate the signature on your backend, and then perform the upload with the generated signature. You can generate a signature via the following instructions- https://support.cloudinary.com/hc/en-us/articles/203817991-How-to-generate-a-Cloudinary-signature-on-my-own-

You can also take a look at the following example on how to append the signature to your request. It's in PHP, however, the guidelines still apply. https://gist.github.com/taragano/a000965b1514befbaa03a24e32efdfe5

Multiple file uploads to Cloudinary with Axios in React

1 Answers