title: Multiple file uploads to Cloudinary with Axios in React
body: <p>I have tried implementing the superagent way of uploading multiple files in axios. But somehow, I'm getting an error in console</p>
  
  <blockquote>
    <p>Failed to load <a href="https://api.cloudinary.com/v1_1/xxxx/image/upload" rel="nofollow noreferrer">https://api.cloudinary.com/v1_1/xxxx/image/upload</a>:
    Request header field Authorization is not allowed by 
    Access-Control-Allow-Headers in preflight response.</p>
  </blockquote>
  
  <p>My upload handler looks like this</p>
  
  <pre><code>  uploadFile(){
        const uploaders = this.state.filesToBeSent.map(file =&gt; {
               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 =&gt; {
                 const data = response.data;
                 const fileURL = data.secure_url 
                 console.log(data);
               })
           });
  
      // Once all the files are uploaded
      axios.all(uploaders).then(() =&gt; {
        // ... perform after upload is successful operation
        console.log("upload completed ", uploaders);
      });
    }
  </code></pre>
  
  <p>I have got this example from <a href="https://blog.codeinfuse.com/upload-multiple-files-to-cloudinary-using-react-dropzone-axios-27883c2a5ec6" rel="nofollow noreferrer">here</a></p>
  
  <p>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:</p>
  
  <pre><code>     const paramsStr = 'timestamp='+timestamp+'&amp;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 =&gt; {
          uploadRequest.field(key, params[key])
        });
  </code></pre>
  
  <p>But in that example, it is not mentioned how to append the secret key and other params to axios. </p>